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 textarea的长度进行验证
May 06 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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实现的MySQL数据浏览器
2007/03/11 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
Angular工具方法学习
2016/12/26 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
如何验证python安装成功
2020/07/06 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
高中生学习的自我评价
2013/12/14 职场文书
结婚典礼证婚词
2014/01/11 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
避暑山庄导游词
2015/02/04 职场文书
会议主持词结束语
2015/07/03 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS