Bootstrap 知识点

来源：互联网发布：php服务端开发编辑：程序博客网时间：2024/06/05 04:23

----Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap特点

1. 它为开发人员创建接口提供了一个简洁统一的解决方案。

2.它包含了功能强大的内置组件，易于定制。

3.它还提供了基于 Web 的定制。

4. 它是开源的。

---Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。

CSS:Bootsrap自带一下特性：全局的css设置，定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。

组件：Bootsrap包含了十几歌可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

js插件：包含了是几个自定义的JQuery插件，可以直接包含所有的插件，也可以逐个包含这些插件

定制：可以定制组件、LESS变量和jQuery插件来得到自己的版本。

Bootsrap CSS概览：

Bootsrap使用了一下HTML5元素和CSS属性。为了让这些正常工作，需要使用HTML5文档类型。因此在使用Bootsrap项目的开头包含下面的代码段

<!DOCTYPE html>

<html>

...

</html>

如果在Bootsrap创建的网页开头不实用HTML5的文档类型(Doctype)，可能会面临浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，而导致不能通过W3C标准的验证。

####移动设备优先

移动设备优先Bootsrap3的最显著的变化。Bootsrap为了确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta标签：

<metaname=”viewport”content=”width=device-width,initial-scale=1.0”>

width属性控制设备的宽度，假设网站将被带有不同屏幕分辨率的设备浏览，将它设置为device-width可以确保它能正确呈现在不同设备上。Initial-scale=1.0确保网页加载时，以1：1的比例呈现，不会有缩放。移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用缩放(zooming)功能.

####响应式图像

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {

display: inline-block;

height: auto;

max-width: 100%;

}

####全局显示、排版和链接：

----基本的全局显示

使用 body {margin: 0;} 来移除 body 的边距。

Body 设置：

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.428571429;

color: #333333;

background-color: #ffffff;

}

-----排版

使用@font-family-base、@font-size-base 和@line-height-base属性作为排版样式

------链接样式

通过属性@link-color 设置全局链接的颜色

------容器(Container)

...

</div>

网格(Grid)系统

Bootsrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

#####网格系统的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局，网格系统是如何工作的：

1.行必须放置在.container class内，以便获得适当的对其（alignmen）和内边距(padding)。

2.使用行来创建列的水平组

3.内容应该放置在列内，且唯有列可以是行的直接元素

4.预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局

5.列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外编剧(margin)取负，表示第一列和最后一列的行偏移。

6.网格系统是通过制定想要横跨的十二歌可用的列来创建的

7.####基本的网格结构

</div>

</div>

<div class="container">....

####偏移列

偏移是一个用于更专业的布局的有用功能，他们可用来给列腾出更多的空间，为了在大屏幕显示器使用偏移，使用.col-md-offset-*类，这些类会把一个列的做外编剧增加*列，其中*的范围是从1到11.

####嵌套列

在内容中嵌套默认的网格，要添加一个新的.row，并在一个已有的.col-md-*列内添加一组 .col-md-*列。被嵌套的行应包含一组列，这组列不能超过12.

Bootsrap排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 **HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。

####缩写

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，要添加 .initialism 到 <abbr>。

####地址

使用 <address> 标签，可以在网页上显示联系信息。由于 <address> 默认为 display:block;，需要使用标签来为封闭的地址文本添加换行。

引用（Blockquote）

可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括，添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。

####列表

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果不想显示这些着重号，可以使用 class .list-unstyled 来移除样式。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。

Bootstrap代码

Bootstrap 允许以两种方式显示代码：

1.第一种是<code>标签。如果想要内联显示代码，那么应该使用<code>标签。

2.第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用<pre>标签

Bootstrap表单

bootsrap可以通过简单的html标签和扩展的类创建出不同样式的表单

####表单布局

bootsrap提供了下列类型的表单布局：垂直表单(默认),内lian表单，水平表单

##垂直或基本表单

基本的表单结构是Bootsrap自带的，个别的表单空间自动接受一些全局样式，创建基本表单的步骤：

1.向父<form>元素添加role=”form”;

2.把标签和空间放在一个带有class.form-group的<div>中

3.向所有的文本元素<input><textarea><select>添加class,form-control.

内联表单：

如果需要创建一个表单，它的所有元素是内联的，向zuo对齐的，标签是并排的要向<form>标签添加class.form=inline。

水平表单：

水平表单与其他表单不进标记数量上不同，而且表单的呈现形式也不同，如需创建一个水平布局的表单步骤如下：

1.向父<form>元素添加class.form-horizontal

2.把标签和空间放在一个带有class form-group的<div>中。

