【发布时间】：2015-04-21 05:43:53
【问题描述】：
我问过自己（未经测试）是否可以将 bootstrap 和 materializecss 集成到同一个项目中
由于两个框架的目的相同，并且在某些类定义等方面可能重叠。是否仍然可以结合两个框架来扩展我的样式选项？
【问题讨论】：
标签： css twitter-bootstrap web css-frameworks materialize
【发布时间】：2015-04-21 05:43:53
【问题描述】：
Materialize 不是基于 Bootstrap 也不仅仅是一个“可视层”，使用这两个框架可能会导致很多不兼容或至少重叠很多，因为它们的大部分功能都是多余的（网格、菜单、图标等）。
我个人使用这个项目Bootstrap material design，它是 Bootstrap 的主题，效果很好。 如果您不需要/想要 Bootstrap，您也可以使用 Google 最近发布的Material Design Lite。它是一个基于 Material Design 指南的轻量级 CSS 框架。与Angular Material 或Polymer 相比，也使用材料设计指南但属于或需要其他javascript框架（即Angular）的一部分。
【讨论】：
-
谢谢看起来不错，...唯一的缺点是您将失去所有原始引导样式，因为它只是引导主题
-
是的，它只是一个 boostrap 主题部分是丑陋的。
-
Checked Bootstrap 材料设计我不舒服。未找到文档中提到的字体文件。此外，出于商业目的使用必须付费。检查过的 Google Material Design Lite 看起来很有希望。
-
@TejasviHegde 还是说商业用途需要付费？我现在看不到。
-
@Menasheh 我已经重新查看了该项目，因为我检查了很长时间。项目github.com/FezVrasta/bootstrap-material-design 发现可以在任何类型的项目中使用它，包括商业项目。
我将 Materialize 添加到了我的引导网站，它运行良好，就像 JC Borlagdan 所说的那样，虽然有一些重叠。我只是使用网站检查器和（通常是右键单击>检查元素）然后关闭引导程序或物化属性以查看我更喜欢哪个并从我不喜欢的样式中删除样式。只要确保你获得了非缩小版本的 materialize 和 bootstrap。
【讨论】：
有可能，我已经在一个 Web 表单中测试了这两个框架，尽管控件的某些属性重叠，尤其是 <div> 标记，它为标记调用 container 类。
对于网格，出于某种原因，它实际上仍然遵循引导程序（我不知道）。因为我尝试重新排列<script> 标签的顺序，所以仍然引导网格仍然是网页/webform 使用的网格。
【讨论】：
您需要设置 CSS 文件的顺序，例如
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
现在您可以覆盖引导 css 类或 ID，并可以创建自己的 CSS 样式。
【讨论】：
-
我知道，但是如果你同时使用这两种框架，一个总是会覆盖另一个的功能
-
我不认为有任何方法可以合并/整合两个 CSS 文件
-
是的，我同意....对于我提出的解决方案（直到现在），我唯一的想法是编写一个自定义编译器来检查双重条目并为这些情况创建别名，您将有冗余, 但我认为应该是可能的
您可以从 materialize.css 中删除 GRID，只需使用 BT GRID 编译自定义引导程序包，而无需按钮、标签等。
不要使用任何 BT jQuery 插件，然后首先在模板中编译和加载 bootstrap.min.css，然后是修改后的 materialize.css 和 materilize.min.js。
您还可以通过从 materialize.css 中挑选按钮、卡片或颜色并插入到您的 template.css / style.css 中来覆盖它们，从而仅集成按钮、卡片或颜色 引导样式或将替代的 css 类添加到您的 GRID。
【讨论】：
我不确定这是否可能。 Material Design 是 Google 的新东西，其中包含响应式，而 Bootstrap 库 来自 Twitter，似乎主要是响应式的- 面向。
看看这个对话：http://forums.oscommerce.com/topic/407994-material-design/?hl=material
我怀疑他们不会相互融合，并且会严重冲突，但也许其他人有更多的信息。
【讨论】：