twitter-bootstrap – 流体或固定网格系统,在响应式设计,基于Twi
|
我对
twitter bootstrap grid中的各种选项感到困惑，以及他们如何在一起。
首先，你可以有一个普通的固定容器，或一个容器流体。 然后，可以包括普通行或流体行，行流体。也就是说，你可以有一个固定的容器，一个流体行，或一个容器流体…一个固定的行？ 然后，除此之外，您可以包括“响应”媒体查询，或不包括。 我很困惑这些东西如何相互作用。但是让我们从一个明显的例子开始。 在the examples page本身，有一个作为一个例子，一个fixed grid和fluid grid 但是，在我的浏览器中，在该示例页面本身 – 两个网格行为相同。也许因为示例页面使用可选的响应式媒体查询？在两个网格示例中，如果我开始逐渐缩小我的浏览器窗口，网格元素不会逐渐变窄 – 一旦达到某个(响应)边界宽度，它们捕获到较小的大小，并再次在更大的边界宽度。但是普通的“固定”示例和“流动”示例在此处表现完全相同 – 所以什么是区别？ 解决方法
当你决定固定宽度和流体宽度之间时，你需要考虑你的ENTIRE页面。一般来说，你要选择一个或另一个，但不是两者。在您的问题中列出的示例实际上是在同一个固定宽度的页面。换句话说，脚手架页面正在使用固定宽度的布局。脚手架页面上的
fixed grid和
fluid grid不是示例，而是用于实现固定和流体宽度布局的文档。
适当的固定宽度示例为here。 当观察固定宽度示例时，当您的浏览器大于960像素宽时，您不应该看到内容更改大小。这是页面的最大(固定)宽度。固定宽度设计中的媒体查询将指定特定样式的最小宽度。当您缩小浏览器窗口并看到布局捕捉到不同的大小时，您会看到这个动作。 相反，流体宽度布局将总是伸展到适合您的浏览器窗口，无论它有多宽。媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比(而不是固定的像素数)。 “响应”媒体查询都准备好了。您只需要决定是否要为页面使用固定宽度或流体宽度布局。 以前，在bootstrap 2中，您必须在流体容器中使用行流，在固定容器中使用行。随着bootstrap 3的引入，行流体被删除，不再使用它。 编辑：根据评论，一些jsFiddles： > fluid non-responsive layout， 这些fiddles是完全无Bootstrap的，基于纯CSS媒体查询，这使得他们是一个很好的起点，任何人愿意制作类似的解决方案，而不使用Twitter Bootstrap。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |