bootstrap 栅格系统案例.pdfVIP

bootstrap 栅格系统案例 栅格选项 通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动 设 上面进行工作的。 从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕 （包括手机、平板、PC等 等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理 解：如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选 择最合适 （匹配最理想的）的样式类。简单的举例进行说明：比如在一个元素上我们 使用了两个样式类：.col-md-和.col-lg。可以对照上面的截图来看 第一种情况：尺寸》=1200px;那么会选择.col-lg。 第二种情况：尺寸》=992px 并且尺寸 《=1200px;那么会选择.col-md。 第三种情况如果尺寸 《992px;那么这两个样式类都将不会作用于元素上。 从堆叠到水平排列 栅格选项中的四个样式类的使用都是依附于.row类的基础上，而.row类通常都会 在.container的里进行。 代码如下： div class=container div class=row div class=col-md-1/div /div /div 就是在合适的容器中使⽤合适的样式类。 使⽤单⼀的⼀组.col-md-*栅格class，你就可以创建⼀个基本的栅格系统，在 机和平 板设备上⼀开始是堆叠在⼀起的 （超⼩屏幕到⼩屏幕这⼀范围），在桌⾯ （中等）屏 幕设备上变为⽔平排列。将列(col-*-*)放置于任何.row内即可。 代码如下： div class=container div class=header h1案例:从堆叠到⽔平排列/h1 /div div class=row divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div divclass=col-md-1.col-md-1/div /div h1/h1 divclass=row divclass=col-md-8.col-md-8/div divclass=col-md-4.col-md-4/div /div h1/h1 divclass=row divclass=col-md-4.col-md-4/div divclass=col-md-4.col-md-4/div divclass=col-md-4.col-md-4/div /div h1/h1 divclass=row divclass=col-md-6.col-md-6/div divclass=col-md-6.col-md-6/div /div /div 可以通过控制浏览器的宽度查看堆叠和水平排列的效果 很明显这就是堆叠的效果，就是将浏览器的宽度调为比较小的时候。 现在便是水平排列。将浏览器的宽度调为稍宽之后。你也可以使用其他三个类进行测 试效果。 移动设 和桌面 从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆 叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。 那么我们的.col-xs-* （小于76 px屏幕的样式类）就派上用场了。 代码如下： div class=header h1案例:移动设备和桌⾯/h1 /div div class=row div class=col-xs-1 col-md-8.col-xs-1 .col-md-8/div div class=col-xs-6 col-md-4.col-xs-6 .col-md-4/div /div h1/h1 div class=row div class=col-xs-6 col-md-4.col-xs-6 .col-md-4/div div class=c