Bootstrap 标签 label

标签

Bootstrap提供的标签，主要用来显示提示信息等内容，它的基本样式通过 .label类实现，默认以圆角矩形呈现。如：

1. <h1>Example heading <span class="label label-default">New</span></h1>
2. <h2>Example heading <span class="label label-default">New</span></h2>
3. <h3>Example heading <span class="label label-default">New</span></h3>
4. <h4>Example heading <span class="label label-default">New</span></h4>
5. <h5>Example heading <span class="label label-default">New</span></h5>
6. <h6>Example heading <span class="label label-default">New</span></h6>

效果如图 3‑63所示：

图3-63 标签

除基本样式外，Bootstrap还为标签提供了一组情景类，包括 .label-primary、.label-success、.label-info、.label-warning、.label-danger，这些情景类通过标签的背景颜色来表达不同的含义。如：

1. <span class="label label-default">Default</span>
2. <span class="label label-primary">Primary</span>
3. <span class="label label-success">Success</span>
4. <span class="label label-info">Info</span>
5. <span class="label label-warning">Warning</span>
6. <span class="label label-danger">Danger</span>

效果如图 3‑64所示：

图3-64 标签情景类

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。