Bootstrap3栅格系统详解 | 橙色时光
Theme | Powered by评论- 112&
&&&&&&&&&&&
1、移动设备2、响应式图片3、Normalize4、Containers5、栅格简介6、栅格选项7、列偏移8、嵌套列9、列排序
1、移动设备在Bootstrap 3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。
为了确保适当的绘制和触屏缩放，需要在&head&之中添加viewport元数据标签。
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&
2、响应式图片通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height:属性，可以让图片按比例缩放，不超过其父元素的尺寸。
&img src="&%=path %&/demo/niusb/sprite.png" class="img-responsive" /&
3、NormalizeNormalize.css的目的是让HTML元素在不同浏览器里的展现形式一致。
4、Containers用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。注意，由于设置了padding 和 固定宽度，.container不能嵌套。
&div class="container"&
5、栅格系统简介Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
6、栅格选项bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。
7、列偏移使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
8、嵌套列为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。9、列排序通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
&%@ page language="java" pageEncoding="UTF-8"%&
String path = request.getContextPath();
&!DOCTYPE html&
&html lang="zh-cn"&
&title&栅格&/title&
&meta content="IE=edge" http-equiv="X-UA-Compatible"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&
&meta http-equiv="Content-Language" content="zh-cn" /&
&meta name="author" content="" /&
&meta name="Copyright" content="parami|厦门波罗密网络科技有限公司" /&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&jsp:include page="/demo/base/js_bootstrap.jsp" /&
&style type="text/css"&
.show-grid [class ^="col-"] {
padding-top: 10
padding-bottom: 10
background-color: #
border: 1px solid #
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
&script type="text/javascript"&
$(function(){
&b&col-lg-*用法&/b&
&div class="row show-grid"&
&div class="col-lg-8"&.col-lg-8&/div&
&div class="col-lg-4"&.col-lg-4&/div&
&b&col-md-*用法&/b&
&div class="row show-grid"&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="row show-grid"&
&div class="col-md-8"&.col-md-8&/div&
&div class="col-md-4"&.col-md-4&/div&
&b&col-sm-*用法&/b&
&div class="row show-grid"&
&div class="col-sm-8"&.col-sm-8&/div&
&div class="col-sm-4"&.col-sm-4&/div&
&b&col-xs-*用法&/b&
&div class="row show-grid"&
&div class="col-xs-8"&.col-xs-8&/div&
&div class="col-xs-4"&.col-xs-4&/div&
&b&列偏移: col-md-offset-*&/b&
&div class="row show-grid"&
&div class="col-md-4"&.col-md-4&/div&
&div class="col-md-4 col-md-offset-4"&.col-md-4 .col-md-offset-4&/div&
&div class="row show-grid"&
&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&
&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&
&div class="row show-grid"&
&div class="col-md-6 col-md-offset-3"&.col-md-6 .col-md-offset-3&/div&
&b&嵌套列: 嵌套row所包含的列加起来应该等于12&/b&
&div class="row show-grid"&
&div class="col-md-9"&
Level 1: .col-md-9
&div class="row show-grid"&
&div class="col-md-6"&Level 2: .col-md-6&/div&
&div class="col-md-6"&Level 2: .col-md-6&/div&
&b&列排序: .col-md-push-*和.col-md-pull-*&/b&
&div class="row show-grid"&
&div class="col-md-9 col-md-push-3"&.col-md-9 .col-md-push-3&/div&
&div class="col-md-3 col-md-pull-9"&.col-md-3 .col-md-pull-9&/div&
阅读(...) 评论()bootstrap中栅格系统概念解析 | 有野出没
念念不忘，必有回响
当前位置：>>
bootstrap中栅格系统概念解析
在编写网页的时候，总是需要对网页进行分块布局，如果编写网页的时候使用的是bootstrap的CSS样式表，那么肯定会用到bootstrap的栅格系统，bootstrap的栅格系统乍一看来比较难以理解，但是功能却是非常强劲的。用起来非常方便。
bootstrap中的栅格系统会根据浏览器的窗口大小来改变div的比例，使网页总能根据网页的变化而自适应，所以使用bootstrap栅格系统不需要对任何额外的编写和测试，就可以轻松编写出响应式网页。
要开始编写，首先需要满足这几点：
1.加入bootstrap的CSS样式表。
2.在网页head部分加上获取浏览器尺寸的语句
&meta name="viewport" content="width=device-width, initial-scale=1"&
bootstrap的的栅格系统在bootstrap的官方网站上的说明不是很通俗，其实栅格系统其实就是没有视觉样式的div，实际在网页上布设栅格系统的时候，是不会产生如官网案例上的类似表格一样的背景和边框。
如果要使几个div放置在同一层，需要在这些div之外增加一个class为row的div。
栅格系统将同一列（row）的网页分为12个单位，用户可以按照比例将网页设计成不同比例，表现的方式是在同一列的div中添加这样的class：“col-md-*”，星号部分填写数字，但是同一行的数字相加要等于12，比如说，我打算将同一行的两个div平均划分，则需要这样编写：
class="row"
class="col-md-6".col-md-6
class="col-md-6".col-md-6
如果你这样做了，你可以将这两块div涂色，然后调整自己的浏览器尺寸查看一下效果，你会发现，在浏览器缩小到一定程度的时候，这两块div会自动掉下去，变成竖列排列。这就是自适应的效果，但是如果你不希望出现这样的效果的话，也是可以调整的。
bootstrap的栅格系统提供了四种方案，分别为：超小屏幕 手机 (&768px)，小屏幕 平板 (≥768px)，中等屏幕 桌面显示器 (≥992px)，大屏幕 大桌面显示器 (≥1200px)准备了方案。
具体使用方式是，可以设置.col-xs-，.col-sm-，.col-md-，.col-lg- 前缀。
效果可以更改在达到四种分辨率的时候，div的表现形式。
比如说，我想让网页在缩小到最小(&768px)的时候，总是保持两栏并列。可以这样写：
class="row"
class="col-md-6 col-xs-6 col-sm-6 col-lg-6".col-md-6
class="col-md-6 col-xs-6 col-sm-6 col-lg-6".col-md-6
class="row"
class="col-md-6 col-xs-6 col-sm-6 col-lg-6".col-md-6
class="col-md-6 col-xs-6 col-sm-6 col-lg-6".col-md-6
具体的表格如下：
因此，如果要修改一个div在各种屏幕下的表现形式的话，只需要设置全所有的样式即可。
如果需要对div有其他的要求的话，比如说偏移浮动的效果，同样可以修改class来改变样式。这一部分比较好理解，所有这里也不多言了。详情还是查看官方文档。
1089评论总数
1200建站天数
Email:admin【＠】
大三在校学生从上一张我们了解了栅格选项，那么我们就来了实战了解下吧（其实还是中文官网的案例）
ps.我这里是电脑上用谷歌浏览器来观察的，毕竟电脑的分辨率高（px），谷歌浏览器最大化后，值比大屏幕设备的1200px的还要大，这样我们就可以通过拉缩浏览器改变可视区域来观察效果，当然，你会用谷歌浏览器模拟其他设备的话就另当别论了。
【1】案例：从堆叠到水平排列
这里我们使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统。
1、在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）；
2、在桌面（中等）屏幕设备上变为水平排列。
注意：(col-*-*)的使用都是放置于.row内。下面的代码为了便于观察我们将.row类放在.container里。
上代码拉：
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 --&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&Bootstrap-Template-02&/title&
&!-- 最新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="/twitter-bootstrap/3.2.0/css/bootstrap.min.css"&
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/html5shiv/3.7.2/html5shiv.min.js"&&/script&
&script src="/respond.js/1.4.2/respond.min.js"&&/script&
&![endif]--&
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
&div class="container"&
&h1&案例：从堆叠到水平排列&small&.col-md-*&/small&&/h1&
&div class="row show-grid"&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="col-md-1"&.col-md-1&/div&
&div class="row show-grid"&
&div class="col-md-8"&.col-md-8&/div&
&div class="col-md-4"&.col-md-4&/div&
&div class="row show-grid"&
&div class="col-md-4"&.col-md-4&/div&
&div class="col-md-4"&.col-md-4&/div&
&div class="col-md-4"&.col-md-4&/div&
&div class="row show-grid"&
&div class="col-md-6"&.col-md-6&/div&
&div class="col-md-6"&.col-md-6&/div&
&!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 --&
&script src="/jquery/1.11.1/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="/twitter-bootstrap/3.2.0/js/bootstrap.min.js"&&/script&
&下面我们看下效果图
我们先看下堆叠状态（堆叠是由于可视区域小于分界点阈值，不在使用md的方案，但是你有没有定义除md外的其他方案，它就只能每个占一行了）下的效果吧（由于显示器高度不够，没有截图全，但是大家可以动手做下看看效果）。
&下面在来看下水平排列吧（可视区域大于分界点阈值，这样就正常显示了，达到了使用md方案的要求。为什么说正常显示？因为这里我们使用的md由于Bootstrap最多12列，我们数数md后面的数学，如果拼到了12，它们就组成一列）
【2】移动设备和桌面
从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*（小于768px屏幕的样式类）就派上用场了。
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8"&
&!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 --&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&Bootstrap-Template-03&/title&
&!-- 最新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="/twitter-bootstrap/3.2.0/css/bootstrap.min.css"&
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/html5shiv/3.7.2/html5shiv.min.js"&&/script&
&script src="/respond.js/1.4.2/respond.min.js"&&/script&
&![endif]--&
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
&div class="container"&
&h1&案例：移动设备和桌面&small&.col-xs-*和.col-md-*&/small&&/h1&
&div class="row show-grid"&
&div class="col-xs-12 col-md-8"&.col-xs-12 .col-md-8&/div&
&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&
&div class="row show-grid"&
&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&
&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&
&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&
&div class="row show-grid"&
&div class="col-xs-6"&.col-xs-6&/div&
&div class="col-xs-6"&.col-xs-6&/div&
&!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 --&
&script src="/jquery/1.11.1/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="/twitter-bootstrap/3.2.0/js/bootstrap.min.js"&&/script&
通过代码我们看到这里我们用到了2套方案（一个是md一个是xs），这2个方案不是同时起作用，它们是根据可视区域对比分界点阈值来判断的。
在可视区域很大的情况下是md起作用，xs不起作用，效果图如下
这时候我们算算起作用的md方案一行的数字吧
第一行：8和4的份比。
第二行：三个4平平均分成三份。
第三行：6和6虽然是大尺寸因为只有这一个样式，也是平均分成两份。
在可视区域很小的情况下是xs起作用，md不起作用，效果图如下
这时候我们算算起作用的xs方案一行的数字吧
第一行：两个元素分为12和6，而一行呢就是12份，所以第二个元素会进行换行，然后占据6份一半的位置。
第二行：3个6份。而一行呢就是12份。所以第三个元素会进行换行，然后占据6份一般的位置。
第三行：6和6正好12占一行。
=======================================================================================
了解了这么多，应该清楚了一个大概，如果你喜欢你的网站在各种设备上都能有一个很好的效果，估计你要把那4个方案都用上了，哈哈~~~
阅读(...) 评论()