Bootstrap笔记

移动设备优先:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

!!!!Bootstrap 网格系统1、行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。2、使用行来创建列的水平组。3、内容应该放置在列内，且唯有列可以是行的直接子元素。4、预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。5、列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。6、网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。/* 超小设备（手机，小于 768px） *//* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { … }/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { … }/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { … }偏移列：，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。嵌套列：为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

<div class="container">    <div class="row">        <div class="col-md-3">            <h4>第一列</h4>        </div>        <div class="col-md-9">            <h4>第二列 - 分为四个盒子</h4>            <div class="row">                <div class="col-md-6"></div>                <div class="col-md-6"></div>            </div>            <div class="row">                <div class="col-md-6"></div>                <div class="col-md-6"></div>            </div>        </div>    </div></div>

列排序：您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。Bootstrap 网格系统实例：堆叠的水平

<div class="container">    <div class="row">        <div class="col-md-6">            <p> </p>            <p> </p>        </div>        <div class="col-md-6">            <p> </p>            <p> </p>        </div>    </div></div>

Bootstrap 网格系统实例：中型和大型设备

<div class="container">   <div class="row">      <div class="col-md-6 col-lg-4">         <p> </p>          <p> </p>      </div>       <div class="col-md-6 col-lg-8">         <p> </p>         <p> </p>   </div></div>

Bootstrap 网格系统实例：手机、平板电脑、台式电脑

<div class="container">   <div class="row">      <div class="col-sm-3 col-md-6 col-lg-8">         <p> </p>         <p> </p>      </div>      <div class="col-sm-9 col-md-6 col-lg-4">         <p> </p>         <p> </p>      </div>  </div></div>

引导主体副本：为了给段落添加强调文本，则可以添加 class=”lead”，这将得到更大更粗、行高更高的文本
强调：HTML 的默认强调标签 （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）
缩写：Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 。
地址：由于

默认为 display:block;，您需要使用标签来为封闭的地址文本添加换行。
引用：您可以在任意的HTML文本旁使用默认的

。其他选项包括，添加一个 标签来标识引用的来源，使用 .pull-right向右对齐引用。

更多类排版：
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中
.pre-scrollable 使

 元素可滚动 scrollable

unicode 变体： <（<） 和 >（>）
更多：
<var>变量赋值: x = ab + y
<kbd>按键提示： CTRL + P
<pre>多行代码
<pre class="pre-scrollable">多行代码带有滚动条
<samp>电脑程序输出: Sample output
<code>同一行代码片段: span, div

表格：
.table 为任意

添加基本样式 (只有横向分隔线)
.table-striped 在 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

下表的类可用于表格的行或者单元格：
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

响应式表格
通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

表单：
垂直或基本表单（步骤）：
向父 <form> 元素添加 role=”form”。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =”form-control” 。

内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单（步骤）：
向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

支持的表单控件：input、textarea、checkbox、radio 和 select

静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

表单控件状态
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
禁用的输入框 input 如果您想要禁用一个输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。
验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。需要对父元素简单地添加适当的class.has-warning .has-error 或.has-success）即可使用验证状态。

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

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

button 按钮：
以下样式可用于<a>, <button>, 或 <input> 元素上：
.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 禁用按钮

图片：
.img-rounded 为图片添加圆角
.img-circle 将图片变为圆形
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

辅助类：
.text-muted “text-muted” 类的文本样式
.text-primary “text-primary” 类的文本样式
.text-success “text-success” 类的文本样式
.text-info “text-info” 类的文本样式
.text-warning “text-warning” 类的文本样式
.text-danger “text-danger” 类的文本样式
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能

字体图标：http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

下拉菜单：
使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。
使用 class dropdown-header 向下拉菜单的标签区域添加标题。
.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线

按钮组：
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
.btn-group-lg, .btn-group-sm, .btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
嵌套：您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。

按钮下拉菜单：
向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。
按钮下拉菜单的大小：使用带有各种大小按钮的下拉菜单：.btn-large、.btn-sm 或 .btn-xs。
按钮上拉菜单：菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

输入框组：
向 .form-control 添加前缀或后缀元素的步骤如下：
把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。

导航元素：
创建一个标签式的导航菜单：
以一个带有 class .nav 的无序列表开始。
添加 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 状态
下拉菜单：（步骤）
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
添加带有 .dropdown-menu class 的无序列表。
带有下拉菜单的胶囊：步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills

.nav nav-tabs 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页，在大于 768px 的屏幕上，同等宽度。在小屏幕上，导航链接呈现堆叠样式。
.disabled 禁用的标签页
标签添加下拉菜单
带下拉菜单的胶囊式标签页
.tab-content 与 .tab-pane 和 data-toggle=”tab” (“pill” ) 一同使用, 设置标签页的内容随标签的切换而更改
.tab-pane 与 .tab-content 和 data-toggle=”tab” (“pill”)一同使用, 设置标签页的内容随标签的切换而更改

导航栏：
默认的导航栏：（步骤）
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role=”navigation”，有助于增加可访问性。
向 <div> 添加 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可
响应式的导航栏：
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
导航栏中的表单：
导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form class
导航栏中的按钮：
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。
导航栏中的文本：
如果需要在导航中包含文本字符串，使用class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。
结合图标的导航链接：
想在导航栏导航组件内使用图标，请使用 class glyphicon glyphicon-* 来设置图标
组件对齐方式:
使用实用工具class .navbar-left或.navbar-right向左或向右对齐导航栏中的导航链接、表单、按钮或文本这些组件。
固定到顶部:
如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。
固定到底部:
如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。
静态的顶部:
如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该class不要求向 <body> 添加内边距。
反色的导航栏：
创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class即可。
面包屑导航：是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加

分页
.pagination 添加该 class 来在页面上显示分页。
.disabled, .active 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。
.pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。

翻页
.pager 添加该 class 来获得翻页链接。
.previous, .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。
.disabled 添加该 class 来获得一个颜色变淡的外观。

标签：使用 class .label 来显示标签
.label label-default 默认的灰色标签
.label label-primary “primary” 类型的蓝色标签
.label label-success “success” 类型的绿色标签
.label label-info “info” 类型的浅蓝色标签
.label label-warning “warning” 类型的黄色标签
.label label-danger “danger” 类型的红色标签

徽章：把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

超大屏幕：
创建一个带有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>，字体粗细 font-weight 被减为 200。
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class

页面标题：把标题放置在带有 class .page-header 的 <div> 中

Bootstrap 缩略图：（步骤）
在图像周围添加带有 class .thumbnail 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

添加自定义的内容，具体步骤如下：
把带有 class .thumbnail 的 <a> 标签改为 <div>。
在该<div>内可以添加任何想要添加的东西。由于这是<div>，我们可以使用默认的基于span的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

警告：
创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
可取消的警告步骤如下：
添加一个基本的警告框（同上）。
同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。
警告中的链接步骤如下：
添加一个基本的警告框（同上）。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

进度条：步骤如下：
添加一个带有 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% 的位置。
条纹的进度条步骤如下：
把上面改为 success、info、warning、danger。
创建一个动画的进度条步骤如下：
添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。
堆叠的进度条：可以堆叠多个进度条，把多个进度条放在相同的 .progress 中即可实现堆叠

多媒体对象：
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

列表组：
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
向列表组添加徽章：添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可
向列表组添加链接：通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。
向列表组添加自定义内容：我们可以向上面已添加链接的列表组添加任意的 HTML 内容。

面板：
创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
面板标题：
使用 .panel-heading class 可以很简单地向面板添加标题容器。
或：使用带有 .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 类来创建面板，并在面板中添加列表组。

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