布局(Layout)


  • 布局(Layout)

  • 容器(Containers)

  • <div class="container">          <div class="container-fluid ">  //可以撑满整个屏幕(可惜右边有点点没占满)
      <!-- Content here -->            <!-- Content here -->
    </div>                           </div>
  • 网格系统(Grid system)

<div class="container">  
  <div class="row">    //定义行
    <div class="col">     //列:这里每行3列,且等分
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="co">
      One of three columns
    </div>
  </div>
</div>
//如何是class="col-9"  说明这列在改行中占了9/12(十二分之九) 除非接着的列占的格数小于等于3(i<=3)可以并排排列,否则会自动排在下一行
//.col-      Extra small 额外的小
//.col-sm    Small  小
//.col-md    Medium 中

//.col-lg    Large  大
//.col-xl    Extra large 额外的大
这些后面可以在接数字代表所占的格数;记住每行数字所加之和要不能超过12,否则会在超过的那列起放到下行。

猜你喜欢

转载自www.cnblogs.com/aichiboluo/p/layout.html