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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
jQuery拖动图片删除示例
May 10 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
基于JSONP原理解析(推荐)
Dec 04 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php获取表单中多个同名input元素的值
2014/03/20 PHP
8个PHP数组面试题
2015/06/23 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
jQuery select控制插件
2009/08/17 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python实现端口复用实例代码
2014/07/03 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
金融事务专业求职信
2014/04/25 职场文书
启动仪式策划方案
2014/06/14 职场文书
医院党建工作总结2015
2015/05/26 职场文书
货款欠条范本
2015/07/03 职场文书
三八妇女节主持词
2015/07/04 职场文书
2015年教师国培感言
2015/08/01 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
python实现学生信息管理系统(面向对象)
2022/06/05 Python
Mysql数据库group by原理详解
2022/07/07 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS