如何将自定义 material 设计主题应用于 Bootstrap 组件

Question

我正在使用 Angular Material 设计组件来使我的整个网站具有一致的外观和感觉。 (Angular Material Design)

我为此创建了自定义主题：

        $mdThemingProvider.theme('default')
      .primaryPalette('red', {
          'default': '700',
          'hue-1': '100',
          'hue-2': '600',
          'hue-3': 'A100'
        })
      .accentPalette('light-blue');

不幸的是，我找不到CSS来定义徽章，所以我使用了bootstrap提供的那个。这个问题是我的自定义主题没有被应用。

我怎样才能做到这一点？或者，更好的是，material design CSS 是否提供类似的东西？（无法找到这个）。

这是我目前拥有的：

而 html 是：

 <div class="md-block" layout layout-align="center center">
                        <div flex="20" layout layout-align="center center">
                            <span class="md-body-1">Poll interval in days</span>
                        </div>
                        <md-slider class="md-primary" flex ng-model="client.PollIntervalInDays" step="1" min="1" max="100" aria-label="rating">
                        </md-slider>
                        <div flex="20" layout layout-align="center center">
                            <h2><span class="label label-pill label-danger">{{client.PollIntervalInDays}}</span></h2>
                        </div>
                    </div>

问题是来自 md-primary 的颜色与 label-danger 不匹配。我尝试在跨度上应用 md-priamry，但它不起作用。

有什么想法吗？

Answer 1

我会尽一切可能不将 Bootstrap 混入 Angular Material 网站。使用 2 CSS 个框架的想法对我来说听起来只是一团糟。

这是在 Angular Material 中实现的徽章代码笔：http://codepen.io/anon/pen/QbXwYq

他们使用一个按钮和一些 CSS:

md-badge{
  margin: 0 0 0 8px;
  background-color: #259b24;
  color: white;
  padding: 2px 4px;
  border-radius: 4px;
}
.md-warn{
  background-color: #F44336;
}

我还使用了一个只读的 md 芯片来伪造徽章并且对结果很满意。

如何将自定义 material 设计主题应用于 Bootstrap 组件

How can I apply a custom material design theme to a Bootstrap component

css

twitter-bootstrap

angularjs

material-design

angular-material