3.向标签添加class control-label

####支持的表单控件：

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

####输入框（input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

####文本框（Textarea）

当需要进行多行输入时，可以使用文本框textarea。必要时可以改变rows属性（较少的行=较小的盒子，较多的行=较大的盒子）

####复选框(Checkbox)单选框(Radio)

复选框和单选按钮用于让用户从一些列预设置的选项中进行选择

1.当创建表单的时候，如果向从列表中选择若干个选项时，请使用checkbox，如果只能选择一个选项，使用radio。

2.对一系列复选框和单选框使用.checkbox-inline 或radio-inline class，控制它们显示在同一行上。

####选择框（Select）

如果想从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框；

1.使用<select>展示列表选项，通常是那些用户很熟悉的选择列表

2.使用multiple=”multiple”允许用户选择多个选项

####表单控件状态

除了：focus状态，Bootsrap还为禁用的输入框定义了样式，提供了表单验证的class。

####表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

##表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。

Bootstrap 按钮

Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，

####按钮大小

让按钮看起来比较大。Btn-lg

让按钮看起来比较小。Btn-sm

让按钮看起来特别小。Btn-xs

创建块级的按钮，会横跨父元素的全部宽度。Btn-block

Bootstrap 图片

提供了了三个可对图片应用简单样式的class；

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

####<img>类

.img-rounded 为图片添加圆角 (IE8 不支持)

.img-circle 将图片变为圆形（IE8）

.img-thumbnail 缩略图功能

.img-responsive 图片响应式

####响应式图片

通过在 <img> 标签添加.img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%;和 height: auto;样式应用在图片上：

####关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

####插入符

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

####快速浮动分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。

####内容居中使用 class center-block 来居中元素。

####清除浮动如需清除元素的浮动，请使用 .clearfix class。

####显示和隐藏内容通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。

####屏幕阅读器通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。

Bootstrap 字体图标(Glyphicons)

####字体图标

字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings需要商业许可，但是可以通过基于项目的 Bootstrap来免费使用这些图标。

####获取字体图标

我们已经在环境安装章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内bootstrap.css和 bootstrap-min.css文件上。

####CSS 规则解释

所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

####定制字体图标

<span class="glyphicon glyphicon-user"></span> User

</button>

定制字体尺寸

通过增加或减少图标的字体尺寸，可以让图标看起来更大或更小。

<span class="glyphicon glyphicon-user"></span> User

</button>

定制字体颜色

<span class="glyphicon glyphicon-user"></span> User

</button>

Bootstrap 下拉菜单（Dropdowns）

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。

####对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

####标题

可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。

Bootstrap 按钮组

通过 Bootstrap 按钮（Button）插件添加可选的 JavaScript 单选框和复选框样式行为。

####基本的按钮组

</div>

####按钮工具栏

</div>

</div>

####嵌套

可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。向让下拉菜单与一系列按钮组合使用时，就会用到这个。

Bootstrap 按钮下拉菜单

如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

####按钮下拉菜单的大小

可以使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或 .btn-xs。

####按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

Bootstrap 输入框组

输入框组扩展自表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。把该 <span> 放置在 <input> 元素的前面或者后面。

####输入框组的大小

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

####复选框和单选插件

可以把复选框和单选插件作为输入框组的前缀或者后缀元素，

####按钮插件

可以把按钮作为输入框组的前缀或者后缀元素，这个时候就不是添加.input-group-addon class，需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。

####带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单

####分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能

Bootstrap 导航元素

Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单：

1.以一个带有 class .nav 的无序列表开始。

2.添加 class .nav-tabs。

胶囊式的导航菜单

基本的胶囊式导航菜单如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

####垂直的胶囊式导航菜单

可以在使用class.nav、.nav-pills的同时使用 class .nav-stacked，让胶囊垂直堆叠。

####两端对齐的导航

可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

####禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态

####下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

####带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。

添加 class .nav-tabs。

添加带有 .dropdown-menu class 的无序列表。

Bootstrap 导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

####默认的导航栏

创建一个默认的导航栏的步骤如下：

向 <nav> 标签添加 class .navbar、.navbar-default。

向上面的元素添加 role="navigation"，有助于增加可访问性。

向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

Bootstrap 面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。

Bootstrap 分页

***.pagination 添加该 class 来在页面上显示分页。

.......

</ul>

****.disabled, .active 可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。

<li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>

.......

</ul>

***.pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。

Bootstrap 标签

Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签

Bootstrap 徽章（Badges）

Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

激活导航状态

可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接，

Bootstrap 超大屏幕（Jumbotron）

超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

创建一个带有 class .jumbotron. 的容器 <div>。

