css - 如何将 Bootstrap 添加到大量使用蓝图的元素中

Question

我有一个大量采用 BluePrint CSS 的大元素。

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

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

Answer 1

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

例如(也包括复选框，尽管您可以删除 .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。