本篇主要包括：
■ Grid简介
■ 应用Grid
■ Multiple Grids
Grid简介
Bootstrap中，把页面分成12等份，这就是所谓的Grid。
立即学习“前端免费学习笔记（深入）”；
在Bootstrap中，用类名控制，这些类型遵循”.col-xx-6″类似的形式。
2个6就占满整个页面。所以，类名最后面的数字表示要占几个格子。
又比如，3个4也占满整个页面。
又比如，4个3也占满整个页面。
又比如，6个2也占满整个页面。
另外，类似”.col-xx-10 .col-xx-offset-2″这样的类名，offset表示偏移，2表示向右偏移2个单元格。
以上值得注意的是：在倒数第二行，当把”.col–xx-3″放在”.col-xx-3 .col-xx-offset-2″之后的时候，由于超过了12个单元格的大小，”.col–xx-3″会自动跑到下一行的最开头。
应用Grid
id为body的section如何应用Grid呢？
→在index.html中，给id为body的section加上class=”container”属性
→给id为main的section加上class=”col-md-8″属性
→给id为sidebar的section加上class=”col-md-4″属性
如何让header和footer部分也应用Grid呢？
→去掉id为page的div的class=”container”属性，变为：
→给header加上class=”container”属性，变为：
→给footer加上class=”container”属性，变为：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3092312.html
