bootstrap栅格系统的实现
bootstrap提供了一个非常实用的栅格系统，可以实现响应式的网格布局，原理其实很简单，利用了float、百分比的宽度和@media的配合实现响应式，bootstrap默认把一行分为了12列，提供了xs、sm、md、lg四个不同的尺寸，而这四种尺寸其实是一样大的，只是在不同的页面宽度才会触发列的浮动，例如xs是最小的，不管页面多大都会触发列的浮动，而sm只有页面在768px以上才会触发，下面就以xs和sm这两个尺寸来实现栅格系统：
首先所有的列都要放在一个行里，所以在列的外包裹元素上添加一个类名row：
<div class="row">
而这个row并不需要设置过多的样式，只是将左右外边距设为了-15px，这是因为bootstrap为所有的列都添加了15px的左右内边距，让栅格中的列之间有间距但又不希望左右两边的列有多余的空隙，所以在row中设置负值的外边距抵消。
由于列会浮动，所以row还需进行浮动的清除，使用clearfix来清除：
.row:after {
content: '';
display: block;
visibility: hidden;
clear: both;
}
里面的列这里只用col-xs-3,col-xs-6,col-xs-4,col-sm-3,col-sm-6这几个来演示，就像上面所说的，所有的列都有相同的左右内边距，所以先为它们设置一个公共样式：
.col-sm-3, .col-sm-6, .col-xs-3, .col-xs-4, .col-xs-6 {
padding: 0 15px;
}
xs的在任何页面大小中都会使列浮动：
.col-xs-3, .col-xs-6, .col-xs-4 {
float: left;
}
.col-xs-3 {
/*3代表占3份即3/12=1/4*/
width: calc(100% / 4);
}
.col-xs-6 {
width: calc(100% / 2);
}
.col-xs-4 {
width: calc(100% / 3);
}
而sm的需要页面在768px以上才浮动，所以可以使用@media：
@media (min-width: 768px) {
.col-sm-3, .col-sm-6 {
float: left;
}
.col-sm-3 {
width: calc(100% / 4);
}
.col-sm-6 {
width: calc(100% / 2);
}
}
这样在768px以下，sm呈现的就是垂直布局。
演示代码：
<div class="container">
<div class="row">
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
</div>
</div>
<div class="col-xs-3">.col-xs-3</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
</div>
在页面较小时，sm为垂直排列：
在页面大于768px时，布局相同：
这里的.container也是利用了@media的方式使该容器在不同页面宽度下有不同的大小，并且左右外边距设为了auto，所以会自动居中，在页面宽度较小的情况下会占满页面。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="./css/reset.css">
<style>
* {
box-sizing: border-box;
}
.container {
padding: 0 5px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 980px;
}
}
@media (min-width: 1200px) {
.container {
width: 1120px;
}
}
div {
text-align: center;
}
.row {
margin: 0 -15px;
background: yellow;
}
.row:after {
content: '';
display: block;
visibility: hidden;
clear: both;
}
.col-sm-3, .col-sm-6, .col-xs-3, .col-xs-6 {
padding: 0 15px;
}
.col-xs-3, .col-xs-6, .col-xs-4 {
float: left;
}
.col-xs-3 {
width: calc(100% / 4);
}
.col-xs-6 {
width: calc(100% / 2);
}
.col-xs-4 {
width: calc(100% / 3);
}
@media (min-width: 768px) {
.col-sm-3, .col-sm-6 {
float: left;
}
.col-sm-3 {
width: calc(100% / 4);
}
.col-sm-6 {
width: calc(100% / 2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
</div>
</div>
<div class="col-xs-3">.col-xs-3</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
</div>
</body>
</html>
bootstrap栅格系统的实现的更多相关文章
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 初学bootstrap ---栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
- Bootstrap栅格系统基本使用
1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
- 第二百三十五节，Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
随机推荐
- 浏览器全屏的JS代码实现
方法一:该方法是从一个网上的效果看到不错,然后自己就拿来下来实验了一下,还是比较满意度,下面直接给出代码 <!DOCTYPE HTML> <html lang="en-US ...
- IronPython 源码剖析系列（1）：IronPython 编译器
自 IronPython 正式发布以来,由于对 Python 语言的喜爱所驱使,同时我想藉此去了解一下编程语言的编译器,分析器等程序是什么原理,如何运作的,所以我开始了对 IronPython 源代码 ...
- Aravis 库编译方法
Aravis 库编译方法 March 21, 2015 9:40 PM 首先下载 aravis 库的源代码:aravis 库下载地址 这里我们使用的是 aravis_0_2_0,比较老的一个版本. 首 ...
- POJ 1046 Color Me Less(浅水)
一.Description A color reduction is a mapping from a set of discrete colors to a smaller one. The sol ...
- js遍历for,forEach, for in,for of
ECMAScript5(es5)有三种for循环 简单for for in forEach ECMAScript6(es6)新增 for of 简单for for是循环的基础语法,也是最常用的循环结构 ...
- JavaScript之JMap
在JavaScript中我们利用function类定义类在类的内部我们用var 定义私有变量 私有函数在类的内部我们用this 定义公有变量(1)定义一个类 function JMap() { var ...
- HBase 二级索引与Coprocessor协处理器
Coprocessor简介 (1)实现目的 HBase无法轻易建立“二级索引”: 执行求和.计数.排序等操作比较困难,必须通过MapReduce/Spark实现,对于简单的统计或聚合计算时,可能会因为 ...
- NASA的CTO——开源软件使我们诚实
Chris C.Kemp,谷歌设置新职位CTO让他领导 原文: NASA's CTO: Open source software keeps us honest 作者: Shawn Freeman 译 ...
- robot framework结合Jenkins（一）
一.CI与Jenkins介绍: 1.持续集成(CI) 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化 ...
- ARC097D Equals
传送门 题目 We have a permutation of the integers from 1 through N, p1, p2, .., pN. We also have M pairs ...