Question

在bootstrap中，有很多东西在我的屁股中踢了很多天，当我在HTML中包含bootstrap类时，我不理解标签背后的概念。

喜欢 -

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

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

还有很多像这样的例子 -

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

Answer 1

最后我清楚地了解了这件事。我在这里描述它可以帮助像我这样的其他人。

        <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类指定此按钮应具有主要类型的样式。

令人敬畏的引导......

Answer 2

.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;
}

Tag需要两个css类来呈现它的样式。

Reference

Answer 3

这是两个属性：btn和btn-primary。添加了btn-primary用于样式化。

Answer 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 不同，这确实让一些纯粹主义者发疯了。

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

为什么class =“btn btn-default”而不是class =“btn-default”

4 个答案: