入门——Bootstrap栅格系统

2018-06-24 02:26:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下来。

Bootstrap栅格系统

1.什么是栅格系统:

    在Bootstrap中,它提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局, 你的内容就可以放入这些创建好的布局中(这些都是官方话)。下面就简单的介绍一下 Bootstrap 栅格系统的步骤:

(1) "行(row)"必须包含在 .container(固定宽度)或 .container-fluid(100% 窗口宽度)中(附图):

(2) 列(column)必须包含在行(row)中

(3) 你所书写的内容应当放置于"列(column)"内

(4) 如果一"行(row)"中包含了的"列(column)"大于 12,多余的"列(column)"所在的元素将被作为一个整体另起一行排列

代码书写及结果展示(附图):

Chrome上的结果:

正如上图所示,就是栅格系统的书写格式,当containr换为container-fluid时,它的布局就是这样的:

这就是container和container-fluid的区别,前者是在屏幕两边具有留白,也就是具有固定宽度(当然这个宽度是跟随自己屏幕大小默认设定的,也可以自己调);后者就是自己屏幕视口有多大,它的宽度有多大。

下面就介绍一下上图中的col-md-是什么---

2.栅格参数

先附张图:

通过上图就能明白这些md,xs是什么了,也就是我写的col-md-3,col-md-4,col-md-5三个div的内容在分辨率大于992px的时候屏幕中分别占3/12,4/12,5/12的大小,如果分辨率小于992px的时候,所有div就会自动重新另起一行(如下图):

如果想让所书写的内容在其他屏幕中不另起一行,只需要在接着写其他参数就好了(例:class="col-md-3,col-sm-6"就是在中等屏幕中占3列,在小屏幕中占6列)

下面介绍一些栅格系统中的其他属性

 

3.列的偏移

使用 .col-md-offset-* (md也可以为其他,*为要偏移的数字)类可以将列向右侧偏移

注意:offset只能向右偏移且对后面的列会造成影响(附图)

代码:

结果展示:

如图所示:col-md-5就被挤到下面另起一行了

4.列的隐藏

hidden-xs/sm/md/lg: 可以对所选中的列进行隐藏(附图)

代码:

结果:

如图所示:当屏幕缩小到xs时,col-md-12便被隐藏了

5.列的排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序
注意:md同样可以为其他,*代表要偏移的数字
push为向后偏移 ; pull为向前偏移

push和pull偏移时不会对其他列造成影响(附图)

如图所示,col-md-3向后偏移的2列,col-md-4向前偏移了2列,且它们都没有互相造成影响

以上就是我整理出的基本的栅格系统的概念,当然还有不足之处,希望路过的大神可以指点一二。。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:推荐大家使用的CSS书写规范、顺序

下一篇:左侧固定,右侧自适应的布局