Bootstrap---Grid system 网格系统

江子石
2023-12-01

Bootstrap 使用12网格系统,即将整体页面(有效页面)分为12等分。使用的时候通过添加span*类来区分。如:

       <div class=”container”>

              <div  class=”row”>

                     <div class=”span6”></div>

                     <div class=”span6”></div>

              </div>

</div>

class=”container”表示一个宽度为940px的容器。class=”row”表示网格的一行(其有一个margin-left:-20px属性,即一行宽度实际上是960px)。class=”span6”表示每个div占据网格一行的一半(即两个div在同一行上,而不是块元素原来的表现)。

       其中span*类使用方法是:一行最大是span12,最小是span1,即有12个等级。一行上,span类后面的数字加起来等于12即可。(注意,类似于给div加边框等操作会使总宽度增加,可能使后面的元素挤到下面)。另外,span类的宽度并不是严格等比例的,分别为(60,140,220,300,380,460,540,620,700,780,860,940)px。

 类似资料: