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 相关文章推荐
JS中style属性
Oct 11 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
vue项目中axios使用详解
Feb 07 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
多重?l件?合查?(二)
2006/10/09 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
js实现内置计时器
2019/12/16 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
vue v-model的用法解析
2020/10/19 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
详解python深浅拷贝区别
2019/06/24 Python
python 6种方法实现单例模式
2020/12/15 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
建筑项目策划书
2014/01/13 职场文书
红旗方阵解说词
2014/02/12 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
中班幼儿评语大全
2014/04/30 职场文书
个人安全生产承诺书
2014/05/22 职场文书
职位证明模板
2015/06/23 职场文书