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栅格系统的实现的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  3. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  4. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  7. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  8. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  9. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  10. Bootstrap 栅格系统 理解与总结

    Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

随机推荐

  1. redhat 安装lamp

    安装Apache yum install httpd 安装MySql yum install mysql mysql-server 安装php yum install php 安装php的mysql模 ...

  2. CentOS6.5中的vsftpd安装配置

    安装ftp 1.使用chkconfig 来查看是否装有vsftpd服务: 2.使用yum命令直接安装:yum -y install vsftpd 3.然后为它创建日志文件:touch /var/log ...

  3. 问题4:对dict、list、tuple中的元素排序

    一)对字典中元素排序   方法一:利用sorted的key参数进行排序 from random import randint date = {k:randint(0, 20) for k in ran ...

  4. AI-Info-Micron-Menu:Products

    ylbtech-AI-Info-Micron-Menu:Products 我们制造业界最广泛的存储器和存储技术产品组合:DRAM,NAND,NOR和3D XPoint™存储器. 凭借紧密的行业合作伙伴 ...

  5. ss2

    一. *** 服务端配置 1. 在命令行窗口输入下面4行命令并回车执行 yum -y update yum install -y python-setuptools && easy_i ...

  6. python 基础 字典生成式

    dict1 = {1:2,3:4,6:7,9:10} print dict((v,k) for k,v in dict.items()) 结果 {2:1.4:3,10:9,7:6} res = [{' ...

  7. 基于OpenCV依次读取文件夹下的所有图像文件

    //编程环境:VS2008+OpenCV1.1, //本程序首先挨个读取F://my face database//OnlyFace文件夹下的所有图 像 文件,之后,在项目文件夹下 //建立一 个名为 ...

  8. sharepoint Foundation 2013安装过程

    安装完必备软件后,便可安装sharepoint Foundation 2013

  9. javaScript笔记01

    所谓勇气就是明知前方的路途充满了荆棘险阻,但还是义无反顾的的走下去. 1 Javasrcipt定义的三种方式 ·1 head中的script脚本 <!DOCTYPE html> <h ...

  10. cocos2dx之tolua++全面分析(一):tolua++工具本身

    在cocos2dx/tools/tolua++下面,有大量pkg文件,这些是按tolua++要求格式写好的.需要导出到lua中的c++类描述文件. 每当在c++类里增加了新函数需要导出时,应同步修改相 ...