前面的讲话
在Bootstrap中,有有组件用于提示信息,如 标签、徽章、巨幕和页头。本文将详细介绍Bootstrap提示信息
标签
在局部Web页面中时时会补充加一个签从而来报用户有额外的信,比如说在导航及上加了一个新导航项,可能就是见面加一个“new”标签,来告诉用户
于Bootstrap框架中专门将如此的功能提取出改成一个标签组件,并且为“.label”样式来落实高亮显示
使用办法十分简短,可以于运用span这样的行内标签
<h3>Example heading New</h3>
【自动隐藏】
当没有内容之当儿,自动隐藏
.label:empty {
display: none;
}
<h3>Example heading </h3>
【颜色设置】
和按钮元素button类似,label样式也供了强颜料:
☑ label-default:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是透过就几乎独类名来窜背景颜色及文件颜色
Default
Primary
Success
Info
Warning
Danger
徽章
从某种意义上的话,徽章效果及前介绍的签效应最好相似。也因此来举行有提示信息使用。常并发的是部分系统发出的信息,比如系统提醒有小信息不念
在Bootstrap框架中,把这种效应称当徽章效果,使用“badge”样式来实现
可以像标签一样,使用span标签来做,然后进入badge
类
<a href="#">Inbox 42</a>
【自动隐藏】
如果没初的要么无念的信条目,也就是说不含有其他内容,徽章组件能够自动隐藏(通过CSS的 :empty
选择符实现)
.badge:empty {
display: none;
}
<a href="#">Inbox </a>
【按钮徽章】
徽章在按钮元素button和胶囊形导航nav-pills也时有发生像样之体,只不过颜色各异
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home 42</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages 3</a></li>
</ul>
<button class="btn btn-primary" type="button">
Messages 4
</button>
巨幕
这是一个轻量、灵活的零件,它会延长到通浏览器视口来展示网站及的根本内容
<div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样,都是用时间熬出来的</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果为巨幕组件添加圆角,把这个组件放在 .container
元素的中间即可
<div class="container">
<div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样,都是用时间熬出来的</p>
<p><a class="btn btn-primary btn-lg" href="#" 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>