css – 附加的Twitter Bootstrap标签/按钮/警示/徽章颜色

前端之家收集整理的这篇文章主要介绍了css – 附加的Twitter Bootstrap标签/按钮/警示/徽章颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有一个可以使用的包来自动添加额外的颜色,而不是默认的包?

默认颜色是(标签示例):

  1. <span class="label">Default</span>
  2. <span class="label label-success">Success</span>
  3. <span class="label label-warning">Warning</span>
  4. <span class="label label-important">Important</span>
  5. <span class="label label-info">Info</span>
  6. <span class="label label-inverse">Inverse</span>
@H_404_6@

解决方法

您可以使用这种CSS快速方便地为标签设置自己的颜色集:
  1. .label-default {
  2. background-color: #999;
  3. }
  4. .label-default[href]:hover,.label-default[href]:focus {
  5. background-color: #808080;
  6. }
  7. .label-primary {
  8. background-color: #428bca;
  9. }
  10. .label-primary[href]:hover,.label-primary[href]:focus {
  11. background-color: #3071a9;
  12. }
  13. .label-success {
  14. background-color: #5cb85c;
  15. }
  16. .label-success[href]:hover,.label-success[href]:focus {
  17. background-color: #449d44;
  18. }
  19. .label-info {
  20. background-color: #5bc0de;
  21. }
  22. .label-info[href]:hover,.label-info[href]:focus {
  23. background-color: #31b0d5;
  24. }
  25. .label-warning {
  26. background-color: #f0ad4e;
  27. }
  28. .label-warning[href]:hover,.label-warning[href]:focus {
  29. background-color: #ec971f;
  30. }
  31. .label-danger {
  32. background-color: #d9534f;
  33. }
  34. .label-danger[href]:hover,.label-danger[href]:focus {
  35. background-color: #c9302c;
  36. }

这里有2套:

>默认值:#95a5a6 /#7f8c8d
> primary:#3498db /#2980b9
>成功:#2ecc71 /#27ae60
> info:#9b59b6 /#8e44ad
>警告:#e67e22 /#d35400
危险:#e74c3c /#c0392b

>默认值:#95a5a6 /#7f8c8d
> primary:#00A388 /#007D68
>成功:#79BD8F /#659E78
>信息:#BEEB9F /#A5CC8A
>警告:#FFFF9D /#D1D181
危险:#FF6138 /#D6512F

Bootply example

@H_404_6@ @H_404_6@

猜你在找的CSS相关文章