为什么 class="btn btn-default" 而不是只有 class="btn-default"答案

【问题标题】：why class="btn btn-default" instead of only class="btn-default"为什么 class="btn btn-default" 而不是只有 class="btn-default"
【发布时间】：2021-05-25 20:25:49
【问题描述】：

在引导程序中，很多天以来一直困扰我的一件事是，当我在 HTML 中包含引导程序类时，我不理解标签背后的概念。

喜欢-

<button class="btn btn-primary"> press me </button>

为什么有两个？ btn 和 btn-primary。为什么我们不仅仅只包含 btn-primary，因为我们只需要一个主要类型 btn。它是什么意思，它的目的是什么？

这样的例子还有很多——

 <ul class="nav navbar-nav navbar-right">

【问题讨论】：

这就是我们应该如何创建需要重用的样式类。
具有class="btn btn-primary" 的标签是否意味着该标签属于两个类？
这意味着标签需要这两个 css 类来呈现其样式。
bootply.com/aRrtYnS9LO 看看这个例子.btn, .btn & .btn-default 等等的作用

标签： html css web twitter-bootstrap-3

【解决方案1】：

.btn 和.btn-primaray 是两个不同的类，都应用了一些不同的样式。

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

标签需要这两个 css 类来呈现其样式。

Reference

【讨论】：

一般属性在.btn，基本在.btn-primary类中扩展。

【解决方案2】：

我终于对这件事有了一个清晰的认识。我在这里描述它，以便它可以帮助像我这样的其他人。

        <i class="glyphicon glyphicon-calendar"></i>
        <button class="btn btn-primary">PressMe</button>

这种模式你会在 Bootstrap 中经常看到——应用两个类来完成一个任务。这有助于使 Bootstrap 的 CSS 文件更小。

对于<i class="glyphicon glyphicon-calendar"></i>

.glyphicon 类指定我们应该使用提供的图标字体。
.glyphicon-calendar 类指定我们应该使用哪个图标。

对于<button class="btn btn-primary">PressMe</button>

.btn 类指定我们将拥有一个基本的按钮样式。
.btn-primary 类指定此按钮应具有主要类型的样式。

很棒的引导...

【讨论】：

【解决方案3】：

它是两个属性：btn 和 btn-primary。 btn-primary 为样式添加。

【讨论】：

【解决方案4】：

事实上，SCSS 的编译方式，在输出 CSS 中并没有多少节省。而且，当您考虑所有按钮中的额外 HTML 时，您可能会失去而不是节省。

如果你愿意，你可以合并这些类：

.priBtn {
  @extend .btn;
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

它很可能只是去emit using a comma selector，所以它不应该增加太多的CSS，你可以使用1个类而不是你想要的2个。

也就是说，这与标准的 Bootstrap 不同，这确实让一些纯粹主义者疯狂。

注意：要进行上述扩展和包含，您需要先导入必要的引导文件。所涉及的路径取决于您使用的 SCSS/SASS 编译器类型 - 许多只支持相对路径，而不是绝对路径，而且这些相对路径可能非常庞大。

【讨论】：