栅格系统（布局）

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

  1. 行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
  2. 使用行（row）在水平方向创建一组列（column）。
  3. 你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
  4. 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  5. 通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建

1、原始代码及效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>bootstrap</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<body class="container">
		<h1>Hello, world!</h1>
		<h2 class="page-header">区域一</h2>
			<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
		<h2 class="page-header">区域二</h2>
			<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
		<h2 class="page-header">区域三</h2>
			<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
	</body>
	<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>

　　

2、将三个区域显示在同一排，并且平均分成三栏。

首先为三个区域添加一个容器，可以使用div，并且为div添加一个类 <div class="row">.

然后我们为每个小的区域也添加一个容器div，并且为div添加一个类<div class="col-xs-4">

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>bootstrap</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

	<body class="container">
		<div class="container">
			<h1>Hello, world!</h1>
			<div class="row">
				<div class="col-xs-4">
					<h2 class="page-header">区域一</h2>
					<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
				</div>
				<div class="col-xs-4">
					<h2 class="page-header">区域二</h2>
					<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
				</div>
				<div class="col-xs-4">
					<h2 class="page-header">区域三</h2>
					<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>

　　

3、Bootstrap 网格系统如何跨多个设备工作

如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。

总结：

1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。

2..col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。

Bootstrap栅格系统（布局）的更多相关文章

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

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

  2. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

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

  3. Bootstrap 栅格系统(转载)

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

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

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

  5. Bootstrap栅格系统用法--Bootstrap基础

    1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...

  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 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

随机推荐

  1. 【多端应用开发系列0.0.0——之总序】xy多端应用开发方案定制

    [目录] 0.0.0 [多端应用开发系列之总序]服务器Json数据处理——Json数据概述 0.0.0 [因] 正在学习多客户端应用开发,挖个坑,把所用到的技术方案,用最简单直白的语言描述出来,写成一 ...

  2. UVA 11396 Claw Decomposition（二分图）

    以“爪”形为单元,问所给出的无向图中能否被完全分割成一个个单元. 分析图的性质,由于已知每个点的度是3,所以“爪”之间是相互交错的,即把一个“爪”分为中心点和边缘点,中心点被完全占据,而边缘点被三个“ ...

  3. 如何获取数据块结构信息dump

    有个pub_department的表,索引为PK_PUB_DEPARTMENT. 1.找到object_id select   object_id from dba_objects s  where  ...

  4. Javascript Utils.js

    \ var Utils ={//字符串格式化StringFormat: function () {if (arguments.length == 0)return null;var str = arg ...

  5. POJ2987 Firing 最大权闭合图

    详情请参考http://www.cnblogs.com/kane0526/archive/2013/04/05/3001557.html 值得注意的地方,割边会把图分成两部分,一部分和起点相连,另一部 ...

  6. 四款超棒的jQuery数字化签名插件

    在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...

  7. Python相关书籍推荐

    Python基础教程(第2版 修订版) 作      者 [挪] Magnus Lie Hetland 著:司维,曾军崴,谭颖华 译 出 版 社 人民邮电出版社 出版时间 2014-06-01 版   ...

  8. Junit3.8

    使用Junit的最佳实践:新建一个名为test的source folder,用于存放测试类源代码目标类与测试类应该位于同一个包下面,这样测试类中就不必导入源代码所在的包,因为他们位于同一个包下面 测试 ...

  9. 产品经理如何赢得开发人员的尊重和支持？-摘自infoq

    对于产品经理来说,赢得开发人员的尊重和支持,从某种意义上讲,是产品迈向成功的坚实一步.最近,知乎社区上的开发人员和管理者在前.后两个帖子中对此展开了激烈的讨论,其中不乏真知灼见. 林志霖Cray认为产 ...

  10. pomelo windows 环境

    1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program File ...