Bootstrap---Fluid layout 流布局

最新推荐文章于 2024-03-12 20:16:50 发布

转载最新推荐文章于 2024-03-12 20:16:50 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/nly/blog/306505

本文深入探讨了流布局的概念，一种使网页元素自适应不同屏幕尺寸的设计方法。通过使用百分比而非固定宽度，流布局能够确保内容在手机、平板等设备上保持良好的视觉效果。文章详细介绍了如何利用HTML和CSS实现流布局，包括container-fluid和row-fluid类的作用。

流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。

</div>

</div>

按顺序添加这几个类。最外面包含块有 container-fluid类，表明内容布局是流布局，其主要作用是作为一个包含块来容纳流布局内容。里面包含块的内容有 row-fluid类（非常重要），决定是否是流布局。然后里面的内容块代码编写与网格系统一致，依然是从col-md-21到col-md-12，分别对应于不同的百分比。

转载于:https://my.oschina.net/nly/blog/306505