首页 / 技术 / 正文

bootstrap中栅格系统概念解析

2014年12月15日 1 条评论 ... 技术

在编写网页的时候,总是需要对网页进行分块布局,如果编写网页的时候使用的是bootstrap的CSS样式表,那么肯定会用到bootstrap的栅格系统,bootstrap的栅格系统乍一看来比较难以理解,但是功能却是非常强劲的。用起来非常方便。

bootstrap中的栅格系统会根据浏览器的窗口大小来改变div的比例,使网页总能根据网页的变化而自适应,所以使用bootstrap栅格系统不需要对任何额外的编写和测试,就可以轻松编写出响应式网页。

 

要开始编写,首先需要满足这几点:

1.加入bootstrap的CSS样式表。

2.在网页head部分加上获取浏览器尺寸的语句

<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap的的栅格系统在bootstrap的官方网站上的说明不是很通俗,其实栅格系统其实就是没有视觉样式的div,实际在网页上布设栅格系统的时候,是不会产生如官网案例上的类似表格一样的背景和边框。

如果要使几个div放置在同一层,需要在这些div之外增加一个class为row的div。

栅格系统将同一列(row)的网页分为12个单位,用户可以按照比例将网页设计成不同比例,表现的方式是在同一列的div中添加这样的class:“col-md-*”,星号部分填写数字,但是同一行的数字相加要等于12,比如说,我打算将同一行的两个div平均划分,则需要这样编写:

  1. <div class="row">
  2. <div class="col-md-6">.col-md-6</div>
  3. <div class="col-md-6">.col-md-6</div>
  4. </div>

如果你这样做了,你可以将这两块div涂色,然后调整自己的浏览器尺寸查看一下效果,你会发现,在浏览器缩小到一定程度的时候,这两块div会自动掉下去,变成竖列排列。这就是自适应的效果,但是如果你不希望出现这样的效果的话,也是可以调整的。

bootstrap的栅格系统提供了四种方案,分别为:超小屏幕 手机 (<768px),小屏幕 平板 (≥768px),中等屏幕 桌面显示器 (≥992px),大屏幕 大桌面显示器 (≥1200px)准备了方案。

具体使用方式是,可以设置.col-xs-,.col-sm-,.col-md-,.col-lg- 前缀。

效果可以更改在达到四种分辨率的时候,div的表现形式。

比如说,我想让网页在缩小到最小(<768px)的时候,总是保持两栏并列。可以这样写:

  1. <div class="row">
  2. <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">.col-md-6</div>
  3. <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">.col-md-6</div>
  4. </div>
  5. <div class="row">
  6. <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">.col-md-6</div>
  7. <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">.col-md-6</div>
  8. </div>

具体的表格如下:

bootstrap栅格系统

因此,如果要修改一个div在各种屏幕下的表现形式的话,只需要设置全所有的样式即可。

 

如果需要对div有其他的要求的话,比如说偏移浮动的效果,同样可以修改class来改变样式。这一部分比较好理解,所有这里也不多言了。详情还是查看官方文档。

1 条评论

Loading...
  1. 爱奇趣分享网

    不错 我也在用这个!

    2014-12-20 [回复]

发布评论