《使用栅格系统布局网页.doc》由会员分享，可在线阅读，更多相关《使用栅格系统布局网页.doc（5页珍藏版）》请在金锄头文库上搜索。
1、http:/ 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统能做什么栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的预定义类1. rowrow即为行，用于在页面中创建一个或一组纵向堆叠的控件。注意：row必须包含container中。如：在浏览器中查看效果：col-尺寸-所占宽度在“行（row）”中可以添加一组水平方向的“列（column）”。为适应不同尺寸的屏幕，
2、Bootstrap定义了四种列的尺寸以保证在不同设备上显示效果不变:名称对应设备最大列宽度xs手机(=768px)62pxmd桌面显示器(=992px)81pxlg大桌面显示器(=1200px)97px栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。如：大屏幕效果：小屏幕效果：若希望在小屏幕上显示相同效果，则需要同时使用针对小屏幕的类样式如：大屏幕效果：小屏幕效果：快速上手使用栅格系统实现网页”
3、国字型”布局“国字型”网页布局，也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。1. 创建Bootstrap基本文档结构效果如下：2. 使用row类将网页分为三行，分别为头、中、底效果如下：3. 将”中”行分为3列，左右对称比中间略小，中间最大效果如下：4. 为兼容小屏幕设备，增加小屏幕类小屏幕显示：总结栅格系统属于全局CSS样式模块，主要用于网页布局，包括支持不同设备显示且移动设备优先。本文只介绍了基本用法，除此之外还有列的偏移、嵌套等更为灵活的使用方式，具体请查看官方文档。
