爲什麼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」

回答

相關問題