如何将 Twitter Bootstrap 3 用于无响应站点? [英] How to use Twitter Bootstrap 3 for non-responsive site?

问题描述

正如您在他们的页面上看到的，新的 Bootstrap 3 是移动优先":

<块引用>

在 Bootstrap 2 中，我们为键添加了可选的移动友好样式框架的各个方面.使用 Bootstrap 3，我们重写了项目从一开始就对移动设备友好.而不是添加可选的移动样式，它们已经融入核心.在事实上，Bootstrap 是移动优先的.可以找到移动优先样式在整个库中，而不是在单独的文件中.

如何禁用响应能力?我希望我的网站不会为平板电脑或手机重新排列.

解决方案

有关更多解释的过程，请参阅 如何将 Twitter Bootstrap 3 用于非响应站点

来自 Bootstrap 文档(加上一些解释):

<块引用>

要禁用响应式功能，请按照以下步骤操作.看到它在行动在下面修改后的模板中.

1) 移除(或只是不添加)CSS 文档中提到的视口

不言自明

<块引用>

2) 删除所有网格层的 .container 上的最大宽度最大宽度:无！重要；并设置像宽度这样的常规宽度:970px;.确保这是在默认 Bootstrap CSS 之后.你可以选择避免 !important 与媒体查询或一些选择器-fu.

添加此样式:

.container{最大宽度:无！重要；宽度:970px；}

<块引用>

3) 如果使用 navbars，撤消所有导航栏的折叠和展开行为(这里展示的太多了，所以看一下例子).

打开variables.less并设置变量:

@grid-float-breakpoint 到 0

@screen-xs-max 到 0(这将被修复；阅读 这里)

<块引用>

4) 对于网格布局，除了 或 之外，使用 .col-xs-* 类代替中/大的.别担心，超小型设备网格可缩放至所有分辨率，因此您已设置好.

不言自明

<块引用>

您仍然需要为 IE8 使用 Respond.js(因为我们的媒体查询是仍然在那里，需要被捡起).这只是禁用移动站点"的 Bootstrap.

As you can read on their page, the new Bootstrap 3 is "mobile first":

With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

How can I disable the responsiveness? I want that my site will not rearrange itself for tablet or mobile.

解决方案

For a more explained procedure see How to use Twitter Bootstrap 3 for non-responsive site

From Bootstrap documentation (plus some explanations):

To disable responsive features, follow these steps. See it in action in the modified template below.

1) Remove (or just don't add) the viewport <meta> mentioned in the CSS docs

self-explanatory

2) Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.

Add this style:

.container{
  max-width: none !important;
  width: 970px;
}

3) If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).

Open variables.less and set the variables:

@grid-float-breakpoint to 0

@screen-xs-max to 0 (this will be fixed; read here)

4) For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

self-explanatory

You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

这篇关于如何将 Twitter Bootstrap 3 用于无响应站点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！