Legen Sie eine zufällige Bootstrap 3 Label-Klasse

Question

Sagen wir, ich muss 5 oder 10 Etiketten anzeigen. Ist es möglich, dass jede andere Marke eine zufällige Label-Klasse setzt? wie Info, Primär, Gefahr etc. in Bootstrap 3. Ich erzeuge die Etiketten dynamisch, so dass ich die Klasse für alle von ihnen zu einer festlegen kann, aber ich möchte, dass jedes Etikett eine andere Klasse ist.

bearbeiten: Ich erzeuge die Etiketten dynamisch in Laravel Blade-Ansicht. Was ich sagen möchte, ist, dass für jedes Etikett, ich möchte, dass das Etikett eine zufällige (eine der primären, Erfolg, Info, Warnung, Gefahr) -Klasse hat.

Answer 1

denke ich, alles, was Sie seine Diese benötigen,

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

Oder versuchen Sie diese verwenden, Bootstrap Button Generator