Bootstrap 网格系统的学习
2018-02-12 15:01
796 查看
一、什么是Bootstrap网格系统?
简单来说,Bootstrap包含一套响应式的、移动设备优先的、不固定的网格系统,可以随着设备的大小增加而适当的进行扩展到12列。也就是通过定义容器的大小,平分12份,在调整内外边距,最后再结合媒体查询的方式运用网格系统。
二、Bootstrap网格系统的工作原理
1、数据行row必须放在.container class内,这样才能获得适当的对齐alignment与内边距padding。<div class="container"> <div class="row"> ...... </div> </div>
2、在数据行.row class中添加列,但是列的总数不能超过12。如下代码:
<div class="container"> <div class="row"> <div class="col-md-4">4</div> <div class="col-md-8">8</div> </div>
将一行row分为比例为4:8的两个列。
3、我们需要设置存放的内容是要放在列.column中,而不是行.row中。
三、bootstrap基本用法
在介绍网格系统的使用之前,需要了解bootstrap在不同屏幕对应的网格样式及一些属性。如下图:bootstrap基本的网格结构:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
bootstrap网格系统的使用其实就是通过对列的排序、列的组合、列的偏移、列的嵌套等来控制的。
1、列的组合:就是将12个格子平均按照所需分配。可以是4-8组合,可以是4-4-4组合,可以是6-6组合等。
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-3">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>
2、列的偏移:有时候我们不需要将两个相邻的列紧挨在一起,这时候就可以试用列偏移来实现。但是.col-xs-* 类不支持偏移。我们使用“col-md-offset-*”来实验。
使用“col-md-offset-*”其中星号代表要偏移的列组合数(1-11),比如我们需要将某一列向右偏移4个列的宽度。
<div class="col-md-6 col-md-offset-4">列向右移动四列的间距来居中该div</div>
3、列的排序:使用带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序。
.col-md-push-向右, .col-md-pull- 向左
<p>排序前</p> <div class="col-md-8">我在左</div> <div class="col-md-4">我在右</div> <p>排序后</p> <div class="col-md-8 col-md-push-4">我在左</div> <div class="col-md-4 col-md-pull-8">我在右</div>
4、列的嵌套:可以在一个列中增加多个行row,然后在行中插入列。
<div class="row"> <div class="col-md-8"> 在.col-md-8嵌套一个row(3个col-md-4) <div class="row"> <div class="col-md-4">c b7d5 ol-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> <div class="col-md-4">在.col-md-4我没嵌套</div> </div>
嵌套的网格也是按照父类网格的宽度分配的宽度的,是在嵌套父类.col-md-8网格的的外部的,并不是在其内部。
相关文章推荐
- bootstrap 基础知识学习(图片+网格系统)
- Bootstrap学习笔记(四)网格系统
- Bootstrap学习-网格系统
- Bootstrap 学习笔记 之网格系统
- Bootstrap学习:Bootstrap 网格系统
- bootstrap 网格系统学习
- 学习——Bootstrap网格(栅格)系统
- Bootstrap学习:网格系统
- Bootstrap 学习之 (一) ------ 网格系统
- Bootstrap快速学习笔记(3)网格系统
- BootStrap3学习笔记(一)之网格系统
- Bootstrap学习笔记—关于网格系统
- Bootstrap 网格系统
- BOOTSTRAP基础学习小记(三)网格简介-web前端
- bootstrap的总结1 - 网格系统
- Bootstrap3.0学习第二轮(栅格系统原理)
- Bootstrap3.0学习第三轮(栅格系统案例)
- bootstrap学习2--全局css之栅格系统
- Bootstrap 网格系统
- 学习使用Bootstrap栅格系统