2.Bootstrap的使用
2.1 表格
和之前的表格相比,标签更丰富更加语义化,效果更佳美观
2.1.1 丰富的标签
- <table> 为表格添加基础样式
- <thead> 表格标题行的容器元素(<tr>)
- <tbody> 表格主体中的表格行的容器元素(<tr>)
- <tr> 表格行
- <td> 默认的表格单元格。
- <th> 特殊的表格单元格,(居中和加粗的效果)。必须在<thead> 内使用。
- <caption> 关于表格存储内容的描述或总结。
2.1.2 好看的类样式
- .table 为任意 <table> 添加基本样式 (只有横向分隔线)
- .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ,隔行变色
- .table-bordered 为所有表格的单元格添加边框
- .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态,鼠标悬停高亮突出显示
- .table-condensed 让表格更加紧凑
2.1.3 情景色类样式
- 适合应用在<th>、<tr>,<td>
- .active 激活效果(悬停颜色)
- .success 表示成功或积极的动作
- .info 表示普通的提示信息或动作
- .warning 表示警告或需要用户注意
- .danger 表示危险或潜在的带来的负面影响的动作
2.1.4 响应式表格
表格的父元素设置响应式,小于768px,出现边框
2.2 表单
2.2.1 表单布局
2.2.1.1 默认布局
2.2.1.2 内联布局
- 让所有表单元素居于一行
- 注意:当小于768px时,会自动还原成移动端样式.
2.2.2 表单控件
2.2.2.1 输入框
2.2.2.2 文本框
2.2.2.3 复选框
- checkbox 默认
- checkbox-inline 内联
2.2.2.4 复选按钮
2.2.2.5 单选框
2.3 按钮
- 按钮大小
- 按钮状态
- 激活状态:按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影);
- 禁用状态:当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变;
2.4 图片
- .img-rounded:添加 border-radius:6px 来获得图片圆角。
- .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail:添加一些内边距(padding)和一个灰色的边框
响应式图片
2.5 下拉菜单组件
用法的关键核心
1. 外围容器使用 class="dropdown"包裹
2. 内部点击按钮事件绑定 data-toggle="dropdown"
3. 菜单元素使用 class="dropdown-menu"
2.6 分页组件
2.7 栅格系统
- bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
- 当浏览器大小发生变化的时候,我们可以控制每行的元素占用几个格子,从而达到响应式的效果
显示屏幕的扩大和缩小. 实现如下效果
2.8 缩略图组件
- 配合响应式的栅格系统
- 自定义内容
2.9 模态框组件
- data-toggle="modal" 触发类型:模态框modal
- data-target="#myModal" 触发的节点
- data-backdrop="static" 点击黑灰色背景,不会关闭模态框