前端开发学习路径之阶段七：BootStrap详解
Bootstrap，来⾃ Twitter，是⽬前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基础上进⾏了更为个性化和⼈性化的完善，形成⼀套⾃⼰独有的⽹站风格，并兼容⼤部分jQuery插件。Bootstrap简洁灵活，使得 Web 开发更加快捷。其最⼤的优势是响应式布局，使得开发者可以⽅便的让⽹页⽆论在台式机、平板设备、⼿机上都获得最佳的体验。
⼀、Bootstrap CSS
1、Bootstrap ⽹格系统（Grid System）
1.1 Bootstrap ⽹格系统（Grid System）的⼯作原理
⽹格系统通过⼀系列包含内容的⾏和列来创建页⾯布局。下⾯列出了 Bootstrap ⽹格系统是如何⼯作的：
⾏必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（）。
使⽤⾏来创建列的⽔平组。
内容应该放置在列内，且唯有列可以是⾏的直接⼦元素。
预定义的⽹格类，⽐如 .row 和 .col-xs-4，可⽤于快速创建⽹格布局。LESS 混合类可⽤于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表⽰第⼀列和最后⼀列的⾏偏移。
⽹格系统是通过指定您想要横跨的⼗⼆个可⽤的列来创建的。例如，要创建三个相等的列，则使⽤三个 .col-xs-4。
1.2 媒体查询
媒体查询是⾮常别致的"有条件的 CSS 规则"。它只适⽤于⼀些基于某些规定条件的 CSS。如果满⾜那些条件，则应⽤相应的样式。Bootstrap 中的媒体查询允许您基于视⼝⼤⼩移动、显⽰并隐藏内容。下⾯的媒体查询在 LESS ⽂件中使⽤，⽤来创建 Bootstrap ⽹格系统中的关键的分界点阈值。
/* 超⼩设备（⼿机，⼩于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* ⼩型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* ⼤型设备（⼤台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我们有时候也会在媒体查询代码中包含 max-width，从⽽将 CSS 的影响限制在更⼩范围的屏幕⼤⼩之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
媒体查询有两个部分，先是⼀个设备规范，然后是⼀个⼤⼩规则。在上⾯的案例中，设置了下列的规则：
让我们来看下⾯这⾏代码：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度⼩于 @screen-sm-max，则会进⾏⼀些处理。
1.3 ⽹格选项
下表总结了 Bootstrap ⽹格系统如何跨多个设备⼯作：
超⼩设备⼿机（<768px）⼩型设备平板电脑
（≥768px）
中型设备台式电脑
（≥992px）
⼤型设备台式电脑
（≥1200px）
⽹格⾏为⼀直是⽔平的以折叠开始，断点以上是⽔平的以折叠开始，断点以上是⽔平的以折叠开始，断点以上是⽔平的
最⼤容器宽
度
None (auto)750px970px1170px
Class 前缀.l-lg-
列数量和12121212
最⼤列宽Auto60px78px95px
间隙宽度30px
（⼀个列的每边分别
15px）
30px
（⼀个列的每边分别 15px）
30px
（⼀个列的每边分别 15px）
30px
（⼀个列的每边分别 15px）
可嵌套Yes Yes Yes Yes 偏移量Yes Yes Yes Yes 列排序Yes Yes Yes Yes 2、Bootstrap 表格
Bootstrap 提供了⼀个清晰的创建表格的布局。下表列出了 Bootstrap ⽀持的⼀些表格元素：
标签描述
<table>为表格添加基础样式。
html下拉菜单的制作方法
<thead>表格标题⾏的容器元素（<tr>），⽤来标识表格列。
<tbody>表格主体中的表格⾏的容器元素（<tr>）。
<tr>⼀组出现在单⾏上的表格单元格的容器元素（<td> 或 <th>）。
<td>默认的表格单元格。
<th>特殊的表格单元格，⽤来标识列或⾏（取决于范围和位置）。必须在 <thead> 内使⽤。
<caption>关于表格存储内容的描述或总结。
2.1 表格类
下表样式可⽤于表格中：
类描述
.table为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不⽀持)
.
table-bordered为所有表格的单元格添加边框
.table-hover在 <tbody> 内的任⼀⾏启⽤⿏标悬停状态
.table-condensed让表格更加紧凑
联合使⽤所有表格类
2.2 <tr>, <th> 和 <td> 类
下表的类可⽤于表格的⾏或者单元格：
类描述
.active将悬停的颜⾊应⽤在⾏或者单元格上
.success表⽰成功的操作
.info表⽰信息变化的操作
.warning表⽰⼀个警告的操作
.
danger表⽰⼀个危险的操作
2.3 上下⽂类
下表中所列出的上下⽂类允许您改变表格⾏或单个单元格的背景颜⾊。
类描述
.active对某⼀特定的⾏或单元格应⽤悬停颜⾊
.success表⽰⼀个成功的或积极的动作
.warning表⽰⼀个需要注意的警告
.danger表⽰⼀个危险的或潜在的负⾯动作
3、Bootstrap 表单
3.1 表单布局
Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
⽔平表单
3.2 垂直或基本表单
基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：向⽗ 元素添加 role="form"。
把标签和控件放在⼀个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的⽂本元素 、<textarea> 和 <select> 添加 class .form-control。
3.3 内联表单
如果需要创建⼀个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使⽤内联表单时，您需要在
表单控件上设置⼀个宽度。
使⽤ class .sr-only，您可以隐藏内联表单的标签。
3.4 ⽔平表单
⽔平表单与其他表单不仅标记的数量上不同，⽽且表单的呈现形式也不同。如需创建⼀个⽔平布局的表单，请按下⾯的⼏个步骤进⾏：向⽗ <form> 元素添加 class .form-horizontal。
把标签和控件放在⼀个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。
3.5 ⽀持的表单控件
Bootstrap ⽀持最常见的表单控件，主要是 input、textarea、checkbox、 和 select。
输⼊框（Input）
最常见的表单⽂本字段是输⼊框 input。⽤户可以在其中输⼊⼤多数必要的表单数据。Bootstrap 提供了对所有原⽣的 HTML5 的 input 类型的⽀持，包括：text、password、datetime、datetime-local、da
te、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
⽂本框（Textarea）
当您需要进⾏多⾏输⼊的时，则可以使⽤⽂本框 textarea。必要时可以改变 rows 属性（较少的⾏ = 较⼩的盒⼦，较多的⾏ = 较⼤的盒⼦）。
复选框（（Checkbox）和单选框（Radio）
复选框和单选按钮⽤于让⽤户从⼀系列预设置的选项中进⾏选择。
当创建表单时，如果您想让⽤户从列表中选择若⼲个选项时，请使⽤ checkbox。如果您限制⽤户只能选择⼀个选项，请使⽤ radio。
对⼀系列复选框和单选框使⽤ .checkbox-inline 或 .radio-inline class，控制它们显⽰在同⼀⾏上。
选择框（Select）
当您想让⽤户从多个选项中进⾏选择，但是默认情况下只能选择⼀个选项时，则使⽤选择框。
使⽤ 展⽰列表选项，通常是那些⽤户很熟悉的选择列表，⽐如州或者数字。
使⽤ multiple="multiple" 允许⽤户选择多个选项。
表单控件状态
除了 :focus 状态（即，⽤户点击 input 或使⽤ tab 键聚焦到 input 上），Bootstrap 还为禁⽤的输⼊框定义了样式，并提供了表单验证的 class。
输⼊框焦点
当输⼊框 input 接收到 :focus 时，输⼊框的轮廓会被移除，同时应⽤ box-shadow。
禁⽤的输⼊框 input
如果您想要禁⽤⼀个输⼊框 input，只需要简单地添加 disabled 属性，这不仅会禁⽤输⼊框，还会改变输⼊框的样式以及当⿏标的指针悬停在元素上时⿏标指针的样式。
禁⽤的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁⽤ <fieldset> 内的所有控件。
验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对⽗元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使⽤验证状态。
4、Bootstrap 按钮和图⽚
4.1 Bootstrap 按钮
任何带有 class .btn 的元素都会继承圆⾓灰⾊按钮的默认外观。但是 Bootstrap 提供了⼀些选项来定义按钮的样式，具体如下表所⽰：
以下样式可⽤于, , 或  元素上：
类描述
.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禁⽤按钮
按钮⼤⼩
下表列出了获得各种⼤⼩按钮的 class：
Class描述
.btn-lg这会让按钮看起来⽐较⼤。
.btn-sm这会让按钮看起来⽐较⼩。
.btn-xs这会让按钮看起来特别⼩。
.btn-block这会创建块级的按钮，会横跨⽗元素的全部宽度。
按钮状态
Bootstrap 提供了激活、禁⽤等按钮状态的 class，下⾯将进⾏详细讲解。激活状态
按钮在激活时将呈现为被按压的外观（深⾊的背景、深⾊的边框、阴影）。下表列出了让按钮元素和锚元素呈激活状态的 class：
元素Class
按钮元素添加 .active class 来显⽰它是激活的。
锚元素添加 .active class 到 <a> 按钮来显⽰它是激活的。
禁⽤状态
当您禁⽤⼀个按钮时，它的颜⾊会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁⽤状态的 class：
元素Class

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。