首页
所有分类
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中Object和Function的关系的三段简单代码
Jun 27 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
js实现九宫格布局效果
May 28 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
Servlet面试题(20) 软件工程师面试题(40) Javascript面试题(44) UNIX面试题(27) Oracle面试题(81) J2EE面试题(19) 软件测试工程师面试题(53) PYTHON面试题(27) MySQL面试题(19) EJB面试题(46)
You might like
php递归法读取目录及文件的方法
2015/01/30 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
vue自动路由-单页面项目（非build时构建）
2019/04/30 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
Python执行时间的计算方法小结
2017/03/17 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python实现共轭梯度法
2019/07/03 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Under Armour瑞典官方网站：美国高端运动科技品牌
2018/11/21 全球购物
倡议书格式模板
2014/05/13 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
公司证明怎么写
2014/09/22 职场文书
博士给导师的自荐信
2015/03/06 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL