28-标签-徽章-巨幕-缩略图-警告框

徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a> 
<button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>Code language: HTML, XML (xml)

巨幕

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>Code language: HTML, XML (xml)

缩略图

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p>
          <a href="#" class="btn btn-primary" role="button">Button</a> 
          <a href="#" class="btn btn-default" role="button">Button</a>
        </p>
      </div>
    </div>
  </div>
</div>Code language: JavaScript (javascript)

警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>Code language: HTML, XML (xml)

可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>Code language: HTML, XML (xml)