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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20403443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:22:15  来源:igfitidea点击:

How to get just the responsive grid from Bootstrap 3?

htmlcsstwitter-bootstrapresponsive-design

提问by Manuel Zapata

I need to add responsive design features to my web application using Twitter Bootstrap. I just want the responsive behavior, I'm not interested in the typography, components or any other stuff included in Bootstrap.

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

I got a customized Bootstrap versionjust selecting the grid system. However, when I add the generated CSS to my application, all my styles are messed up (header, links and others). Why is that happening? How can I get a Bootstrap CSS with just the grid system? I would like to avoid a manual modification of the Bootstrap files.

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

回答by Christina

Go to http://getbootstrap.com/customize/and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose.

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

Bootstrap Customizer

Bootstrap 定制器

Open up the CSS and remove all but the grid. They include some normalize stuff too. And you'll need to adjust all the styles on your site to box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

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

回答by burrbrown

Checkout zirafa/bootstrap-grid-only. It contains only the bootstrap gridand responsive utilitiesthat you need (no reset or anything), and simplifies the complexityof working directly with the LESS files.

结帐zirafa/bootstrap-grid-only。它仅包含您需要的引导程序网格响应式实用程序(无需重置或任何其他内容),并简化了直接使用LESS 文件复杂性

回答by Jmorvan

Just choose Grid systemand "responsive utilities" it gives you this: http://jsfiddle.net/7LVzs/

只需选择Grid system“响应式实用程序”,它就会为您提供:http: //jsfiddle.net/7LVzs/

回答by horgen

Made a Grunt build with the Bootstrap 3.3.5 grid only:

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

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

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

~10KB minimized.

~10KB 最小化。

If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.

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

回答by Richard Clifford

It looks like you can download just the grid now on Bootstrap 4s new download features.

看起来您现在可以在 Bootstrap 4s 新下载功能上下载网格。

回答by srquinn

I would suggest using MDO's http://getpreboot.com/instead. As of v2, prebootback ports the LESS mixins/variables used to create the Bootstrap 3.0 Grid System and is much more light weight than using the CSS generator. In fact, if you only include preboot.lessthere is NO overhead because the entire file is made up of mixins/variables and therefore are only used in pre-compilation and not the final output.

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

回答by Alex Firebrand

It's been a while since this question was asked, but maybe now you can forego Bootstrap altogether and use CSS Grid! (it's simpler, neater, more flexible and faster). See this cool article: Stop using Bootstrap?—?create a practical CSS Grid template for your component based UI

自从提出这个问题已经有一段时间了,但也许现在您可以完全放弃 Bootstrap 并使用 CSS Grid!(它更简单、更整洁、更灵活、更快)。请参阅这篇很酷的文章:停止使用 Bootstrap?—?为基于组件的 UI 创建一个实用的 CSS 网格模板