首页
所有分类
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 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS字符串截取函数实例
Dec 27 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
最新最全的手机号验证正则表达式
Feb 24 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
寄语(276) 决心书(42) 活动总结(790) 制度(225) 保证书(97) 感谢信(72) 责任书(145) 请假条(31) 倡议书(159) 评语(336)
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
基于JQuery的访问WebService的代码（可访问Java[Xfire]）
2010/11/19 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
python语言使用技巧分享
2016/05/31 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
婴儿地球：Baby Earth
2018/12/25 全球购物
车间调度岗位职责
2013/11/30 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
爱国主义影片观后感
2015/06/18 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
90后经典动画片排行：《数码宝贝》第二，《小鲤鱼历险记》在榜
2022/03/18 日漫
sql注入报错之注入原理实例解析
2022/06/10 MySQL