CSS 是否可以将 MaterializeCss 集成到 Bootstrap 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28613848/
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
Is it possible to integrate MaterializeCss into Bootstrap
提问by Nickolaus
I have asked myself (not tested) if it is possible to integrate both bootstrapand materializecssinto the same project
我问自己（未测试）是否可以将bootstrap和materializecss集成到同一个项目中
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
由于两个框架的目的相同，并且可能在某些类定义等中重叠。是否仍然可以组合两个框架以扩展我的样式选项？
回答by Guillaume
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
Materialize 不基于 Bootstrap，也不只是一个“视觉层”，使用这两个框架可能会导致很多不兼容或至少重叠很多，因为它们的大部分功能都是多余的（网格、菜单、图标等）。
I personally use this project Bootstrap material designwhich is a theme for Bootstrap and works very well. If you don't need/want Bootstrap you can also use Material Design Litethat has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Materialor Polymeralso using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
我个人使用这个项目Bootstrap 材料设计，它是 Bootstrap 的一个主题并且效果很好。如果您不需要/不想要 Bootstrap，您还可以使用Google 最近发布的Material Design Lite。它是一个基于 Material Design 指南的轻量级 CSS 框架。与Angular Material或Polymer相比，Light也使用 Material Design 指南，但需要其他 javascript 框架（即 Angular）的一部分或需要。
回答by Brian Purgert
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
我将 Materialise 添加到我的引导程序网站，它运行良好，就像 JC Borlagdan 所说，尽管有一些重叠。我只是使用网站检查器（通常是右键单击 > 检查元素）然后关闭引导程序或物化属性以查看我更喜欢哪一个，并从我不喜欢的那个中删除样式。只要确保您获得了实体化和引导程序的非缩小版本。
回答by khurram
you need to set the order of CSSfiles like
您需要设置CSS文件的顺序，例如
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
现在您可以覆盖 bootstrap css 类或 id，并且可以创建自己的 CSS 样式。
回答by Dennis Heiden
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
您可以从 materialize.css 中删除 GRID，只需使用 BT GRID 编译自定义引导程序包，而无需按钮、标签等。
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
不要使用任何 BT jQuery 插件，然后首先在模板中编译并加载 bootstrap.min.css，然后是修改后的 materialize.css 和 materilize.min.js。
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite bootstrap styles or to add alternative css classes to your GRID.
您还可以通过从 materialize.css 中选取它们并插入到您的 template.css / style.css 中以覆盖引导程序样式或将替代 css 类添加到您的 GRID 中，从而仅集成按钮、卡片或颜色。
回答by JC Borlagdan
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div>tag that calls the containerclass for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script>tags, still bootsrap grid still the one used by the webpage/webform.
有可能，我已经在单个 Web 表单中测试了这两个框架，尽管控件的某些属性重叠，尤其<div>是调用标记的容器类的标记。
对于网格，出于某种原因，它实际上仍然遵循引导程序（我不知道）。因为我尝试重新排列<script>标签的顺序，所以引导网格仍然是网页/网络表单使用的网格。
回答by SAK
I'm not sure that's possible. Material Designis something new from Google, and includes responsive as part of it, while the Bootstrap libraryis from Twitterand seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
我不确定这是否可能。Material Design是来自 Google 的新事物，其中包含响应式，而Bootstrap 库来自Twitter，似乎主要面向响应式。
查看此对话：http: //forums.oscommerce.com/topic/407994-material-design/?hl=material
我怀疑它们不会相互集成，并且会严重冲突，但也许其他人有更多信息。
