快速学习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>

如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

还是这4个盒子，如果在中等屏幕下放3个怎么做呢？

  <div class="container">
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
   </div>

还是这4个盒子，如果在小屏幕下放2个怎么做呢？

 <div class="container">
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
   </div>

还是这4个盒子，如果在超小屏幕下放1个怎么做呢？

  <div class="container">
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</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>

效果：