设置随机引导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