首页
所有分类
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 EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS删除数组里的某个元素方法
Feb 03 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
js实现计算器功能
Aug 10 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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) S2000(3) PL660(1) MX500(1) 台湾(1) YB217(1) 南麂列岛(1) YB235(1) 直流胆(1) YB400(2)
You might like
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php微信支付接口开发程序
2016/08/02 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
详解微信小程序框架wepy踩坑记录（与vue对比）
2019/03/12 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
vue按需加载实例详解
2019/09/06 Javascript
vue实现购物车列表
2020/06/30 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
把pandas转换int型为str型的方法
2019/01/29 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python名片管理系统开发
2020/06/18 Python
python解释器安装教程的方法步骤
2020/07/02 Python
浅析NumPy 切片和索引
2020/09/02 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
英国户外装备和冒险服装零售商：alloutdoor
2018/01/30 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
人与自然的观后感
2015/06/18 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers