Bootstrap教程:标签

文章目录[隐藏]

实例

Label>

Example Heading Label

Example Heading Label

Example Heading Label

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

可用的变体

用下面的任何一个类即可改变标签的外观。

Default Primary Success Info Warning 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>

如果标签数量很多怎么办?

如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内,在页面上展示这些标签就会出现问题,每个标签就会有自己的一个 inline-block 元素(就像图标一样)。解决的办法是为每个标签都设置为 display: inline-block; 属性。关于这个问题以及实例,请参考:https://github.com/twbs/bootstrap/issues/13219


发布日期:

所属分类: BootStrap 标签: