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

bootstrap在我的屁股里踢了一件事，因为很多天我不理解标签背后的概念， HTML中的类。为什么class =“btn btn-default”而不是仅仅class =“btn-default”

像 -

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

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

也有很多例子是这样 -

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

来源

2015-12-31 Enam Ahmed Shahaz

BTN将定义所有按钮和BTN-主要将做的背景颜色，像有像BTN-成功类（绿色）BTN-信息基础风格（蓝色）等 –

这就是我们应该如何创建我们需要重用的样式类。 –

具有'class =“btn btn-primary”'的标签是否意味着该标签属于两个类？ –

最后我对这件事情有了清晰的认识。我在这里描述它可以帮助像我这样的其他人。

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

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

的.glyphicon类指定要使用所提供的图标字体。
.glyphicon-calendar类指定我们拍摄的哪个图标使用。

和<button class="btn btn-primary">PressMe</button>

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

真棒的Bootstrap ...

来源

2016-01-02 09:30:49

的.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

来源

2015-12-31 06:21:32

基本上，常规属性在'.btn'中并且在'.btn-primary'类中扩展。 – KunJ

是的。明白了@KunJ –

它是两个属性：btn和btn-primary。 btn-primary被添加用于造型。

来源

2015-12-31 06:51:39 JenTrixx16

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

回答

相关问题