Bootstrap笔记
程序员文章站
2023-12-28 21:10:46
...
Bootstrap
一、 什么是Bootstrap：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于快速开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是由 Twitter 的 Mark Otto （马克奥托）和 Jacob Thornton （雅各布松顿）开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
二、 环境的搭建：
(一) 网站
1、 官方网站：getbootstrap.com
2、 中文网站：http://www.bootcss.com/
(二) 压缩包中的文件结构：可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的CSS和JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的Bootstrap主题。
(三) 源代码中的文件结构：
三、 Bootstrap页面的基本模板
(一) 解释说明：
1、 <meta http-equiv="X-UA-Compatible" content="IE=edge">：简单说就是让所有的IE浏览器以最高版本的IE渲染方式渲染页面，避免由于浏览器版本升级导致的不兼容问题
2、 <meta name="viewport" content="width=device-width,initial-scale=1">：作用是实现响应式布局
1) name="viewport" 指的是移动端的浏览器，看到这段代码，马上就知道这是移动端浏览器
2) width=device-width,指的是移动端页面的宽度等于设备的宽度
3) initial-scale=1.0指的是页面将是原本尺寸展示，如果后面是2.0的话，就是是将页面放大两倍
3、 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>：作用是让低版本IE浏览器支持H5标签
4、 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>：作用是让低版本IE浏览器支持响应式布局
四、 全局CSS样式
(一) 布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
1、 .container 类用于固定宽度并支持响应式布局的容器。
2、 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
(二) 排版
1、 标题
1) 支持所有的标题标签h1-h6，也支持<small></small>标签，用来创建副标题
2) 支持所有的.h1-.h6类，为的是给内联（inline）属性的文本赋予标题的样式。也支持.small类用来创建副标题
2、 页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。通过添加 .lead 类可以让段落突出显示
3、 内联文本元素：
1) <mark></mark>标签：标记文本（高亮显示文本），也具有mark类
2) <del></del>标签：在文本上显示删除线，用来包含要删除的文本
3) <s></s>标签：在文本上显示删除线，用来包含无用的文本
4) <ins></ins>标签：在文本下面显示下划线，表示插入的文本
5) <u></u>标签：在文本下面显示下划线
6) <small></small>标签：显示小号文本，字体是包含容器的85%，也具有small类
7) <strong></strong>标签：加粗效果，用加粗的方式强调文本
8) <em></em>标签：倾斜效果，用倾斜的方式强调文本
4、 对齐
1) text-left：左对齐
2) text-center：居中对齐
3) text-right：右对齐
4) text-justify：两端对齐
5) text-nowrap：不换行
5、 改变大小写
1) text-lowercase：所有字母小写
2) text-uppercase：所有字母大写
3) text-capitalize：首字母大写
6、 缩略语
1) 基本缩略语：使用<abbr></abbr>标签定义缩略语，当鼠标悬停在缩写和缩写词上时就会显示完整内容，必须使用title属性，格式：<abbr title=“全拼格式”>简写</abbr>，示例：<abbr title=”property”>pro</abbr>
2) 首字母缩略语：为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。示例：<abbr title="HyperText Mark Language" class="initialism">HTML</abbr>
7、 地址：利用<address></address>标签，默认为 display:block;，需要使用标签来为封闭的地址文本添加换行。示例如下
8、 引用
1) 默认样式的引用：<blockquote></blockquote>标签，增加了左边线，设定了字体大小和内外边距
2) 反向：通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。示例：<blockquote class=”blockquote-reverse”>引用内容</blockquote>
3) 多重引用样式：通过添加<footer>标签来标明引用来源。来源的名称可以包裹进 <cite>标签中。
9、 列表
1) .list-styled类：默认样式
2) .list-unstyled类：移出列表默认样式，不能继承，这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式
3) .list-inline类：使li变为行内块元素
4) .dl- horizontal：可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
(三) 代码
1、 内联代码：<code></code>
2、 用户输入：<kbd></kbd>
3、 基本代码块：<pre></pre>标签，还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
4、 变量：<var></var>标签
5、 程序输出：<samp></samp>标签，通过 <samp> 标签来标记程序输出的内容
(四) 表格
1、 基本实例（.table类）：为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
2、 条纹状表格（table-striped类）：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式，可以和上面的类结合使用，IE8及以下IE浏览器不支持
3、 带边框表格（table-bordered类）：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
4、 鼠标悬停（table-hover类）：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
5、 紧缩表格（table- condensed类）：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
6、 状态类：通过这些状态类可以为行或单元格设置颜色
7、 sr-only类：隐藏内容
8、 响应式表格：将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。在手机上面会出现可滑动效果
(五) 栅格系统：
1、 什么是栅格系统：栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。
2、 如何使用栅格系统：在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。我们先看看Bootstrap有几种栅格类可以使用：
1) 1. .col-xs-* 这是超小屏幕类（<768px），类似手机等设备。
2) 2. .col-ms-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。
3) 3. .col-md-* 这是中型设备类（≥992px且<1200px）。
4) 4. .col-lg-* 这是大型设备类（≥1200px）。
3、 注意事项：
1) 栅格系统总每一行上最多为12列，如果超过12，则自动换行
2) 在使用col-md-*时，可以通过设置*号的值，调节每一个格子所在的宽度，如col-md-3表示该格子占3个格子的宽度
3) 如果格子中的内容过多，那么格子的高度会自动增高
4) 如果需要将格子进行偏移，那么可以设置col-md-offset-偏移量，如<div class=”col-md-3 col-md-offset-5”></div>表示向右偏移5个格子的距离
5) 格子中可以嵌套其它的格式
6) 颠倒格子的位置，可以使用如下格式
7) 为了响应多种设备，可以给div设置多个类，如<div class=”col-md-6 col-xs-3></div>
(六) 表单：单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
1、 创建垂直或基本表单步骤
1) 向父 <form> 元素添加 role="form"。
2) 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
3) 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
2、 创建内联表单：如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。在使用时一定要加label标签，否则屏幕阅读器无法正确识别，如果不想让它显示，可以给它设置sr-only类
3、 创建水平表单步骤：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
1) 向父 <form> 元素添加 class .form-horizontal。
2) 把标签和控件放在一个带有 class .form-group 的 <div> 中。
3) 向标签添加 class .control-label。control-label类的作用是设置label中的内容为右对齐（宽度够大）。另外将复选框、单选框放到一个div中，并给这个div设置checkBox类或radio类
4、 被支持的控件：Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select
1) 复选框（Checkbox）和单选框（Radio）控件注意事项
a) 需要结合label标签使用，将文字描述和表单标签用label标签包含起来
b) 如果需要采用默认样式（垂直排列），那么可以将控件包含在div中，并给这个div添加checkbox或者radio类
c) 如果需要内联的样式，可以将单选框和复选框只用一个div包含，该div可以设置form-group类，在写label标签时，给该标签添加checkbox-inline类或者radio-inline类
5、 下拉菜单：也可以设置form-control
6、 文本域：也可以设置form-control
7、 静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
8、 表单控件状态
1) 只读状态：设置readonly属性，可以提交数据
2) 禁用状态：给表单元素添加disabled属性，不可以提交数据
3) 禁用字段集fieldset：给fieldset添加disabled属性，那么该字段集下面的所有表单元素都会被禁用
4) 验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
5) 表单帮助文本：Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block
6) 控件尺寸：可以通过栅格控制
a) 调整高度：可以给表单元素设置input-lg类（高）或者input-sm类（矮），也可以给表单元素所在的div（就是指设置了form-group类的div）设置form-group-lg类或者form-group-sm类，那么该容器下面的表单元素和label标签都会受到影响
b) 调整宽度：可以使用栅格
(七) 按钮：可以通过给button、input、a标签添加类来使其变为按钮效果，但是建议使用button标签实现按钮效果，避免跨浏览器的不一致性，如果是用a作为标签，那么建议给a添加role=“button”属性。表示它不是用来进行页面间的跳转的。常用类如下
(八) 图片
1、 常用类如下
1) .img-rounded：添加 border-radius:6px 来获得图片圆角。
2) .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
3) .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
2、 响应式图片：通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。.img-responsive 类将 max-width: 100%; 和 height: auto;
3、 如果需要图片居中，可以给图片设置center-block类
(九) 辅助类
1、 文本：
2、 背景
3、 关闭按钮：就是给标签添加close类，如<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
4、 三角符号：给span添加caret类
5、 快速浮动
1) pull-left类：左浮动
2) pull-right类：有浮动
6、 让内容块居中：给元素设置center-block类
7、 clearfix类：清除浮动
8、 显示与隐藏：
1) show类：显示
2) hidden类：隐藏，不占位
9、 text-hide类：将页面元素所包含的文本内容替换为背景图
(十) 响应式工具：这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
五、 组件
(一) Glyphicons 字体图标：包括250多个来自 Glyphicon Halflings 的字体图标
1、 使用方式：利用span标签制作图标，并为span添加类，出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。
1) 格式：<span class=”基类 图标类”></span>
2) 示例：<span class=” glyphicon glyphicon-signal”></span>
(二) 下拉菜单：用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。使用方式如下
1、 第一步：将下拉菜单触发器和下拉菜单都包裹在div中，其设置 .dropdown （放在btn-group中也是可以的）。也可以给div设置dropup类，此时菜单向上弹出
2、 第二步：给下拉菜单触发器添加data-toggle属性，属性值为dropdown。data-toggle="dropdown"就是向按钮之类元素添加切换下拉菜单的事件，使用data-xxx的自定义属性时先要加载bootstrap的js文件。（在使用JS文件前，先引入一个jQuery文件）
3、 第三步：给下拉菜单所在的容器（如果使用列表，就给ul或者ol设置）添加dropdown-menu类
4、 第四步：附加效果的设置
1) 对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。如果下拉菜单触发器也需要右对齐，那么可以给触发器和选项所在容器加pull-right类（即给dropdown类所在元素添加）
2) 标题：在任何下拉菜单中均可通过添加标题来标明一组动作，示例如下
3) 分割线：为下拉菜单添加一条分割线，用于将多个链接分组。如果需要使用分割线，给以加divider类，示例如下
4) 禁用的菜单项：为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。
(三) 按钮组：通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
1、 基本实例：btn-group类
2、 按钮工具栏：把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
3、 只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
4、 想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
5、 垂直排列：让一组按钮垂直堆叠排列显示而不是水平排列（给容器设置btn-group-vertical类即可）。分列式按钮下拉菜单不支持这种方式。
1) 示例1
2) 示例2
6、 两端对齐排列的按钮组
1) 用a标签做按钮
2) 用button标签做按钮，必须将每个按钮包裹进一个按钮组中
(四) 按钮式下拉菜单：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
1、 单按钮下拉菜单（即上面的下拉菜单）
2、 分裂式下拉菜单
3、 尺寸：按钮式下拉菜单适用所有尺寸的按钮，就是给button添加类btn-尺寸，尺寸可以是lg、md、sm、xs，示例如下
4、 向上弹出式菜单
(五) 输入框组：通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
1、 使用步骤
1) 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
2) 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
3) 把该 <span> 放置在 <input> 元素的前面或者后面。
2、 基本实例
3、 输入框组的大小：可以给input-group类所在的div添加input-group-lg类和input-group-sm类进而调节尺寸
4、 作为额外元素的多选框和单选框：可以把复选框和单选插件作为输入框组的前缀或者后缀元素
5、 作为额外元素的按钮：可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。
6、 作为额外元素的按钮式下拉菜单：给下拉菜单所在的div设置input-group-btn类
7、 作为额外元素的分裂式按钮下拉菜单
(六) 导航：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
1、 步骤
1) 结构为一个无序列表，内容需要用a标签包含起来
2) 以一个带有 class .nav 的无序列表开始。给ul添加.nav的基类，并为该ul添加状态类
3) 结合jquery、js使用
2、 常用状态类
1) .nav-tabs类：标签式导航菜单
2) .nav-pills类：基本的胶囊式导航菜单，jquery事件采用点击事件
3) .nav-stacked类：垂直的胶囊式导航菜单，在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠
4) .nav-justified类：创建两端对齐的导航，即让标签式或胶囊式导航菜单与父元素等宽
5) .disabled类：禁用链接，给li设置即可
6) 带有下拉菜单的标签：
a) 第一步：给li添加dropdown类
b) 第二步：给a标签添加dropdown-toggle类和data-toggle=“dropdown”属性
c) 第三步：在a标签的下面添加ul列表（注意：列表要有dropdown-menu类），即下拉菜单内容
(七) 导航条
1、 创建默认的导航条的步骤
1) 在文档中添加nav标签，给该标签添加navbar类、navbar-default或navbar-inverse类（这两个类的作用是设置颜色）。在nav中设置一个容器div，给它添加container或者container-fluid类
2) 设置导航条中的内容
a) 头部：用于写logo或者网站名称，方式为：在nav中插入一个div，给div设置navbar-header类，在该div中用超链接将文本包含起来，给这个超链接添加navbar-brand类，也可以放图片
b) 导航组件：使用方式同上面的导航组件相同，需要注意的是在ul中加nav类和navbar-nav类，不需要加nav-tabs或者nav-pills类
c) 表单：在nav中插入一个form标签，给这个标签添加navbar-form类，也可以添加navbar-left或者navbar-right进而调节位置，在form里面正常使用表单元素，可以参考全局CSS样式——表单模块
d) 按钮：如果按钮不在表单中，那么可以给按钮设置navbar –btn类，是按钮和其它的元素并排（注意其它的块元素要设置navbar-left或者navbar-right类，这两个类就是设置浮动效果）
e) 文本：导航栏中如果要设置文本，可以将文本用标签包含起来，然后给文本设置navbar-text类
f) 结合图标的导航链接：
3) 导航栏位置
a) 固定到顶部：给nav设置navbar-fixed-top类，需要给body添加至少50px的内边距，否则内容会被导航栏挡住
b) 固定到底部：给nav设置navbar-fixed-bottom类
c) 静态顶部：给nav添加navbar-static-top类
2、 路径导航：面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。面包屑导航的制作方式就是给ul或者ol添加breadcrumb类
(八) 分页：分页（Pagination），是一种无序列表
1、 使用步骤
1) 创建一个无序列表，给该列表添加pagination类
2) 在列表中定义li，如果需要向左和向右的箭头，可以使用«和»
2、 常用类
1) disabled类：禁用
2) active：**
3) 示例
3、 添加尺寸
1) pagination-lg类
2) pagination-sm类
4、 翻页：如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。在使用翻页时就是给无序列表添加pager类，而不是pagination类，常用类如下
1) previous类：把链接向左对齐
2) next类：把链接向右对齐
3) disabled类：禁用，外观变淡
(九) 标签：标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，使用方式就是在HTML标签中添加label基类，另外也具有多个修饰类label-default、label-primary、label-success、label-info、label-warning、label-danger
(十) 徽章：徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
(十一) 巨幕：顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用方式：在一个容器中先添加一个div，并为其设置jumbotron类，然后在该div中添加内容，如添加h1 标签等
(十二) 页头：页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中
(十三) 缩略图：在使用缩略图时，可以将图像放在a标签或者div中，需要给他们添加thumbnail类。可以和栅格结合使用，可以结合caption类使用
(十四) 警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。使用警告框的步骤就是，在一个div中添加一个基类alert，也可以添加修饰类，如alert-info/alert-success/alert-warning/alert-danger，如需要参加一个可以关闭的警告框，那么可以在警告框中添加关闭按钮或者超链接，并为它添加close类和data-dismiss=”alert”属性
在警告框中如果需要超链接，可以给超链接添加alert-link类，示例如下
(十五) 进度条
1、 进度条的使用步骤为
1) 添加一个带有 class .progress 的 <div>。
2) 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3) 添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
2、 progress-bar所在的div中常用的属性
1) aria-valuenow="60"：当前进度为60
2) aria-valuemin="0"：最小值为0
3) aria-valuemax=”100”：最大值为100
3、 可以为进度条添加修饰类：progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger
4、 带条纹的进度条：就是添加progress-striped
5、 带动画的进度条：就是添加active类
6、 堆叠的进度条：就是在一个progress下面添加多个progress-bar
(十六) 媒体对象：这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
1、 使用div作为容器的使用步骤如下
1) 在文档中插入一个div，给div添加media类
2) 在div中插入一个超链接，给超链接设置media-left类（调节位置），也可以设置media-middle或者media-bottom类调节垂直位置。在超链接中包含图像，给通信设置media-object 类
3) 在div下面在插入一个div容器，给该日期设置media-body类，在该容器中插入标题标签，设置class-heading类，在head下面插入盛装文本的标签
4) 注意：可以实现相互嵌套
5) 示例
2、 使用列表作为容器的步骤
1) 在文档中插入一个ul或者ol列表，给该列表添加media-list类
2) 给li添加media类
3) 其它同上
4) 示例
(十七) 列表组：列表组件用于以列表形式呈现复杂的和自定义的内容
1、 使用步骤
1) 在ul或ol中添加类list-group
2) 在li中添加list-group-item类
2、 向列表中添加徽章：我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可
3、 向列表组添加链接：就是将ul用div替换，将li用a替换
4、 向列表组中添加自定义内容：就是在上面的基础上添加其它内容，可以添加标题标签，也可以添加盛装文本内容的p标签，标题可以用list-group-item-heading类修饰，文本内容可以用list-group-item-text修饰
(十八) 面板：面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。每个面板都可以包含面板标题、面板主体和面板脚注
1、 面板标题，在div中设置panel-heading类，如果面板标题中包含h1-h6标签，那么也可以给这些标签添加panel-title类
2、 面板脚注：在容器中添加panel-footer类
3、 面板主体：给容器设置panel-body类
4、 使用时可以创建带语境色彩的面板，即给面板容器添加 panel-primary、panel-success、panel-info、panel-warning、panel-danger类，来设置带语境色彩的面板
5、 带表格的面板：在panel-body下面写一个表格
6、 带列表组的面板：在panel-body下面写一个列表组
(十九) Well组件：Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。可以通过设置well-lg和well-sm类调节尺寸
六、 JavaScript插件
(一) 过渡效果：对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
(二) 模态框：模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集
1、 模态框的构成：模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 modal-dialog(窗口声明层)、modal-content(内容层)。在内容层里面，还有三层，分别为modal-header(头部)、modal-body(主体)、modal-footer(注脚)
2、 注意：
1) 在使用模态框时需要增加一个 id
2) 需要结合JS和jquery使用
3) 可以给modal类所在div加fade类，模态框会淡入
3、 动态模态框示例
4、 属性说明
1) data-toggle=“modal”：表示触发类型为模态框，如果是data-toggle=“dropdown”则表示触发类型为下拉菜单
2) data-target=“#myModal”：为了和JS结合，表示触发的节点
3) data-dismiss=“modal”：使按钮具有关闭功能
4) modal-title类：使模态框标题具有指定样式
5) close类：具有关闭模态框的功能
6) tabindex=-1：解决按ESC键无法关闭模态框的问题
5、 静态模态框：如果不需要结合按钮，可以采用如下方法
6、 模态框尺寸：模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现，尺寸为：modal-lg、modal-sm
7、 模态框的主体中可以是表单，如果在点击按钮时要向表单中传递参数，那么可以给按钮添加data-whatever属性，属性值为要传递的参数，如data-whatever=@张三，示例如下
8、 模态框常用方法：modal方法
1) 模态框.modal(“show”)：显示模态框
2) 模态框.modal(“hide”)：隐藏模态框
9、 模态框常用事件：show.bs.modal，show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
(三) 滚动监听：即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
1、 两大部分：导航、主体内容
2、 常用属性：
1) data-offset 默认值为 10，固定弄内容距滚动容器 10 像素以内， 就高亮显示所对应的菜单。推荐使用70
2) data-spy 设置 scroll，将设置滚动容器监听
3) data-target 设置#nav，绑定指定监听的菜单
4) 示例：
(四) 标签页
1、 使用步骤：
1) 创建导航，在导航里面的每个a标签中添加data-toggle=“tab”属性或者data-toggle=”pill”
2) 将所有的描述内容放到一个div中，给它设置tab-content类
3) 将每个导航对应的内容放到一个div中，给这个div设置tab-pane
4) 如果要设置动画效果，可以添加fade类
5) 默认情况下内容是不显示的，可以给它加active类
6) 可以通过如下方法，调节默认显示的项目
(五) 工具提示
1、 使用步骤
1) 在文档中插入一个标签，给该标签添加data-toggle=”tooltip”属性，并为之添加data-original-title属性，该属性的值为要显示的提示文字，也可以设置data-placement属性，该属性的作用是调节添加框出现的位置，属性值为left、right、top、bottom
2) 设置好上面内容后，需要添加js代码
3) 注意：
a) 如果既有data-original-title也有title，那么优先显示title的值
b) 显示内容时，默认是有动画效果的，如果不需要动画可以设置data-animation=“false”
4) 示例
(六) 弹出框：弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需**弹出框，用户只需把鼠标悬停在元素上即可。可以使用a标签或者button作为触发元素
1、 常用属性
1) data-toggle=“popover”
2) title：设置标题
3) data-content：设置内容
4) data-animation：设置动画
5) data-placement：设置位置，默认值 top，还有 bottom、left、right 和 auto。 如果auto会自行调整合适的位置，如果是auto left 则会尽量在左边显示，但左边不行就靠右边。
6) 如果使用a标签作为触发元素，那么需要给它添加role=”button”
7) data-trigger=”focus”：设置点击旁边让弹出框消失效果
2、 JavaScript 初始化 $(触发元素).popover();
(七) 警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能
1、 使用方式：
1) 创建一个div，设置类为alert，也可以加修饰类，如alert-info
2) 在里面可以包含按钮等元素，可以给按钮设置close类和data-dismiss=”alert”属性，进而关闭警告框
(八) 按钮：
1、 加载状态：如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
2、 单个切换：如需**单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可
3、 复选框：可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换
4、 更改按钮中的内容
5、 常用方法
1) button(‘reset’)：重置按钮状态，文本内容恢复为最初的内容
2) button('loading')：当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
3) button(string)：该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
(九) Collapse：折叠（Collapse）插件可以很容易地让页面区域折叠起来
1、 使用步骤：
1) 在文档中创建一个a标签，添加属性data-toggle=”collapse”
2) 在a的下面插入一个div，设置collapse类，并设置id，让a标签的href的值为div的id
2、 手风琴：
(十) Carousel：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
(十一) Affix：附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
七、 编译CSS和JavaScript文件（如果对CSS样式或JS做了修改，需要重新编译）——使用Grunt作为编译系统
(一) 第一步：下载并安装node.js，因为要使用里面的npm，npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。
(二) 第二步：使用npm install -g grunt-cli命令安装grunt-cli
(三) 第三步：通过DOS命令进入bootstrap的安装环境（源码文件夹），执行npm install命令
(四) 第四步：当安装完毕后，可以使用grunt dist里面编译css和JavaScript文件（会重新生成dist目录）
八、 LESS的使用
(一) 第一步：创建less文件
(二) 第二步：使用less文件
1、 引入less文件：<link rel="stylesheet/less" type="text/css" href="styles.less">
2、 引入less.js或者less.min.js文件：<script src="less.js" type="text/javascript"></script>
3、 注意：
1) 先引入less，后引入less.js
2) 在打开时需要从服务器打开，否则报错
九、 LESS文件的修改（修改下载下来的less文件），修改后需要使用修改后的文件，即用修改后的文件将原有文件覆盖
十、 Bootstrap的定制：在Bootstrap官网上做相应选择和修改，然后点击下面的下载，下载下来的就是自己定制的内容，不是默认的全部
十一、 JavaScript插件的引用
(一) 可以引用单个插件
(二) 可以引用全部插件
(三) 禁用JavaScript插件功能：
1、 禁用所有：$(document).off(‘.data-api’)
2、 禁用某个插件：$(document).off(‘被禁用的类.data-api’);如$(document).off(‘.dropdown.app-api’);表示禁用下拉菜单
十二、 JavaScript插件
(一) 过渡效果：对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
(二) 模态框：模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集
1、 模态框的构成：模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 modal-dialog(窗口声明层)、modal-content(内容层)。在内容层里面，还有三层，分别为modal-header(头部)、modal-body(主体)、modal-footer(注脚)
2、 注意：
1) 在使用模态框时需要增加一个 id
2) 需要结合JS和jquery使用
3) 可以给modal类所在div加fade类，模态框会淡入
3、 动态模态框示例
4、 属性说明
1) data-toggle=“modal”：表示触发类型为模态框，如果是data-toggle=“dropdown”则表示触发类型为下拉菜单
2) data-target=“#myModal”：为了和JS结合，表示触发的节点
3) data-dismiss=“modal”：使按钮具有关闭功能
4) modal-title类：使模态框标题具有指定样式
5) close类：具有关闭模态框的功能
6) tabindex=-1：解决按ESC键无法关闭模态框的问题
5、 静态模态框：如果不需要结合按钮，可以采用如下方法
6、 模态框尺寸：模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现，尺寸为：modal-lg、modal-sm
7、 模态框常用方法：modal方法
1) 模态框.modal(“show”)：显示模态框
2) 模态框.modal(“hide”)：隐藏模态框
(三) 滚动监听：即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
1、 两大部分：导航、主体内容
2、 常用属性：
1) data-offset 默认值为 10，固定弄内容距滚动容器 10 像素以内， 就高亮显示所对应的菜单。推荐使用70
2) data-spy 设置 scroll，将设置滚动容器监听
3) data-target 设置#nav，绑定指定监听的菜单
4) 示例：
(四) 标签页
(五) 工具提示
1、 使用步骤
1) 在文档中插入一个标签，给该标签添加data-toggle=”tooltip”属性，并为之添加data-original-title属性，该属性的值为要显示的提示文字，也可以设置data-placement属性，该属性的作用是调节添加框出现的位置，属性值为left、right、top、bottom
2) 设置好上面内容后，需要添加js代码
3) 注意：如果既有data-original-title也有title，那么优先显示title的值
(六) 弹出框：弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需**弹出框，用户只需把鼠标悬停在元素上即可。可以使用a标签或者button作为触发元素
1、 点击按钮时弹出隐藏提示框
2、 点击按钮显示提示框，点击旁白隐藏提示框，只需要加data-trigger=”focus”属性
3、 默认显示提示框
(七) 警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能
1、 使用方式：
1) 创建一个div，设置类为alert，也可以加修饰类，如alert-info
2) 在里面可以包含按钮等元素，可以给按钮设置close类和data-dismiss=”alert”属性，进而关闭警告框
(八) 按钮：
1、 加载状态：如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
(九) Collapse：折叠（Collapse）插件可以很容易地让页面区域折叠起来
1、 使用步骤：
1) 在文档中创建一个a标签，添加属性data-toggle=”collapse”
2) 在a的下面插入一个div，设置collapse类，并设置id，让a标签的href的值为div的id
(十) Carousel：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。