前面的話
在Bootstrap中，有一些組件用于提示信息，如 標簽、徽章、巨幕和頁頭。本文將詳細介紹Bootstrap提示信息
標簽
在一些Web頁面中常常會添加一個標簽用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標簽，來告訴用戶
在Bootstrap框架中特意將這樣的效果提取出來成為一個標簽組件，并且以“.label”樣式來實現高亮顯示
使用方法很簡單，可以在使用span這樣的行內標簽
<h3>Example heading <span class="label label-default">New</span></h3>
【自動隱藏】
當沒有內容的時候，自動隱藏
.label:empty { display: none; }
<h3>Example heading <span class="label label-default"></span></h3>
【顏色設置】
和按鈕元素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>
徽章
從某種意義上來說，徽章效果和前面介紹的標簽效果極其相似。也用來做一些提示信息使用。常出現的是一些系統發出的信息，比如系統提示有多少信息未讀
在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>
巨幕
這是一個輕量、靈活的組件，它能延伸至整個瀏覽器視口來展示網站上的關鍵內容
<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>
文章列表
留言列表
