Html 为什么要上课；btn btn默认值“；而不仅仅是class="；btn默认值“；

在bootstrap中，有一件事一直困扰着我，那就是在HTML中包含bootstrap类时，我不理解标记背后的概念

像-

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

按我

为什么有两个？btn和btn主节点。为什么我们不只包括主btn，因为我们只需要主btn类型。这意味着什么？它的目的是什么

还有很多这样的例子-

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

的
.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类来呈现其样式

它有两个属性：
btn
和
btn primary
btn primary
是为样式添加的。
最后我对这件事有了清晰的认识。我在这里描述它是为了帮助像我这样的人

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


压榨

这种类型的模式在引导程序中非常常见——应用两个类来完成单个任务。这有助于使引导的CSS文件更小

对于


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

要查看
信息，请按ME


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

很棒的引导…
事实是，按照SCS的编译方式，输出CSS并没有多少节省。而且，当你考虑所有按钮上的额外HTML时，你可能会丢失而不是保存。

如果需要，可以合并这些类：

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

它很可能会这样做，所以它不会使CSS增长太多，并且您可以使用1个类，而不是您想要的2个类

这就是说，这偏离了标准引导，这确实让一些纯粹主义者疯狂

注意：要进行上述扩展和包含，您需要首先导入必要的引导文件。所涉及的路径因您使用的SCSS/SASS编译器类型而异-许多只支持相对路径，而不支持绝对路径，而且这些相对路径可能非常庞大。
btn将定义按钮的所有基本样式，btn primary将使用背景色，就像有btn success（绿色）btn info（蓝色）之类的类一样等等。这就是我们应该如何创建需要重用的样式类。一个标记具有
class=“btn btn primary”
是否意味着该标记属于两个类？这意味着该标记需要两个css类来呈现其样式。检查此示例，了解
.btn
、
.btn和.btn default
等的一般属性基本上在
.btn
类中存在，并在
.btn primary
类中扩展。