設置隨機引導3標籤類

Question

假設我必須顯示5或10個標籤。 是否有可能爲每個不同的標籤設置隨機標籤類？如引導3中的信息，主要，危險等。 我正在動態生成標籤，因此我可以將它們全部設置爲一個類，但我希望每個標籤都是不同的類。

編輯：我在Laravel Blade視圖中動態生成標籤。我想說的是，對於每個標籤都有，我希望標籤有一個隨機（主要，成功，信息，警告，危險之一）類。

Answer 1

我認爲你需要它的這個，

.phaedra-colors .label { 
 
    color: #001713; 
 
} 
 
.phaedra-colors .label-default { 
 
    background-color: #95a5a6; 
 
} 
 
.phaedra-colors .label-default[href]:hover, 
 
.phaedra-colors .label-default[href]:focus { 
 
    background-color: #7f8c8d; 
 
} 
 
.phaedra-colors .label-primary { 
 
    background-color: #00A388; 
 
} 
 
.phaedra-colors .label-primary[href]:hover, 
 
.phaedra-colors .label-primary[href]:focus { 
 
    background-color: #007D68; 
 
} 
 
.phaedra-colors .label-success { 
 
    background-color: #79BD8F; 
 
} 
 
.phaedra-colors .label-success[href]:hover, 
 
.phaedra-colors .label-success[href]:focus { 
 
    background-color: #659E78; 
 
} 
 
.phaedra-colors .label-info { 
 
    background-color: #BEEB9F; 
 
} 
 
.phaedra-colors .label-info[href]:hover, 
 
.phaedra-colors .label-info[href]:focus { 
 
    background-color: #A5CC8A; 
 
} 
 
.phaedra-colors .label-warning { 
 
    background-color: #FFFF9D; 
 
} 
 
.phaedra-colors .label-warning[href]:hover, 
 
.phaedra-colors .label-warning[href]:focus { 
 
    background-color: #D1D181; 
 
} 
 
.phaedra-colors .label-danger { 
 
    background-color: #FF6138; 
 
} 
 
.phaedra-colors .label-danger[href]:hover, 
 
.phaedra-colors .label-danger[href]:focus { 
 
    background-color: #D6512F; 
 
} 
 

 
.flat-ui-colors .label-default { 
 
    background-color: #95a5a6; 
 
} 
 
.flat-ui-colors .label-default[href]:hover, 
 
.flat-ui-colors .label-default[href]:focus { 
 
    background-color: #7f8c8d; 
 
} 
 
.flat-ui-colors .label-primary { 
 
    background-color: #3498db; 
 
} 
 
.flat-ui-colors .label-primary[href]:hover, 
 
.flat-ui-colors .label-primary[href]:focus { 
 
    background-color: #2980b9; 
 
} 
 
.flat-ui-colors .label-success { 
 
    background-color: #2ecc71; 
 
} 
 
.flat-ui-colors .label-success[href]:hover, 
 
.flat-ui-colors .label-success[href]:focus { 
 
    background-color: #27ae60; 
 
} 
 
.flat-ui-colors .label-info { 
 
    background-color: #9b59b6; 
 
} 
 
.flat-ui-colors .label-info[href]:hover, 
 
.flat-ui-colors .label-info[href]:focus { 
 
    background-color: #8e44ad; 
 
} 
 
.flat-ui-colors .label-warning { 
 
    background-color: #e67e22; 
 
} 
 
.flat-ui-colors .label-warning[href]:hover, 
 
.flat-ui-colors .label-warning[href]:focus { 
 
    background-color: #d35400; 
 
} 
 
.flat-ui-colors .label-danger { 
 
    background-color: #e74c3c; 
 
} 
 
.flat-ui-colors .label-danger[href]:hover, 
 
.flat-ui-colors .label-danger[href]:focus { 
 
    background-color: #c0392b; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h2>Default colors</h2> 
 
<a class="label label-default" href="#">Default</a> 
 
<a class="label label-primary" href="#">Primary</a> 
 
<a class="label label-success" href="#">Success</a> 
 
<a class="label label-info" href="#">Info</a> 
 
<a class="label label-warning" href="#">Warning</a> 
 
<a class="label label-danger" href="#">Danger</a> 
 

 
<h2>Phaedra Colors</h2> 
 
<div class="phaedra-colors"> 
 
    <a class="label label-default" href="#">Default</a> 
 
    <a class="label label-primary" href="#">Primary</a> 
 
    <a class="label label-success" href="#">Success</a> 
 
    <a class="label label-info" href="#">Info</a> 
 
    <a class="label label-warning" href="#">Warning</a> 
 
    <a class="label label-danger" href="#">Danger</a> 
 
</div> 
 

 

 
<h2>Flat UI Colors</h2> 
 
<div class="flat-ui-colors"> 
 
    <a class="label label-default" href="#">Default</a> 
 
    <a class="label label-primary" href="#">Primary</a> 
 
    <a class="label label-success" href="#">Success</a> 
 
    <a class="label label-info" href="#">Info</a> 
 
    <a class="label label-warning" href="#">Warning</a> 
 
    <a class="label label-danger" href="#">Danger</a> 
 
</div>

，或者嘗試使用此，Bootstrap Button Generator