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

Question

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

我选择了网格系统，获得了自定义的Bootstrap版本。 但是，当我将生成的CSS添加到我的应用程序中时，所有样式都混乱了（标题，链接和其他元素）。 为什么会发生这种情况？ 如何获取只有网格系统的Bootstrap CSS？ 我想避免手动修改Bootstrap文件。

- Manuel Zapata

Answer 1

打开http://getbootstrap.com/customize/，切换到你所需要的BS3框架，然后点击“编译和下载”，你将得到你选择的CSS和JS。

打开CSS文件并移除一切内容，只保留网格(grid)。他们还包括了一些normalize的东西。你需要调整你网站上所有的样式为box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

- Christina

---

谢谢Christina。我本来期望有一种方法可以仅获取网格样式。 - Manuel Zapata

不，它们也会下载支持文件normalize和scaffolding.less（其中包括全局的border-box），这需要你调整所有具有padding的东西。例如，以前你的框有10像素的padding，总共是200像素，但里面只有180像素，所以你必须将宽度设置为180像素，现在你可以将宽度设置为200像素或什么都不设置，并将其放入一个grid列类中。 - Christina

box-sizing 重置信息：http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ 和 http://www.paulirish.com/2012/box-sizing-border-box-ftw/ - Costa

有没有一种方法可以自定义SASS文件？ - KevinAdu

@rab normalize.css是用于改善跨浏览器渲染的，来源http://getbootstrap.com/css/ - Ananda

Answer 2

请查看zirafa/bootstrap-grid-only。它只包含您需要的bootstrap网格和响应式实用工具（没有重置或任何其他内容），并简化了直接使用LESS文件的复杂性。

- burrbrown

---

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

Answer 3

只需选择网格系统和“响应式实用工具”，您就可以得到这个：http://jsfiddle.net/7LVzs/

- Jmorvan

Answer 4

使用Grunt构建仅包含Bootstrap3.3.5网格的内容：

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

压缩后大小约为10KB。

如果需要引入Bootstrap的其他部分，请在/src/less/bootstrap.less中添加。

- horgen

Answer 5

我建议使用MDO的http://getpreboot.com/。从v2开始，preboot会向后移植用于创建Bootstrap 3.0网格系统的LESS mixin / variable，并且比使用CSS生成器更加轻量级。实际上，如果您只包含preboot.less，则没有开销，因为整个文件由mixin / variables组成，因此仅在预编译中使用，而不是最终输出。

- srquinn

Answer 6

现在看起来你可以在Bootstrap 4的新下载功能中仅下载网格。

- Richard Clifford

Answer 7

这个问题已经被问了一段时间，但现在也许你可以完全放弃Bootstrap并使用CSS Grid！（它更简单、更整洁、更灵活和更快）。看看这篇很棒的文章：停止使用Bootstrap-为基于组件的UI创建实用的CSS Grid模板

- Alex Firebrand

Answer 8

在 Bootstrap 4 中，它们的 GitHub 上已经有了分离的文件。您可以在这里找到它们。

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

- Hari Das