使用栅格系统布局网页

《使用栅格系统布局网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、http://web.mybdqn.com/使用栅格系统布局网页栅格系统是什么栅格系统是Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。栅格系统能做什么栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的预定义类1.rowrow即为行，用于在页面中创建一个或一组纵向堆叠的控件。注意：row必须

2、包含container中。如：在浏览器中查看效果：col-尺寸-所占宽度在“行（row）”中可以添加一组水平方向的“列（column）”。为适应不同尺寸的屏幕，Bootstrap定义了四种列的尺寸以保证在不同设备上显示效果不变:名称对应设备最大列宽度xs手机(<768px)自动(移动设备优先)sm平板(>=768px)62pxmd桌面显示器(>=992px)81pxlg大桌面显示器(>=1200px)97pxhttp://web.mybdqn.com/栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的

3、列可以使用三个.col-xs-4来创建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。如：大屏幕效果：小屏幕效果：若希望在小屏幕上显示相同效果，则需要同时使用针对小屏幕的类样式如：大屏幕效果：http://web.mybdqn.com/小屏幕效果：快速上手使用栅格系统实现网页”国字型”布局“国字型”网页布局，也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内

4、容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。1.创建Bootstrap基本文档结构效果如下：2.使用row类将网页分为三行，分别为头、中、底http://web.mybdqn.com/效果如下：1.将”中”行分为3列，左右对称比中间略小，中间最大效果如下：http://web.mybdqn.com/1.为兼容小屏幕设备，增加小屏幕类小屏幕显示：总结栅格系统属于全局CSS样式模块，主要用于网页布局，包括支持不同设备显示且移动设备

5、优先。本文只介绍了基本用法，除此之外还有列的偏移、嵌套等更为灵活的使用方式，具体请查看官方文档。