Bootstrap 3默认是否真的响应?

时间:2014-02-11 06:41:38

标签: responsive-design twitter-bootstrap-3

我需要使用bootstrap 3和其他网络技术(如angular等)创建一个新的应用程序小部件。我知道新版本的bootstrap是响应式的。阅读文档后我的理解是,我将创建的小部件将自动响应。我不需要做任何特别的事情来使它具有响应性。但是,如果我想让它无响应,那么我需要进行必要的更改以禁用bootstrap 3的这个功能。

能不能让我知道我对Bootstrap在这方面的理解是否正确?

2 个答案:

答案 0 :(得分:3)

我认为这有助于您更多地了解Bootstrap。

您提到“我将创建的小部件将自动响应”。但是如果你不在你的小部件中应用Bootstrap CSS规则,即使它在Bootstrap模板内也不会响应。

我们必须在我们的设计中应用Bootstrap CSS规则才能生效并做出响应。如果您不希望特定元素具有响应性,请在您想要的断点上应用您自己的CSS规则或媒体查询...

Bootstrap CSS的链接http://getbootstrap.com/css/

希望这会对你有所帮助。干杯! (='。'=)

答案 1 :(得分:1)

这就是你需要做的所有事情:

禁用页面响应的步骤 省略CSS文档中提到的视口 使用单个宽度覆盖每个网格层的.container上的宽度,例如width:970px!important;确保这是在默认的Bootstrap CSS之后。您可以选择使用媒体查询或某些selector-fu来避免使用!important。 如果使用导航栏,请删除所有导航栏折叠和展开行为。 对于网格布局,请使用.col-xs- *类作为中/大类的补充或替代。不用担心,超小设备网格可以扩展到所有分辨率。 你仍然需要针对IE8的Respond.js(因为我们的媒体查询仍在那里,需要处理)。这会禁用Bootstrap的“移动站点”方面。

禁用响应功能的Bootstrap模板 我们已将这些步骤应用于示例。阅读其源代码以查看已实施的具体更改。

无响应模板:http://getbootstrap.com/examples/non-responsive/