css - 设置随机 bootstrap 3 标签类

Question

假设我必须显示 5 或 10 个标签。 是否可以为每个不同的标签设置一个随机的标签类别？像 bootstrap 3 中的 info、primary、danger 等。 我正在动态生成标签，因此我可以将所有标签的类设置为一个，但我希望每个标签都是不同的类。

编辑:我在 Laravel Blade View 中动态生成标签。我想说的是，对于每个标签，我希望标签有一个随机的(主要、成功、信息、警告、危险之一)类。

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