首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap整体框架之CSS12栅格系统

Posted in Javascript onDecember 15, 2016

1.整体架构

Bootstrap整体框架之CSS12栅格系统

BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台)

表现形式
CSS组件
JS插件
基础支撑平台
CSS12栅格系统
基础布局组件
jQuery
响应式设计

1.1 CSS12栅格系统

12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。

1.1.1 实现原理

栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制作出强大响应式的栅格系统。

Bootstrap整体框架之CSS12栅格系统

1.最外层的边框，伴随着响应式思想，区分了四种类型浏览器，像素分界点768px、992px、1200px
2.第二层的边框，即.container样式容器，针对四种浏览器宽度不一样，值是自动、750px、970px、1170px

//源码
  .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;
   }
  }

3.1号横条，左内边距和右内边距是15px，是12个col-lg-1，没有row，则会

//源码
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
  }

Bootstrap整体框架之CSS12栅格系统

<!DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

   </head>
   <body>
    <div class="container" style="border:1px solid black">
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
    </div>
    <!-- bootstrap是基于jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
   </body>
  </html>

4.2号横条，也就是row容器的定义,margin-left和margin-right都是-15px，组合row和列后，形成3号横条的效果，也就是左右宽度用满的效果。

//源码 
.row { 
margin-right: -15px; 
margin-left: -15px; 
}

有row，则会没边距

Bootstrap整体框架之CSS12栅格系统

<!DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

   </head>
   <body>
    <div class="container" style="border:1px solid black">
      <div class="row">
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
      </div>
    </div>
    <!-- bootstrap是基于jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
   </body>
  </html>

1.1.2 基本用法

1.列组合

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-lg-8" style="border:1px solid black">col-lg-8</div>
    <div class="col-lg-4" style="border:1px solid black">col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-lg-6" style="border:1px solid black">col-lg-6</div>
    <div class="col-lg-6" style="border:1px solid black">col-lg-6</div>
  </div>
</div>

实现很简单，就是涉及了两个CSS特性：左浮动和宽度百分比

//源码
@media (min-width: 1200px) {
 .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  float: left;
 }
 .col-lg-12 {
  width: 100%;
 }
 .col-lg-11 {
  width: 91.66666667%;
 }
 .col-lg-10 {
  width: 83.33333333%;
 }
 .col-lg-9 {
  width: 75%;
 }
 .col-lg-8 {
  width: 66.66666667%;
 }
 .col-lg-7 {
  width: 58.33333333%;
 }
 .col-lg-6 {
  width: 50%;
 }
 .col-lg-5 {
  width: 41.66666667%;
 }
 .col-lg-4 {
  width: 33.33333333%;
 }
 .col-lg-3 {
  width: 25%;
 }
 .col-lg-2 {
  width: 16.66666667%;
 }
 .col-lg-1 {
  width: 8.33333333%;
 }
}

2.列偏移

我们不想让相邻的列挨在一起，则利用栅格系统的列偏移.col-xs(sm,md,lg)-offset-* 功能来实现，不必再定义margin

<div class="row">
  <div class="col-lg-8 col-lg-offset-2" style="border:1px solid black">col-lg-8 col-lg-offset-2</div>
  <div class="col-lg-2 col-lg-offset-2" style="border:1px solid black">col-lg-2 col-lg-offset-2</div>
</div>
//源码
.col-lg-offset-12 {
 margin-left: 100%;
}
.col-lg-offset-11 {
 margin-left: 91.66666667%;
}
.col-lg-offset-10 {
 margin-left: 83.33333333%;
}
.col-lg-offset-9 {
 margin-left: 75%;
}
.col-lg-offset-8 {
 margin-left: 66.66666667%;
}
.col-lg-offset-7 {
 margin-left: 58.33333333%;
}
.col-lg-offset-6 {
 margin-left: 50%;
}
.col-lg-offset-5 {
 margin-left: 41.66666667%;
}
.col-lg-offset-4 {
 margin-left: 33.33333333%;
}
.col-lg-offset-3 {
 margin-left: 25%;
}
.col-lg-offset-2 {
 margin-left: 16.66666667%;
}
.col-lg-offset-1 {
 margin-left: 8.33333333%;
}
.col-lg-offset-0 {
 margin-left: 0;
}

3.列嵌套

栅格系统也支持列嵌套，也就是一个列中可以在声明一个或者多个行.内部嵌套的row宽度是100%，就是当前外部列的宽度

<div class="row">
  <div class="col-lg-8" style="border:1px solid black">col-lg-8</div>
  <div class="col-lg-4" style="border:1px solid black">
    <div class="row">
      <div class="col-lg-6">col-lg-6</div>
      <div class="col-lg-6">col-lg-6</div>
    </div>
  </div>
