原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
使用栅格系统布局网页
使用栅格系统布局网页
栅格系统是什么
栅格系统是Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统能做什么
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
row row即为行，用于在页面中创建一个或一组纵向堆叠的控件。注意：row必须包含container中。
如：
在浏览器中查看效果：
col-尺寸-所占宽度
在“行（row）”水平方向“列（column）”。
名称 对应设备 最大列宽度 xs 手机(768px) 自动(移动设备优先) sm 平板(=768px) 62px md 桌面显示器(=992px) 81px lg 大桌面显示器(=1200px) 97px
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
如：
大屏幕效果：
小屏幕效果：
若希望在小屏幕上显示相同效果，则需要同时使用针对小屏幕的类样式
如：
大屏幕效果：
小屏幕效果：
快速上手
使用栅格系统实现网页”国字型”布局
“国字型”网页布局，也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
创建Bootstrap基本文档结构
效果如下：
使用row类将网页分为三行，分别为头、中、底
效果如下：
将”中”行分为3列，左右对称比中间略小，中间最大
效果如下：
为兼容小屏幕设备，增加小屏幕类
小屏幕显示：
总结
栅格系统属于全局CSS样式模块，主要用于网页布局，包括支持不同设备显示且移动设备优先。本文只介绍了基本用法，除此之外还有列的偏移、嵌套等更为灵活的使用方式，具体请查看官方文档。
/
文档评论（0）