BootStrap初步
一、 Bootstrap 简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。基于 HTML、CSS、JavaScript 。
Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
二、Bootstrap 表格
1、一些表格元素
| 标签 | 描述 |
|---|---|
| < table > | 为表格添加基础样式。 |
| < thead > | 表格标题行的容器元素（< tr >），用来标识表格列。 |
| < tbody > | 表格主体中的表格行的容器元素（< tr >） |
| < tr > | 一组出现在单行上的表格单元格的容器元素（< td > 或 < th >） |
| < td > | 默认的表格单元格 |
| < th > | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 < thead > 内使用 |
| < caption > | 关于表格存储内容的描述或总结 |
2、表格中常应用的样式
| 类 | 描述 |
|---|---|
| .table | 为任意 < table > 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 < tbody > 内添加斑马线形式的条纹 |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 < tbody > 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>用于表格的行或者单元格</h2>
<p>联合使用以上所有表格类:</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>类</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>.active</td>
<td>将悬停的颜色应用在行或者单元格上</td>
</tr>
<tr>
<td>.success</td>
<td>表示成功的操作</td>
</tr>
<tr>
<td>.info</td>
<td>表示信息变化的操作</td>
</tr>
<tr>
<td>.warning</td>
<td>表示一个警告的操作</td>
</tr>
<tr>
<td>.danger</td>
<td>表示一个危险的操作</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
结果
3、表格应用
通过对以上内容的应用
可以构建基本的表格和可选的表格类
基本的表格
添加 class .table，只带有内边距（padding）和水平分割
可选的表格
类除了基本表格的内容，还可以加一些标记定义的类
a.条纹表格
添加 .table-striped class，在 < tbody > 内的行上看到条纹
b.边框表格
添加 .table-bordered class，使每个元素周围都有边框
c.悬停表格
添加 .table-hover class，使当指针悬停在行上时会出现浅灰色背景
d.精简表格
添加 .table-condensed class，使行内边距被切为两半
还可以构建上下文类和响应式表格
上下文类
使用.active、.success、.warning、.danger，改变单元格或表格行背景颜色
响应式表格
通过把任意的 .table 包在 .table-responsive class 内，使表格水平滚动以适应小型设备（小于 768px）
三、Bootstrap 按钮
1、按钮基本样式
以下样式可用于< a >, < button >, 或 < input > 元素上：
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>
</html>
结果
2.按钮大小
获得各种大小按钮的 class
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大 |
| .btn-sm | 这会让按钮看起来比较小 |
| .btn-xs | 这会让按钮看起来特别小 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度 |
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary"> 默认大小的原始按钮</button>
<button type="button" class="btn btn-default"> 默认大小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
</body>
</html>
结果
四、Bootstrap 图片
1.三个简单样式
Bootstrap 提供了三个可对图片应用简单样式的 class
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="../image/z4.jpg" />
<p>原图</p>
<img src="../image/z4.jpg" class="img-rounded"/>
<p>图片圆角</p>
<img src="../image/z4.jpg" class="img-circle"/>
<p>圆形图片</p>
<img src="../image/z4.jpg" class="img-thumbnail"/>
<p>图片内边距和边框</p>
</body>
</html>
结果
2.< img > 类
| 类 | 描述 |
|---|---|
| .img-rounded | 为图片添加圆角 |
| .img-circle | 将图片变为圆形 |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 |
以上各类可以应用于任何图片
3.响应式图片
通过在 < img > 标签添加 .img-responsive 类来让图片支持响应式设计。
图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
