第三篇Bootstrap网格基础

站长资源 2025/1/17 佚名

30 1538 30

DDR爱好者之家 Design By 杰米

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里，可以是div,内容放置在列内，网页设计中的网格用于布局内容，让网站易于浏览，下面是一个用bootstrap网格布局的例子。

<div>
<div>col2</div>
<div>col10</div>
</div>

显示效果如下:

加了Class=”row”的样式表示行，加了class=”col-sm-2”的样式表示列，系统将整个屏幕分为12份，col-sm-2表示该列跨2份，col-sm-10比表示该列跨10份。显示的效果就会如上图所示，表示一行两列，第一列占2份，第二列占10份。

bootstrap是一个响应式的前端框架，体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示：

<div class="row">   
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-个4</div> 
</div>

Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列，第一列占8份，第二列占4份，在平板电脑下一行两列，第一列占12份，第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。

下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的

以上所述是小编给大家介绍的第三篇Bootstrap网格基础的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

bootstrap网格

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“第三篇Bootstrap网格基础”

暂无评论...

第三篇Bootstrap网格基础

第四篇Bootstrap网格系统偏移列和嵌套列

Bootstrap三种表单布局的使用方法

评论“第三篇Bootstrap网格基础”

更新日志

友情链接