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对象的支持
Jul 25 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 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
解析ajax事件的调用顺序
2013/06/17 PHP
PHP中常用的转义函数
2014/02/28 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
python使用psutil模块获取系统状态
2016/08/27 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python高并发和多线程有什么关系
2020/11/14 Python
python中spy++的使用超详细教程
2021/01/29 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
捐资助学感谢信
2015/01/21 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书