BootStrap格栅系统

最新推荐文章于 2024-10-13 17:45:47 发布

原创最新推荐文章于 2024-10-13 17:45:47 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Bootstrap栅格系统的布局原理及使用方法，包括不同屏幕尺寸下的响应式设计、列的排列与组合、自适应图片样式及按钮样式等。通过实例代码展示了如何实现灵活的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

格栅参数分为
超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是
实例代码：
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
这一行是大屏幕的样式后面的6是占据的格子数量
格子的数量一行总数是12 那么这个能放连个然而可以在这个样式中追加（并集选择器）
例如（代码）：
<div class="row">
<div class="col-md-6 col-sm-12">.col-md-6</div>
<div class="col-md-6 col-sm-12">.col-md-6</div>
</div>
该段落代码后方的class 添加是为了自动适应较小屏幕类似于column的排列方式

图片的自适应样式类为：img-responsive

按钮的样式
<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>

col-md-offset-8 位移列数

更多样式尽在V3.bootstrap.com