Question

假设我必须显示5或10个标签。是否可以为每个不同的标签设置随机标签类？喜欢信息，主要，危险等在bootstrap 3。我正在动态生成标签，所以我可以将所有类的类设置为1，但我希望每个标签都是不同的类。

编辑：我在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

设置随机bootstrap 3标签类

1 个答案: