BootstrapBootstrap提醒消息(标签、徽章、巨幕和页头)

前方的话

  在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,徽章

  从某种意义上来说,徽章效果和前边介绍的价签效应最好相似。也用来做一些提醒新闻使用。常出现的是部分体系发生的音讯,比如系统指示有稍许音讯未读 

  在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 标签Nene嵌 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>

 

相关文章