twitter-bootstrap – 流体或固定网格系统,在响应式设计,基于Twitter Bootstrap

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 流体或固定网格系统,在响应式设计,基于Twitter Bootstrap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我对 twitter bootstrap grid中的各种选项感到困惑,以及他们如何在一起。

首先,你可以有一个普通的固定容器,或一个容器流体。

然后,可以包括普通行或流体行,行流体。也就是说,你可以有一个固定的容器,一个流体行,或一个容器流体…一个固定的行?

然后,除此之外,您可以包括“响应”媒体查询,或不包括

我很困惑这些东西如何相互作用。但是让我们从一个明显的例子开始。

the examples page本身,有一个作为一个例子,一个fixed gridfluid grid

但是,在我的浏览器中,在该示例页面本身 – 两个网格行为相同。也许因为示例页面使用可选的响应式媒体查询?在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,网格元素不会逐渐变窄 – 一旦达到某个(响应)边界宽度,它们捕获到较小的大小,并再次在更大的边界宽度。但是普通的“固定”示例和“流动”示例在此处表现完全相同 – 所以什么是区别?

解决方法

当你决定固定宽度和流体宽度之间时,你需要考虑你的ENTIRE页面。一般来说,你要选择一个或另一个,但不是两者。在您的问题中列出的示例实际上是在同一个固定宽度的页面。换句话说,脚手架页面正在使用固定宽度的布局。脚手架页面上的 fixed gridfluid grid不是示例,而是用于实现固定和流体宽度布局的文档。

适当的固定宽度示例为here
适当的流体宽度示例为here

当观察固定宽度示例时,当您的浏览器大于960像素宽时,您不应该看到内容更改大小。这是页面的最大(固定)宽度。固定宽度设计中的媒体查询将指定特定样式的最小宽度。当您缩小浏览器窗口并看到布局捕捉到不同的大小时,您会看到这个动作。

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

“响应”媒体查询都准备好了。您只需要决定是否要为页面使用固定宽度或流体宽度布局。

以前,在bootstrap 2中,您必须在流体容器中使用行流,在固定容器中使用行。随着bootstrap 3的引入,行流体被删除,不再使用它。

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

> fluid non-responsive layout
> fluid responsive layout
> fixed non-responsive layout
> fixed responsive layout

这些fiddles是完全无Bootstrap的,基于纯CSS媒体查询,这使得他们是一个很好的起点,任何人愿意制作类似的解决方案,而不使用Twitter Bootstrap。

原文链接:https://www.f2er.com/bootstrap/235195.html

猜你在找的Bootstrap相关文章