• 技术文章 >web前端 >Bootstrap教程

    详解Bootstrap中的标签、徽章、巨幕和页头

    青灯夜游青灯夜游2021-03-30 19:00:50转载173
    Bootstrap中,有一些组件用于提示信息,如 标签、徽章、巨幕和页头。本篇文章给大家介绍一下Bootstrap中的提示信息。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    相关推荐:《bootstrap教程

    标签

      在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户

      在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示

      使用方法很简单,可以在使用span这样的行内标签

    <h3>Example heading <span class="label label-default">New</span></h3>

    1.png

    【自动隐藏】

      当没有内容的时候,自动隐藏

    .label:empty {
        display: none;
    }
    <h3>Example heading <span class="label label-default"></span></h3>

    2.png

    【颜色设置】

      和按钮元素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>

    3.png

    徽章

      从某种意义上来说,徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息,比如系统提示有多少信息未读

      在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现

      可以像标签一样,使用span标签来制作,然后加入badge

    <a href="#">Inbox <span class="badge">42</span></a>

    【自动隐藏】

      如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现)

    .badge:empty {
        display: none;
    }
    <a href="#">Inbox <span class="badge"></span></a>

    【按钮徽章】

      徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式,只不过颜色不同

    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>
    <button class="btn btn-primary" type="button">
      Messages <span class="badge">4</span>
    </button>

    5.png

    巨幕

      这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容

    <div class="jumbotron">
      <h1>小火柴的蓝色理想</h1>
      <p>好的代码像粥一样,都是用时间熬出来的</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

    6.png

    如果为巨幕组件添加圆角,把此组件放在 .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>

    7.png

    页头

      页头组件能够为 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>

    8.png

    更多编程相关知识,请访问:编程视频!!

    以上就是详解Bootstrap中的标签、徽章、巨幕和页头的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    上一篇:详解eclipse中如何使用bootstrap?(附代码) 下一篇:聊聊Bootstrap中的导航条
    第15期线上培训班

    相关文章推荐

    • 浅谈Bootstrap Blazor组件的用法• 深入学习Bootstrap中的图标• 一起看看Bootstrap中的栅格系统• 详解Bootstrap中的辅助类• 聊聊Bootstrap4中的网格系统

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网