源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Bootstrap每天必学之标签与徽章

  • 时间:2021-11-05 21:33 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Bootstrap每天必学之标签与徽章
[b]1、标签[/b] 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示: [img]http://files.jb51.net/file_images/article/201511/20151127145840602.jpg?20151027145851[/img] 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。 既然他是一个独立的组件,当然在不同的版本下有不同的文件: [b]☑ LESS版本:[/b]对应的源文件label.less [b]☑ Sass版本:[/b]对应的源文件_label.scss [b]☑ 编译后版本:[/b]bootstrap.css文件第4261行~第4327行 [b]1)、使用原理:[/b] 使用方法很简单,你可以在使用span这样的行内标签:
[url=#]
运行效果: [img]http://files.jb51.net/file_images/article/201511/20151127150324824.jpg?2015102715333[/img] [b]1)、实现原理:[/b] 主要将其设置为椭圆形,并且加了一个背景色: /bootstrap.css文件第4328行~第4341行/
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}
同样也使用`:empty`伪元素,当没有内容的时候隐藏:
.badge:empty {
display: none;
}
正如开头所说,可以将徽章与按钮或者导航之类配合使用:
<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
   <a href="##" class="navbar-brand">慕课网</a>
 </div>
 <ul class="nav navbar-nav">
   <li class="active"><a href="##">网站首页</a></li>
   <li><a href="##">系列教程</a></li>
   <li><a href="##">名师介绍</a></li>
   <li><a href="##">成功案例<span class="badge">23</span></a></li>
   <li><a href="##">关于我们</a></li>
 </ul>
</div>
运行效果 [img]http://files.jb51.net/file_images/article/201511/20151127150527566.jpg?2015102715536[/img] [b]2)、按钮和胶囊形导航设置徽章:[/b] 另外,徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式,只不过是颜色不同而以:
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />
 运行效果: [img]http://files.jb51.net/file_images/article/201511/20151127150550134.jpg?201510271561[/img] 样式代码请查看bootstrap.css文件第4345行~第4366行。 注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。 通过上文的介绍大家对标签和徽章是不是有了大概的了解,希望大家把标签和徽章应用到自己的网站中,真正的做到学以致用。 如果大家还想深入学习,可以点击这里[/url]进行学习,再为大家附两个精彩的专题:[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部