杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

如果你要使用Bootstrap来搭建自己的博客网站或者资讯类网站,那么你肯定会用到标签。
调用Bootstrap标签样式,不但风格简单精致,而且也省去不少编码时间,让我们一起看看。


默认Bootstrap标签样式使用

这是最基本的标签样式调用,采用default样式,与其他元素的样式相匹配,调用方式如下:<h3>带标签的标题 <span class="label label-default">标签</span></h3>需要注意的是,你需要像Bootstrap按钮元素样式调用一样,先引入label,再引入对应的标签样式。


多彩Bootstrap标签样式使用

除了默认的灰色系以外,与其他元素相同,标签同样提供了其他几种颜色的样式调用。
对应的样式如下:<span class="label label-default">默认样式</span> <span class="label label-primary">主要样式(蓝色)</span> <span class="label label-success">成功样式(绿色)</span> <span class="label label-info">信息样式(浅蓝色)</span> <span class="label label-warning">警告样式(橙色)</span> <span class="label label-danger">危险样式(红色)</span>


与Bootstrap标签样式类似的徽章样式

Bootstrap还提供了一种与标签样式类似的样式,它们称之为徽章样式。
近乎椭圆的样式与标签样式区别不大,不过作用是为了显示当前未读信息或者作为条目的数量展示。
徽章样式的调用也很简单,与标签样式类似:<a href="#">收件箱<span class="badge">42</span></a>由于徽章常常与列表一起使用,所以默认只有灰色和白色两种颜色,当然如果你想要为其添加其他样式,根据官方的代码自定义即可。


写在文章最后

虽然这些组件写起来并不复杂,不过积少成多,不得不说Bootstrap的考虑还是非常周到的,赶紧把这些样式用在你的网站建设项目里吧。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。