Bootstrap提示信息（标签、徽章、巨幕和页头）

无评论

前面的讲话

　　在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>

 

相关文章