bootstrap网格系统使用方法解析


Posted in Javascript onJanuary 13, 2017

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

工作原理

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)的影响

能这媒体查询实现:
针对不同的浏览器分辨率,其宽度也不一样:自动、750px、970px和1170px
css源码:

.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;
 }

基本用法

网格系统用来布局,其实就是列的组合,Bootstrap框架在不同屏幕尺寸使用了不同的网格样式

1、列组合

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12)
实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。

/*确保所有列左浮动*/
.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">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
  <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
 </div>
</div>

实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。

css源码:

.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-” (其中星号代表移动的列组合数)。

左边占4列宽,右侧占8列宽;

<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>
-----------------------将这两个互换位置--------------------------------------------------
<div class="container">
 <div class="row">
 <div class="col-md-4 col-md-push-8">.col-md-4</div>
 <div class="col-md-8 col-md-pull-4">.col-md-8</div>
 </div>
</div>

// 实现原理:
.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jquery实现轮播图效果
Feb 13 Javascript
js css自定义分页效果
Feb 24 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
You might like
php实现下载限制速度示例分享
2014/02/13 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
Js四则运算函数代码
2012/07/21 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
关于webpack代码拆分的解析
2017/07/20 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Django使用Celery异步任务队列的使用
2018/03/13 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python占用的内存优化教程
2019/07/28 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
班主任班级寄语大全
2014/04/04 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
高中团支书竞选稿
2015/11/21 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers