当前位置:首页 > BootStrap > 正文内容
六月14日

时间:2016-06-14 07:34

Bootstrap教程:标签

0
分类:BootStrap | 评论:0人 | 浏览:87次   
标签 可用于计数、提示或页面上其他的标记显示。使用 class .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>

可用的变体

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

  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

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量