栅格系统:是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为程序员提供了各种炫酷的结构、样式、行为等, 使写代码更加方便,更加轻松,可对于初学者来说,内容显得特别多与繁琐, 所以,不要着急,先掌握基础的知识, 会应用他,明白他是做什么的,就够了。在工作或学习中应用的多了,自然就上手了 。