Bootstrap网格系统详解


Posted in Javascript onApril 26, 2016

bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理:

1、数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding)

<div class="container">
<div class="row"></div>
</div>

2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数(如:12)

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>

3、具体内容应当放在列容器(.column)之内,而且只有列(.column)才可以作为行容器(.row)的直接子元素

4、通过设置内距(padding)从而创建列与列之间的间距,然后通过为第一列和最后一叠设置负值的外距(margin)来抵消内距(padding)的影响

在bootstrap网格系统中带有响应式效果,其带有四种类型的浏览器,(超小屏,小屏,中屏和大屏),其断点是768px,992px,1220px

容器(.container),针对不同的浏览器分辨率,其宽度也不一样:自动,760px,970px,1170px;

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}

行容器(.row),将容器的行平分了12等份,也就是列。每个列都有个padding-left:15px和padding-right:15px;这样也导致了第一列的padding-left和最后一列的paading-right占据了中宽度的30px

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

行容器(.row)定义了margin-left和margin-right值为-15px,用来抵消第一列的左内距和最后一列的右内距,这样第一列和最后一列与容器(.container)之间就没有间距了

.row {
margin-right: -15px;
margin-left: -15px;
}

基本用法

由于bootstrap框架在不同屏幕尺寸使用了不同的网格样式,下面就以中屏(970px)为例。

1、列组合

列组合就是更改数字来合并列(列总数不能超过12),有点类似于表格的colspan属性;列组合方式只涉及两个特性:浮动于宽度百分比

<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-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>

效果如下:

 Bootstrap网格系统详解

确保所有列左浮动

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}

定义每个列组合的宽度

.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}

列偏移

有时候,我们不希望相邻的两个列紧靠在一起,但又不想用margin或者其他技术手段,这是可以用列偏移(offset)来实现。使用列偏移只需在列元素上添加类名.col-md-offset-*(星号代表要偏移的列组合数),具有这个类名的列就会偏移,如:在列元素上添加.col-md-offset-4,表示该列向右偏移4个列的宽度

<div class="container">
<div class="row">
<div class="col-md-4">1111</div>
<div class="col-md-4 col-md-offset-2">111</div>
<div class="col-md-2">333</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">列偏移</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>

效果如下:

 Bootstrap网格系统详解

实现原理:

利用十二分之一的margin-left,有多少个offset,就有多少个margin-left

.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}

需要注意的是,使用col-md-offset-* 对列进行右偏移时,要保证列与偏移列的总数不超过12,不然会导致列断行显示

列排序

列排序就是改变列的方向,并且设置浮动的距离。在bootstrap网格系统中是通过添加类名。col-md-push-*和col-md-pull-*

<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>

效果如下:

Bootstrap网格系统详解

col-md-4居左,col-md-8居右,如果要互换位置,就需要将col-md-4向右移动8个列的距离,也就是添加类名.col-md-push-8;同时需要将col-md-8向左移动4个列的距离,也就是添加类名.col-md-pull-4

bootstrap仅通过设置left和right来实现定位效果。

.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}

列嵌套

列嵌套可以在一个列中添加一个或做个行(row)容器,然后在这个行容器中插入列,在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度

<div class="container">
<div class="row">
<div class="col-md-8">

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">

我在里面嵌套了一个网格

<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>
</div>
</div>

Bootstrap网格系统详解

以上内容是小编给大家介绍的Bootstrap网格系统,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
jQuery 中的 DOM 操作
Apr 26 #Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 #Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 #Javascript
You might like
php实现mysql数据库备份类
2008/03/20 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP中的替代语法介绍
2015/01/09 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
BootStrap selectpicker
2016/06/20 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python 网络编程常用代码段
2016/08/28 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
商务助理求职信范文
2014/04/20 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python