Bootstrap 组件：徽章（badge）、 巨幕（jumbotron）和 页头组件 (page-header)

作者:WangMin
格言:努力做好自己喜欢的每一件事

徽章（badge）

给链接、导航等元素嵌套<span class="badge">元素，主要用于突出显示新的或未读的信息列表。具体使用参考网站结构。

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

注意：如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏。但是徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持:empty选择符。

巨幕（jumbotron）

它是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。如果一个网站需要在任何地方展示它的关键内容都可以使用这个类 .jumbotron，它的用法如下：

<div class="jumbotron" >
         <h1>大标题</h1>
         <p>标题简介</p>
         <p><a class="btn btn-primary btn-lg" href="#" role="button">标题详情链接</a></p>
 </div>

默认样式如下：

注意：

1. 如果需要改变默认样式，只需给这个类.jumbotron添加属性就可以的到你想要的样式了。

2. 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有.container元素的外面，并在组件内部添加一个.container元素。

<div class="jumbotron">
    <div class="container">
        <h1>大标题</h1>
        <p>标题简介</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">标题详情链接</a></p>
    </div>
</div>

页头组件 (page-header)

页头组件(.page-header)能够为h1标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持h1标签内内嵌small元素的默认效果。用法如下：

<div class="page-header">
     <h1>标题<small> 2020/7/28 13:00:00</small></h1>
</div>

就先分享到这里!! :smile: 后续继续更新!!