1、bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第三章 Bootstrap栅格系统1Bootstrap响应式网站开发 栅格系统的实现原理非常简单，仅仅是通过容器大小，平均分配12份，在调整内外边距，最后结合媒体查询，从而实现强大的响应式栅格系统。栅格系统把网页的总宽度平均分成12份，可以按份自由组合。有名的960Grid System（网址https:/960.gs/demo.html），它把960像素宽的区块切分成12栏，在视觉设计与网页排版时就按照所需要的大小对齐栏线，如图3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系
2、统的实现原理图3-1 960Grid 样例Bootstrap响应式网站开发网站应用栅格系统后页面效果如图3-2所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的实现原理a)b）图3-2 应用栅格系统布局网站的效果a)网站页面效果 b）网站上的栅格呈现Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行平分。12栅格系统是整个Bootstrap的核心
3、功能，也是响应式设计核心理念的一个实现形式。Bootstrap响应式网站开发栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，在内容中就可以放入这些创建好的布局中。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap 栅格系统的工作原理l“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的对齐方式（aligment）和内边距（padding）。l通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”
4、内，并且，只有“列（column）”可以作为行（row）”的直接子元素。l行使用样式.row，列使用样式“.col-*-*”，内容应当放置于列（column）内，这种预定义的类，可以用来快速创建栅格布局。例如：.col-md-4就表示占4列宽度。l通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过包含.row类的元素设置负值 margin 从而抵消掉为.container元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。l栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，四个等宽的列可以使
5、用三个.col-xs-3 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。Bootstrap响应式网站开发 Bootstrap3使用了4种栅格选项来形成栅格系统，这4种栅格选项的区别在于适合不同尺寸的屏幕设备，官网上Bootstrap的栅格参数如表3-1所示。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理 超小设备手机（768px）小型设备平板电脑（768px）中型设备台式电脑（992px）大型设备台式电脑（1200px）网格行为一直是水平的以折叠开始，断点以上是水平的
6、以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的.container最大容器宽度None(auto)750px970px1170pxClass前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px列的两侧分别 15px30px列的两侧分别 15px30px列的两侧分别 15px30px列的两侧分别 15px可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes表3-1 Bootstrap3的栅格参数Bootstrap响应式网站开发Bootstrap3的栅格设
7、置具体含义：l 手机（小于768px），class语句为：.col-xs-1.col-xs-12。l 平板（大于768px），class语句为：.col-sm-1.col-sm-12。l 一般计算计小型显示器（大于992px），class语句为：.col-md-1.col-md-12。l 一般计算计大型显示器（大于1200px），class语句为：.col-lg-1.col-lg-12。Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Boot
8、strap栅格系统原理演示，代码如下所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分之一）占3列（四分之一）占3列（四分之一）占3列（四分之一）【实例3-1】Bootstrap栅格系统原理演示page1page2Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理栅格系统的工作原理【实例3-1】Bootstrap栅格系统原理演示，代码如右所示。第1列第2列第3列第4列第5列第6列第7列第8列第9列第10列第11列第12列 占8列占4列 占6列一半占6列一半 占3列（四分
9、之一）占3列（四分之一）占3列（四分之一）占3列（四分之一）【实例3-1】Bootstrap栅格系统原理演示Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理在栅格系统中使用的各个样式类：.container左右各有15px的内边距，.row是column的容器，最多只能放入12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。.column左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。通过图3-3可以看出，本例的“”在屏幕照中水平居中，左右两
10、侧有同等留白，“.container”共包含了4个“”。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，例如，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备。图3-3bootstrap栅格布局演示效果运行【实例3-1】代码，页面效果如下图3-3所示。Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式栅格l当768px屏幕992px时，.container的宽度为750px。l当屏幕768px时，.container使用最大宽度，效果和.container-fluid一样。l当992px屏幕1200px时，.c
11、ontainer的宽度为970px。l当屏幕1200px时，.container的宽度为1170px。在栅格系统中，.container支持响应式设计，其在媒体查询样式进行了定义。针对不同的设备，container的宽度不同。运行“实例1”的页面效果，拖动浏览器改变浏览器的宽度，可以看到不同的效果。当屏幕992px后，所有的列变成从上到下依次排列，在浏览器的宽度为800px和600px呈现的效果是一样的，如图3-4所示。a)b）图3-4 应用栅格系统布局网站的效果a)宽度为800px时的页面效果 b）宽度为600px时的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Boo
12、tstrap栅格系统的原理在使用.col-md-*为类名时，*号表示占了多少列的宽度，例如：col-md-3表示该列占了12列中三列的宽度。col-md-为中等屏幕列的前缀。依次类推，还有col-xs-为超小屏幕（手机）列的前缀，col-sm-为小屏幕（平板电脑）列的前缀，col-lg-为大屏幕（大桌面显示器）列的前缀。栅格系统是向大兼容的，打开CSS文件夹下的“bootstrap.css”文件中的媒体查询源码如左下：media(min-width:768px).container width:750px;media(min-width:992px).container width:970px
13、;media(min-width:1200px).container width:1170px;所以，若想在不同设备上呈现一样的效果，可以针对同一行代码使用不同视口下的样式。例如，将如下代码：第1列 修改为：第1列，运行【实例3-2】代码，能够在不同视口下可以呈现同样的效果，效果如下所示。图3-5不同视口下呈现同样的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理也可以针对同一元素，添加不同的类来控制页面的呈现效果，实现响应式栅格。例如，编写如下的代码：A1依据规则，可以实现在手机屏幕上（小于768像素）为水平的100%显示，在平板屏幕上（7
14、68px屏幕992px）时呈现每行可放置2个元素，在PC屏幕上（992px屏幕1200px）时呈现每行可放置3个元素，在PC大屏幕上（1200px）时呈现每行可放置4个元素。divborder:1px solid#000000;background-color:#D4D4D4;A1A1A1A1【实例3-3】中的HTML代码【实例3-3】中的添加样式代码Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理运行【实例3-3】代码，能够在不同视口下可以呈现同样的效果，效果如图3-6所示。a)b)c)d)图3-6不同视口下呈现同样的页面效果a)1200px以上P
15、C呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理注意，如果如下代码中的文字多少不同时，页面将会呈现出高度不一的情况。例如，将第一个如下代码A1A1，bootstrap栅格系统，当文字过多时的页面呈现效果。修改为:原本的设计应该是在平板状态下，为两行，每行呈现两列，各占6个栅格，但在浏览时，页面效果如图3-7所示。图3-7在平板电脑上呈现的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理图3-7在平板电脑上呈现的
16、页面效果这样呈现出的结果是出乎意料的，这主要因为col都是采用的左浮动，第一个div的高度过高，所以第三个div直接漂浮到第一个div的右侧，而第四个div进入第三行。如果想让第三和第四个div在一行呈现，则需要清除浮动。解决这个问题，需要使用Bootstrap中提供的“.clearfix”样式。添加样式后的代码如左下：A1，bootstrap栅格系统，当文字过多时的页面呈现效果。A1A1A1只需要针对pad清除浮动，所以还需要visible-sm样式将其显示，页面效果如下图3-8所示。图3-8添加清除浮动后的页面效果Bootstrap响应式网站开发Bootstrap栅格系统-Bootstra
17、p栅格系统的原理响应式实用工具 为了更快地实现对移动设备的友好开放，Bootstrap提供了一套辅助类，使用这些工具类可以通过媒体查询相结合不同设备，实现内容的在不同设备上的显示与隐藏。目前，提供的响应式实用工具类如表3-2所示。响应式实用工具目前只适用于块和表切换。超小屏幕 手机(768px)小屏幕 平板(768px)中等屏幕 桌面(992px)大屏幕 桌面(1200px).visible-xs-*可见隐藏隐藏隐藏.visible-sm-*隐藏可见隐藏隐藏.visible-md-*隐藏隐藏可见隐藏.visible-lg-*隐藏隐藏隐藏可见.hidden-xs隐藏可见可见可见.hidden-s
18、m可见隐藏可见可见.hidden-md可见可见隐藏可见.hidden-lg可见可见可见隐藏表3-2 响应式实用工具类Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具 divborder:1px solid#000000;特别小型 在超小屏幕上可见小型 在小屏幕平板上可见中型 在中屏幕上可见大型 在大屏幕上可见【实例3-4】中的HTML代码【实例3-4】中的添加样式Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码，能够在不同视口下可以呈现同样的效果，效果如图3
19、-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现Bootstrap响应式网站开发Bootstrap栅格系统-Bootstrap栅格系统的原理响应式实用工具运行【实例3-4】代码，能够在不同视口下可以呈现同样的效果，效果如图3-9所示。a)b)c)d)图3-9不同视口下呈现同样的页面效果a)1200px以上PC呈现 b）992px以上PC呈现 c）768px以上平板呈现 d）768px以下手机呈现bootstrapbootstrap响 应 式 网 站 开 发响 应 式 网 站 开 发第三章 Bootstrap栅格系统
