---------------------------------------栅格系统:是bootstrap提供的响应式布局方式--------------------------------------------
栅格系统的核心:
就是把容器container划分12等分,也就是版心被划分12等份。
下面的介绍也是以bootstrap中全局css样式;详情可观看http://v3.bootcss.com/css/了解,在这不再赘述。
现在来总结一下应用步骤:
(1):首先应该创建一个容器
<div class="container">
<div class = "row">(行)
列
列
</div>
</div>
注:(container、row是bootstrap中原有的),row要包含在容器中,而容器class类有
container、container-fluid(流式版心)这两个类名是bootstrap提供的,
container是固定宽度,bootstrap已划分好,而container-fluid宽度为100%(浏览器的宽度)
(2):创建合适的栅格系统
<div class = "row">
<div class ="col-sm-6 col-md-6 col-lg-2">col-lg-2</div>
<div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
<div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
<div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
<div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
<div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
</div>
注:这里以屏幕大于1200时做解释
col-lg-2,col-lg-为固定格式,col-lg-2代表屏幕大于1200时,当前的内容占两个格子,
也就是占12个格子的六分之一;也就是col-lg-数字,数字是几,就是占当前行的多少分,
具体可参考下面代码, 这里以屏幕大于992和小于992的显示设置:
屏幕大于992时,效果图如下:
屏幕小于992时,效果图如下:
(3):栅格系统的划分一共有四种
布局容器:container 版心 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
版心取值范围 1.屏幕大小 手机(<768) 宽度100% --------> col-xs-
2.小屏幕(平板) 768--992 宽度为750px -------> col-sm-
3.显示器(电脑) 992-1200 宽度为970px--------> col-md-
4.超大屏幕 大于1200 宽度为1170px --------> col-lg-
注:
如果想让页面尽可能的多响应式排版,尽量将四个标准都写上
即:xs sm md lg,那么他们分别有什么特性呢?
第一种情况 只设置md,那么 lg也会和md现象一致。而xs,md没有响应式样子
第二种情况 只设sm,那么 sm\md\lg一个样子,xs没有样子
第三种情况 设置sm\md 那么 sm一个样子, md和lg一个样子,xs没有样子
第四种情况 只设置xs ,那么xs\sm\md\lg全设置上了 (所以说xs特殊)
(4).关于row
1) 当一个row里面的元素超过12分,会在row里面另起一行
2)当小于12份,放不满整行时,会有空格部分 。
3)row中若有元素使用列的偏移、列的嵌套、列的排序;
列的偏移:offset;
列的嵌套:row中有row;
列的排序:
通过使用 .col-md-push- 和 .col-md-pull-类就可以很容易的改变列(column)的顺序。push往后移动,pull往前移动
注:若有同行中元素A设置offset,元素B不设置,则B还会紧贴着A,并不会覆盖住B;若A偏移,B也偏移,那他们就各自偏移,互不影响;
也就是offset会影响其他,会带着其他一起偏移,
但,push-几个单位或者pull-几个单位,不会影响其他,也就是,若A发生偏移,B没有设置偏移,所以会出现A覆盖住了B.
学习心得:
bootstrap为程序员提供了各种炫酷的结构、样式、行为等,
使写代码更加方便,更加轻松,可对于初学者来说,内容显得特别多与繁琐,
所以,不要着急,先掌握基础的知识,
会应用他,明白他是做什么的,就够了。在工作或学习中应用的多了,自然就上手了。
------------------------------------------共勉----------------------------------------------------