Bootstrap的12栅格

扫描二维码

对使用bootstap的12栅格是什么?对col-xs-6col-sm-6col-md-6col-lg-6所代表的含义又是什么?

首先,bootstrap是移动优先的,记住这个概念,对理解那几个列定义有用处。

####这几个class的解释对应:

  • xs:对应手机
  • sm:平板类的小屏幕设备
  • md:桌面
  • lg:超大大屏幕

这几个应用的时候是根据屏幕分辨率的大小的。

比如:

<div class="row">
  <div class="col-xs-6">col-xs-6</div>
  <div class="col-xs-6">col-xs-6</div>
</div>

是指在从手机小屏到大屏的时候都是按6/12显示。

再比如:

<div class="row">
  <div class="col-sm-6">col-sm-6</div>
  <div class="col-sm-6">col-sm-6</div>
</div>

是指从平板类屏幕大小到超大屏幕是按6/12显示,而手机屏幕是按12显示。这也就是说从当前的设定自动与更大屏上显示一致。

具体显示的示例可以参考:示例

####那所谓的几个屏幕的规格具体是多少呢:

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

####最外层容器的.container和.container_fluid的解释.

布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。

注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

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

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

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

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

一些官网解释说明:

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts. Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

官网的示例

中文官网