初学者--bootstrap(四)栅格系统----在路上(8)
来源:互联网 发布:买淘宝自动发货 编辑:程序博客网 时间:2024/06/05 04:26
栅格系统:是bootstrap提供的响应式布局方式栅格系统的核心:
就是把容器container划分12等分,也就是版心被划分12等份。
下面的介绍也是以bootstrap中全局css样式;详情可观看http://v3.bootcss.com/css/了解,
在这不再赘述。现在来总结一下应用步骤:
(1):首先应该创建一个容器<div class="container"> <div class = "row">(行) 列 列</div>(2):创建合适的栅格系统</div>注:(container、row是bootstrap中原有的),row要包含在容器中,而容器class类有
container、container-fluid(流式版心)这两个类名是bootstrap提供的,
container是固定宽度,bootstrap已划分好,而container-fluid宽度为100%(浏览器的宽度)
<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;注:若有同行中元素A设置offset,元素B不设置,则B还会紧贴着A,并不会覆盖住B;若A偏移,B也偏移,那他们就各自偏移,互不影响;列的排序:通过使用 .col-md-push- 和 .col-md-pull-类就可以很容易的改变列(column)的顺序。push往后移动,pull往前移动也就是offset会影响其他,会带着其他一起偏移,
但,push-几个单位或者pull-几个单位,不会影响其他,也就是,若A发生偏移,B没有设置偏移,所以会出现A覆盖住了B.
学习心得:
bootstrap为程序员提供了各种炫酷的结构、样式、行为等,
使写代码更加方便,更加轻松,可对于初学者来说,内容显得特别多与繁琐,
所以,不要着急,先掌握基础的知识,
会应用他,明白他是做什么的,就够了。在工作或学习中应用的多了,自然就上手了。
0 0
- 初学者--bootstrap(四)栅格系统----在路上(8)
- 初学者--bootstrap(一)--在路上(1)
- 初学者 bootstrap(二)----在路上(4)
- Bootstrap栅格系统(布局)
- bootstrap的栅格系统(网格系统)
- 深入理解BootStrap-- 栅格系统(布局)
- Bootstrap栅格系统(屏幕大小)
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
- 初学者--bootstrap(三)下载与安装----在路上(7)
- Bootstrap中的栅格栅格系统
- 深入理解BootStrap Item7 -- 栅格系统(布局)
- 深入理解BootStrap-- 栅格系统(布局)7
- 学习——Bootstrap网格(栅格)系统
- 深入理解BootStrap之栅格系统(布局)
- (转载)Bootstrap 栅格系统的精妙之处
- bootstrap——css样式(一、栅格系统)
- Bootstrap栅格系统研究
- CSS Bootstrap 栅格系统
- Should we limit the foreign festivals celebration in our country?
- QLineEdit 设置其只能输入数字
- CSS中url()地址写法
- 第五节 模拟ecshop登录功能
- 嵌入式系统运行过程
- 初学者--bootstrap(四)栅格系统----在路上(8)
- 欢迎使用CSDN-markdown编辑器
- 本周优秀个人图谱推荐
- Java并发编程:Java内存模型和volatile关键字解析
- DRV11873无刷直流电机驱动评估板总结
- 前端面试笔记
- PHP环境搭建
- 这就是我
- GestureDetector.SimpleOnGestureListener onScroll参数问题