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. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个

<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 使