如何仅从Bootstrap 3获取响应式网格?


109

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

我仅选择网格系统就获得了定制的Bootstrap版本。但是,当我将生成的CSS添加到应用程序中时,我的所有样式(标题,链接和其他样式)都被弄乱了。为什么会这样呢?如何仅使用网格系统获得Bootstrap CSS?我想避免手动修改Bootstrap文件。

Answers:


159

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

引导程序定制器

打开CSS并删除除网格以外的所有内容。它们也包括一些规范化的东西。而且,您需要将网站上的所有样式调整为框调整大小:border-box- http : //www.w3schools.com/cssref/css3_pr_box-sizing.asp


谢谢克里斯蒂娜。我期望有一种方法可以只获取网格样式。
Manuel Zapata 2013年

8
不,他们还下载了支持内容,规范化和scaffolding.less(具有全局边框),这需要您调整所有具有填充的内容。例如,在框具有10px的填充并且总宽度为200px之前,而内部为180px,因此必须将宽度设置为180px,现在将宽度设置为200px或什么也没有,然后将其粘贴在网格列类中。
克里斯蒂娜


仍然具有normalize.css
rab

@rab-在答案中提到。如果需要,可以将其删除,但这很有用。
克里斯蒂娜

17

仅签出zirafa / bootstrap-grid。它仅包含您需要的引导网格响应实用程序(无需重设或进行任何操作),并简化了直接使用LESS文件复杂性




1

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




0

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

https://github.com/twbs/bootstrap/tree/main/dist/css
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.