Bootstrap2用户指南
2.3.1 HTML代码
阅读(

Bootstrap基础

Bootstrap框架

全局样式

默认栅格系统

流式栅格系统

Bootstrap的默认栅格系统没有启用响应式布局,如果加入响应式布局的CSS文件bootstrap-responsive.css,栅格系统会自动根据视口(viewport)宽度,在 724px 到 1170px 进行动态调整。当视口宽度小于 767px 时,这些列将采用流式布局,并在垂直方向堆叠。

流式栅格系统对每一列的宽度定义使用百分比,而不是像素。流式网格系统与固定网格系统一样都具有响应能力,这就保证它能对不同的分辨率和设备做出适当的调整。流式栅格系统如图 2‑4所示:

Bootstrap流式栅格系统
图2-4 Bootstrap流式栅格系统

HTML代码

只要把某一行的 .row 改为 .row-fluid,就能让任何一行“流动”起来。考虑到流式栅格与固定栅格之间的自由切换,默认栅格系统和流式栅格系统中的列,使用的类是相同的。

流式栅格也包含 12 列,所以 .span* 中的 * 加起来也必须等于 12(或者等于其父容器的栅格数)。如:

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验