流体或固定网格系统,采用响应式设计,基于Twitter Bootstrap

Question

我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑.

首先,你可以有一个普通的固定container,或者container-fluid.

然后,任何一个都可以包括普通row行或流体行row-fluid.也就是说,你可以拥有一个带有流体排的固定容器,或一个带有固定排的容器流体......

然后,您可以在其中包含"响应式"媒体查询.

我对这些事情如何相互作用感到困惑.但让我们从一个明显的例子开始.

在示例页面本身,有一个固定网格和流体网格的例子

但是,在我的浏览器中,在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用可选的响应式媒体查询？在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,则网格元素不会逐渐变窄 - 一旦达到某个(响应性)边界宽度,它们会捕捉到更小的尺寸,并再次在更大的边界宽度处.但是普通的"固定"示例和"流动"示例在这里表现完全相同 - 那么差异究竟是什么呢？

Answer 1

当您决定固定宽度和流体宽度时,您需要根据您的整个页面进行思考.通常,您想要选择其中一个,但不是两个.您在问题中列出的示例实际上是在相同的固定宽度页面中.换句话说,Scaffolding页面使用固定宽度的布局.在定格和流体格的脚手架页上不意味着是实例,而用于实现固定和流体宽度布局的文档.

适当的固定宽度示例在这里.适当的流体宽度示例在这里.

观察固定宽度示例时,如果浏览器宽度超过960px,则不应看到内容更改大小.这是页面的最大(固定)宽度.固定宽度设计中的媒体查询将指定特定样式的最小宽度.当您缩小浏览器窗口并看到布局捕捉到不同大小时,您将看到这一点.

相反,流体宽度布局将始终拉伸以适合您的浏览器窗口,无论它有多宽.媒体查询指示样式何时更改,但容器的宽度始终是浏览器窗口的百分比(而不是固定数量的像素).

"响应式"媒体查询已准备就绪.您只需要决定是否要为页面使用固定宽度或流体宽度布局.

以前,在bootstrap 2中,您必须row-fluid在流体容器row内部和固定容器内使用.随着bootstrap 3的引入,row-fluid被删除,不再使用它.

编辑:根据评论,一些jsFiddles:

• 流畅的无响应布局,
• 流体响应布局,
• 修复无响应布局,
• 固定响应式布局.

这些小提琴完全没有Bootstrap,基于纯CSS媒体查询,对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说,这是一个很好的起点.

Answer 2

有趣的讨论.我也问自己这个问题.流体和固定之间的主要区别在于,固定布局在网站(视口)的整个布局方面具有固定的宽度.如果您有一个960px宽度的视口,则每个列都有一个固定的宽度,永远不会改变.

流体布局表现不同.想象一下,您已将主布局的宽度设置为100%宽度.现在每个列只会计算它的相对大小(即25%)和streches,因为浏览器将调整大小.因此,根据您的布局目的,您可以选择布局的行为方式.

这是一篇关于流体与柔韧的好文章.

Answer 3

来源 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

优点

• 固定宽度布局更易于使用,并且在设计方面更易于定制.
• 每个浏览器的宽度都相同,因此图像,表单,视频和其他固定宽度的内容的麻烦更少.
• 不需要min-width或max-width,但是每个浏览器都不支持.
• 即使网站设计为与最小屏幕分辨率(800×600)兼容,内容仍然足够宽,分辨率更高,易于辨认.

缺点

• 固定宽度的布局可能会为屏幕分辨率较高的用户创造过多的空白区域,从而扰乱"神圣比例","三分法则",整体平衡和其他设计原则.
• 较小的屏幕分辨率可能需要水平滚动条,具体取决于固定布局的宽度.
• 需要无缝纹理,图案和图像延续以适应具有更大分辨率的那些.
• 固定宽度布局在可用性方面通常具有较低的总分.

Answer 4

Bootstrap 3中的流体布局.

与Boostrap 2不同,Bootstrap 3没有.container-fluid mixin来制造流体容器..container是固定宽度响应网格布局.在大屏幕中,一个网页内容的两侧都有过多的空白区域.

container-fluid 在Bootstrap 3.1中添加回来

流体网格布局使用所有屏幕宽度,并在大屏幕中更好地工作.事实证明,使用Bootstrap 3 mixins创建流畅的网格布局很容易.以下行生成流体响应网格布局:

.container固定;

.container-fixed mixin将内容设置为屏幕中心并添加填充.它没有指定固定的页面宽度.

另一种方法是使用Eric Flowers的CSS风格

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}