除了更大的 <h1>，字体粗细 font-weight 被减为 200。

Bootstrap 页面标题（Page Header）

页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），把标题放置在带有 class .page-header 的 <div> 中

Bootstrap 缩略图

Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：

在图像周围添加带有 class .thumbnail 的 <a> 标签。

这会添加四个像素的内边距（padding）和一个灰色的边框。

当鼠标悬停在图像上时，会动画显示出图像的轮廓。

添加自定义的内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

把带有 class .thumbnail 的 <a> 标签改为 <div>。

在该 <div> 内，可以添加任何想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。

如果想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

Bootstrap 警告（Alerts）

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件。

可以通过创建一个 <div>，并向其添加一个 .alert class 和四个（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

同时向上面的 <div> class 添加可选的 .alert-dismissable。

添加一个关闭按钮。

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

Bootstrap 进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

默认的进度条

创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

交替的进度条

创建不同样式的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

条纹的进度条

创建一个条纹的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

动画的进度条

创建一个动画的进度条的步骤如下：

添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

###堆叠的进度条

可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠

Bootstrap 多媒体对象（Media Object）

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

向元素 <ul> 添加 class .list-group。

向 <li> 添加 class .list-group-item。

向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。

向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。

向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。

Bootstrap 面板（Panels）

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，

面板标题

我们可以通过以下两种方式来添加面板标题：

使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.

使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

面板脚注

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

带列表组的面板

我们可以在任何面板中包含列表组，通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。

尺寸大小

可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。

Bootstrap 插件概览

Bootstrap 过渡效果（Transition）插件

过渡效果（Transition）插件提供了简单的过渡效果。

过渡效果（Transition）插件的使用案例：

具有幻灯片或淡入效果的模态对话框。具体实例参见 Bootstrap 模态框（Modal）插件。

具有淡出效果的标签页。具体实例参见 Bootstrap 标签页（Tab）插件。

具有淡出效果的警告框。具体实例参见 Bootstrap 警告框（Alert）插件。

具有幻灯片效果的轮播板。具体实例参见 Bootstrap 轮播（Carousel）插件。

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

用法

可以切换模态框（Modal）插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。

通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

在模态框中需要注意两点：

第一是 .modal，用来把 <div> 的内容识别为模态框。

第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

aria-labelledby="myModalLabel"，该属性引用模态框的标题。

属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。

class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。

class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。

data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

Bootstrap 下拉菜单（Dropdown）插件可以切换下拉菜单（Dropdown）插件的隐藏内容：

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

如果需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：

Bootstrap 滚动监听（Scrollspy）

插件滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着的滚动，基于滚动条的位置向导航栏添加 .active class。

如果想要单独引用该插件的功能，那么需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

通过 data 属性：向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，必须确保页面主体中有匹配所要监听链接的 ID 的元素存在。

Bootstrap 标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，可以轻松地创建一个标签页界面。通过这个插件可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

用法

可以通过以下两种方式启用标签页：

通过 data 属性：需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

...

</ul>

通过 JavaScript：可以使用 Javscript 来启用标签页，如下所示：

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')

})

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

</div>

Bootstrap 提示工具（Tooltip）插件

当想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

如果想要单独引用该插件的功能，那么需要引用 tooltip.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。可以有以下两种方式添加提示工具（tooltip）：

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$('#identifier').tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () {

$("[data-toggle='tooltip']").tooltip(); });

Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

如果想要单独引用该插件的功能，那么需要引用 popover.js，它依赖于工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。可以有以下两种方式添加弹出框（popover）：

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

请悬停在我的上面

</a>

通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

Bootstrap 警告框（Alert）插件

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，可以向所有的警告框消息添加可取消（dismiss）功能。

用法

可以有以下两种方式启用警告框的可取消（dismissal）功能：

通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

</a>

通过 JavaScript：通过 JavaScript 添加可取消功能：

$(".alert").alert()

Bootstrap 按钮（Button）插件

按钮（Button）在 Bootstrap 按钮一章中介绍过。通过按钮（Button）插件，可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

如果想要单独引用该插件的功能，那么需要引用 button.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，

Bootstrap 折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果想要单独引用该插件的功能，那么需要引用 collapse.js。同时，也需要在的 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。

如果想要单独引用该插件的功能，那么需要引用 carousel.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

Bootstrap 附加导航（Affix）插件

附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。

如果想要单独引用该插件的功能，那么需要引用 affix.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

0 0

Bootstrap 知识点

####清除浮动 如需清除元素的浮动，请使用 .clearfix class。

####清除浮动如需清除元素的浮动，请使用 .clearfix class。