如何从 Bootstrap 3 中获取响应式网格？

Posted 2023-03-05

【中文标题】如何从 Bootstrap 3 中获取响应式网格？

【英文标题】：How to get just the responsive grid from Bootstrap 3?

【发布时间】：2013-12-22 14:19:27

【问题描述】：

我需要使用 Twitter Bootstrap 向我的 Web 应用程序添加响应式设计功能。我只想要响应行为，我对 Bootstrap 中包含的排版、组件或任何其他内容不感兴趣。

我得到了一个customized Bootstrap version，只是选择了网格系统。但是，当我将生成的 CSS 添加到我的应用程序时，我所有的样式都搞砸了（标题、链接和其他）。为什么会这样？如何仅使用网格系统获得 Bootstrap CSS？我想避免手动修改 Bootstrap 文件。

【参考方案1】：

在 Bootstrap 4 中，它们的 GitHub 中已经有单独的文件。你可以在这里找到它们

https://github.com/twbs/bootstrap/tree/main/dist/css

【参考方案2】：

问这个问题已经有一段时间了，但也许现在你可以完全放弃 Bootstrap 并使用 CSS Grid！ （它更简单、更整洁、更灵活、更快）。看到这篇很酷的文章：Stop using Bootstrap — create a practical CSS Grid template for your component based UI

【参考方案3】：

您现在似乎可以在 Bootstrap 4s 的新下载功能上只下载网格。

【参考方案4】：

仅使用 Bootstrap 3.3.5 网格进行 Grunt 构建：

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~10KB 最小化。

如果您需要 Bootstrap 的其他部分，只需将它们包含在 /src/less/bootstrap.less 中。

【参考方案5】：

结帐zirafa/bootstrap-grid-only。它仅包含您需要的 引导网格 和 响应实用程序（无需重置或任何东西），并简化了直接使用 复杂性 strong>LESS 文件。

【讨论】：

我引用这个 GIT 的描述： 不包括的内容：几乎所有其他内容。这真的取决于你。没有样式，没有 javascript - 甚至没有 CSS 重置。

【参考方案6】：

我建议改用 MDO 的 http://getpreboot.com/。从 v2 开始，preboot 向后移植了用于创建 Bootstrap 3.0 网格系统的 LESS 混合/变量，并且比使用 CSS 生成器轻得多。事实上，如果你只包含preboot.less，则不会产生任何开销，因为整个文件是由混合/变量组成的，因此仅用于预编译而不是最终输出。

【参考方案7】：

转到http://getbootstrap.com/customize/ 并从 BS3 框架中切换您想要的内容，然后单击“编译和下载”，您将获得您选择的 CSS 和 JS。

打开 CSS 并删除除网格之外的所有内容。它们也包括一些规范化的东西。您需要将网站上的所有样式调整为 box-sizing：border-box - http://www.w3schools.com/cs-s-ref/css3_pr_box-sizing.asp

【讨论】：

谢谢克里斯蒂娜。我期待有一种方法可以获得网格样式。

不，他们还下载支持的东西，规范化和脚手架.less（具有全局边框），这需要你调整所有有填充的东西。比如之前你的 box 有 10px 的 padding，总共是 200px，但是里面是 180px，所以你必须将宽度设置为 180px，现在你将宽度设置为 200px 或者什么都不设置，并将其粘贴到网格列类中。跨度>

box-sizing 重置信息：css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw

还有 normalize.css

@rab - 答案中提到了。如果你想删除它，但它很有用。

【参考方案8】：

只需选择Grid system 和“响应式实用程序” 它给了你这个：http://jsfiddle.net/7LVzs/