Bootstrap的标签、徽章、巨幕和页头
标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户
在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示
使用方法很简单,可以在使用span这样的行内标签
<h3>Example heading <span class="label label-default">New</span></h3>
【自动隐藏】
当没有内容的时候,自动隐藏
.label:empty {
display: none;
}
<h3>Example heading <span class="label label-default"></span></h3>
【颜色设置】
和按钮元素button类似,label样式也提供了多种颜色:
☑ label-default:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是通过这几个类名来修改背景颜色和文本颜色
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
徽章
从某种意义上来说,徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息,比如系统提示有多少信息未读
在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现
可以像标签一样,使用span标签来制作,然后加入badge
类
<a href="https://www.swvq.com/bootstrap/473167.html#">Inbox <span class="badge">42</span></a>
【自动隐藏】
如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty
选择符实现)
.badge:empty {
display: none;
}
<a href="https://www.swvq.com/bootstrap/473167.html#">Inbox <span class="badge"></span></a>
【按钮徽章】
徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式,只不过颜色不同
<ul role="tablist">
<li role="presentation" class="active"><a href="https://www.swvq.com/bootstrap/473167.html#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="https://www.swvq.com/bootstrap/473167.html#">Profile</a></li>
<li role="presentation"><a href="https://www.swvq.com/bootstrap/473167.html#">Messages <span class="badge">3</span></a></li>
</ul>
<button type="button">
Messages <span class="badge">4</span>
</button>
巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容
<div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样,都是用时间熬出来的</p>
<p><a href="https://www.swvq.com/bootstrap/473167.html#" role="button">Learn more</a></p>
</div>
如果为巨幕组件添加圆角,把此组件放在 .container
元素的里面即可
<div class="container">
<div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样,都是用时间熬出来的</p>
<p><a href="https://www.swvq.com/bootstrap/473167.html#" role="button">Learn more</a></p>
</div>
</div>
页头
页头组件能够为 h1
标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1
标签内内嵌 small
元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanffkcj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01