bootstrap

时间久了所有的东西都会忘的干干净净：https://v3.bootcss.com/css/#code

布局容器:bootstrap的栅格系统外面必须要有容器包裹：

.container 类用于固定宽度并支持响应式布局的容器

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>


栅格系统：


行row与列（column）


行row必须包含在布局容器里面;


列必须包裹在行row里面：

<div class="container">

    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

</div>

列的类名包含：

                                     列的类名最大列宽              .container 最大宽度

超小屏幕（手机，小于 768px）        .col-xs-         自动                .container 最大宽度：自动

小屏幕（平板，≥ 768px）            .col-sm-         62px                .container 最大宽度：750px

中等屏幕（桌面显示器，≥ 992px）    .col-md-         81px                .container 最大宽度：970px

大屏幕（大桌面显示器，≥ 1200px）   .col-lg-         97px                .container 最大宽度：1170px

上面的例子是固定宽度的布局下面这个例子宽度不固定的流式布局：

<div class="container-fluid">

    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

</div>

我们不希望在手机这种屏幕上所有的列都堆叠在一起，那么我们可以组合上面的列的类名达到针对超小屏幕和中等屏幕的设备也可以组合其他屏幕

<div class="container">

  <div class="row">

      <div class="col-xs-12 col-md-8">xxxxx</div>


<div class="col-xs-6 col-md-4">xxxxxx</div>

  </div>


</div>

当屏幕：宽度≥992px时  是.col-md-这个类生效，其实在768-992px这个区间也是生效的 当屏幕的尺寸小于768px这个宽度时 col-xs-这个类就生效了


在没一组列的后面加上<div class="clearfix visible-xs-block"></div>已达到响应式列的重置效果  以因对在某个特定的情况下这个组中的某个列比其他列高的情况

列偏移：.col-md-offset-* .col-xs-offset-*   ...类可以将列向右侧偏移  将偏移的宽度放在margin上已达到偏移的目的

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">XXXX</div>
</div>

4+4+偏移的4：证号一行的宽度


列排序：


通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。


文本对齐类：

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>