css - 如何将 boostrap 添加到大量使用蓝图的项目中

Question

我有一个很大的项目，它大量采用 BluePrint CSS。

我想使用 Bootstrap 提供的一些组件（实际上是单选按钮组）。如果我添加 Bootstrap 给出的 CSS/Images/JS，它不会与蓝图定义的当前类冲突。

我正在考虑的一种选择是保守地添加 Bootstrap 并使用它的类。可能吗？我能否在我的项目中单独为 Bootstrap CSS 类定义一个新的“命名空间”，并将其与 Blueprint 定义的类隔离开来。然后我可以使用类似的类boot-classname，它会应用classname来自引导程序的样式。

Answer 1

只需获取引导单选按钮代码并包含它，而不是包含整个样式表，这会覆盖您已经拥有的大量代码。

例如（也包括复选框，尽管您可以删除 .checkbox 位）

    label {
        display: block;
        margin-bottom: 5px;
     }

     .radio,
    .checkbox {
      min-height: 20px;
      padding-left: 20px;
    }

    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      float: left;
      margin-left: -20px;
    }

    .controls > .radio:first-child,
    .controls > .checkbox:first-child {
      padding-top: 5px;
    }

    .radio.inline,
    .checkbox.inline {
      display: inline-block;
      padding-top: 5px;
      margin-bottom: 0;
      vertical-align: middle;
    }

    .radio.inline + .radio.inline,
    .checkbox.inline + .checkbox.inline {
      margin-left: 10px;
    }

此外，您可能希望将标签更改为类，例如 .boot-label，因此它不会影响您的蓝图标签 css。