</div>

4.列排序

列排序就是改变列的方向，也就是改变左右浮动，并且设置浮动的距离。可以通过.col-xs(sm,md,lg)-pull(push)-*
所有列设置的都是左浮动，通过设置left和right来实现定位显示。push则设置left，pull则设置right

其实只是利用了float，left，right三个属性就实现了这种效果

Bootstrap整体框架之CSS12栅格系统

//源码
.col-lg-pull-12 {
 right: 100%;
}
.col-lg-pull-11 {
 right: 91.66666667%;
}
.col-lg-pull-10 {
 right: 83.33333333%;
}
.col-lg-pull-9 {
 right: 75%;
}
.col-lg-pull-8 {
 right: 66.66666667%;
}
.col-lg-pull-7 {
 right: 58.33333333%;
}
.col-lg-pull-6 {
 right: 50%;
}
.col-lg-pull-5 {
 right: 41.66666667%;
}
.col-lg-pull-4 {
 right: 33.33333333%;
}
.col-lg-pull-3 {
 right: 25%;
}
.col-lg-pull-2 {
 right: 16.66666667%;
}
.col-lg-pull-1 {
 right: 8.33333333%;
}
.col-lg-pull-0 {
 right: auto;
}
.col-lg-push-12 {
 left: 100%;
}
.col-lg-push-11 {
 left: 91.66666667%;
}
.col-lg-push-10 {
 left: 83.33333333%;
}
.col-lg-push-9 {
 left: 75%;
}
.col-lg-push-8 {
 left: 66.66666667%;
}
.col-lg-push-7 {
 left: 58.33333333%;
}
.col-lg-push-6 {
 left: 50%;
}
.col-lg-push-5 {
 left: 41.66666667%;
}
.col-lg-push-4 {
 left: 33.33333333%;
}
.col-lg-push-3 {
 left: 25%;
}
.col-lg-push-2 {
 left: 16.66666667%;
}
.col-lg-push-1 {
 left: 8.33333333%;
}
.col-lg-push-0 {
 left: auto;
}

1.1.3 响应式栅格

已知col-xs-* col-sm-* col-md-* col-lg-*

1.跨设备组合定义
一种样式（比如col-md-9）在其定义的尺寸范围以外是不起作用的，比如，在小型或者大型屏幕上，所有带有md的样式都不会生效。我们可以在一个元素上应用不同的样式，以适配不同尺寸的屏幕。

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div2 col-xs-6 col-sm-3</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div3 col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div4 col-xs-6 col-sm-3</div>
  </div>
</div>

Bootstrap整体框架之CSS12栅格系统

如图，由于div3换行时，但div1过高，则div3就右边紧挨着显示了。
所以需要利用clearfix样式清除浮动，但前提是在超小型屏幕上才显示(用visible-xs控制)

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div2 col-xs-6 col-sm-3</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div3 col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div4 col-xs-6 col-sm-3</div>
  </div>
</div>

Bootstrap整体框架之CSS12栅格系统

//源代码
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
 display: table;
 content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-header:after,
.modal-footer:after {
 clear: both;
}
//源代码
@media (max-width: 767px) {
 .visible-xs {
  display: block !important;
 }
 table.visible-xs {
  display: table !important;
 }
 tr.visible-xs {
  display: table-row !important;
 }
 th.visible-xs,
 td.visible-xs {
  display: table-cell !important;
 }
}

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

Bootstrap整体框架之CSS12栅格系统

- Author -

github_34514750

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
Dec 01 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
Nov 05 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
Bootstrap CSS布局之列表
Dec 15 #Javascript
BootStrap整体框架之基础布局组件
Dec 15 #Javascript
JS弹性运动实现方法分析
Dec 15 #Javascript
JS经典正则表达式笔试题汇总
Dec 15 #Javascript
javascript中闭包概念与用法深入理解
Dec 15 #Javascript
javascript读取文本节点方法小结
Dec 15 #Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 #Javascript
放大器(1) 矿石收音机(1) DSP(2) S900(1) ETON(1) R601SW(1) 接收机(2) 电子管(5) 车机(1) E1-XM(1)
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP+Tidy－完美的XHTML纠错+过滤
2007/04/10 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
详解jQuery选择器
2016/12/21 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
pycharm安装和首次使用教程
2018/08/27 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
专门经营化妆刷的美国彩妆品牌：Sigma Beauty
2017/09/11 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
副总经理任命书
2014/06/05 职场文书
民事二审代理词
2015/05/25 职场文书
行政处罚事先告知书
2015/07/01 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS