Bootstrap 部分功能小记

栅格系统

栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 内置好了一套布局系统。

BootStrap3默认将网页分成12等份

比如，超大屏幕下想要一个通栏的大盒子

<div class="container">
    <div class="col-lg-12">我自己独占一行</div>
  </div>
  

又比如，超大屏幕下，想要一行左右来分

<div class="container">
    <div class="col-lg-6">我占左边6个</div>
    <div class="col-lg-6">我站右边6个</div>
</div

超大屏下，如果一行放4个:

<div class="container">
    <div class="col-lg-3">我占左边3个</div>
    <div class="col-lg-3">我站右边3个</div>
    <div class="col-lg-3">我站右边3个</div>
    <div class="col-lg-3">我站右边3个</div>
  </div>
  

row 类

row 可以去掉container默认的内边距

列偏移

偏移 通过 col-lg-offset-*

让盒子往右侧走，左边有几份

比如：

    .first div {
      height: 100px;
      background-color: pink;
    }

    .second div {
      background-color: purple;
      height: 100px;
    }

    .third div {
      height: 100px;
      background-color: skyblue;
    }

 <div class="container">
    <div class="row first">
      <div class="col-lg-4">左侧</div>
      <div class="col-lg-4 col-lg-offset-4">右侧</div>
    </div>
    <div class="row second">
      <div class="col-lg-3 col-lg-offset-3">1侧</div>
      <div class="col-lg-3 col-lg-offset-3">2侧</div>
    </div>
    <div class="row third">
      <div class="col-lg-6 col-lg-offset-3"></div>
    </div>
  </div>

列嵌套

一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他又分为了12份。

.container .row div {
      height: 100px;
      background-color: pink;
    }

<div class="container">
    <div class="row">
      <div class="col-lg-4">
        <p class="col-lg-6">登录</p>
        <p class="col-lg-6">注册</p>
      </div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-4">3</div>
    </div>
  </div>