Bootstrap 流式栅格系统

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

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

图2-4 Bootstrap流式栅格系统

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

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

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

关于作者

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

Bootstrap 流式栅格系统相关推荐

Bootstrap框架之栅格系统
一.简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
Bootstrap 流式布局
同理,将Bootstrap的流式栅格放到 class="container-ﬂuid" 的流式容器中,即可创建流式布局.流式布局将填满整个视口宽度.如: <div class ...
PaddleSpeech 流式语音合成系统 PP-TTS
(以下内容搬运自 PaddleSpeech) PP-TTS 1. 简介 2. 特性 3. Benchmark 4. 效果展示 5. 使用教程 5.1 模型训练与推理优化 5.2 语音合成特色应用 5. ...
GitHub 3.1K，业界首个流式语音合成系统开源！
智能语音技术已经在生活中随处可见,常见的智能应用助手.语音播报.近年来火热的虚拟数字人,这些都有着智能语音技术的身影.智能语音是由语音识别,语音合成,自然语言处理等诸多技术组成的综合型技术,对开发者要 ...
GitHub 3.1K，业界首个流式语音合成系统开源
本文已在飞桨公众号发布,查看链接戳: GitHub 3.1K,业界首个流式语音合成系统开源! 智能语音技术已经在生活中随处可见,常见的智能应用助手.语音播报.近年来火热的虚拟数字人,这些都有着智能语音 ...
Bootstrap系列之栅格系统
文章の目录 1.栅格选项 2.自动布局列 2.1.等宽 2.2.等宽多行 2.3.设置一个列宽 2.4.可变宽度的内容 3.响应类 3.1.所有断点 3.2.向水平方向堆叠 3.3.混合搭配 3.4. ...
PaddleSpeech 流式语音识别系统 PP-ASR
(以下内容搬运自 PaddleSpeech) PP-ASR 目录 1. 简介 2. 特点 3. 使用教程 3.1 预训练模型 3.2 模型训练 3.3 模型推理 3.4 服务部署 3.5 支持个性化场 ...
Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
Bootrap是web前端CSS框架.它是基于css3和html5开发的,,它在jquery基础上进行完善.形成自己的风格,并兼容大部分的Jquery插件. bootstrap现有第四版.变化从Les ...

Bootstrap 流式栅格系统

Bootstrap 流式栅格系统相关推荐

最新文章

热门文章