前端----Boostrap(二)

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" 点击黑灰色背景，不会关闭模态框