Bootstrap 網頁顯示組件

標籤

<span class="label label-default">默認標籤(灰色)</span>
<span class="label label-primary">主要標籤(藍色)</span>
<span class="label label-success">成功標籤(綠色)</span>
<span class="label label-info">信息標籤(淺藍色)</span>
<span class="label label-warning">警告標籤(黃色)</span>
<span class="label label-danger">危險標籤(紅色)</span>

徽章

一般用於顯示未讀消息個數，或者顯示新消息個數

<span class="badge">10</span>

Well 文本容器

顯示一段比較好看的文字，一般用來顯示提示信息

<div class="well">這是一個Well文本區域</div>
<div class="well-lg">大號的Well</div>
<div class="well-sm">小號的Well</div>
<div class="well"><blockquote>配合HTML的blockquote標籤更好看</blockquote></div>

Alert 提示文本區域

Alert比Well外觀更加活潑，色彩比較鮮豔

• .alert-success 綠色背景
• .alert-info 藍色背景
• .alert-waring 黃色背景
• .alert-danger 紅色背景

用法：

<div class="alert alert-success">操作成功</div>
<div class="alert alert-info">請填寫個人簡潔</div>
<div class="alert alert-warning">請慎重修改個人屬性</div>
<div class="alert alert-danger">密碼不能爲空</div>

面板

面板是可以包含標題、腳註、內容區的顯示區域，比較大氣美觀

面板的色彩選擇：
- .panel-default 灰色
- .panel-primary 藍色
- .panel-success 綠色
- .panel-info 淺藍
- .panel-warning 黃色
- .panel-danger 紅色

面板的構成

<div class="panel panel-default"><!--面板區域-->
    <div class="panel-heading"><!--面板頭部-->
        <h3 class="panel-title">
            這裏是面板的標題
        </h3>
    </div>
    <div class="panel-body">
        這裏是面板的內容區域
    </div>
    <div class="panel-footer">
        這裏是面板的腳註區域
    </div>
</div>

Jumbotron 超大屏幕布局塊

外國網站常用的首頁標題顯示區域、感覺國內用的不多

<div class="container">
   <div class="jumbotron"><!--超大屏幕區域-->
        <h1>歡迎訪問XX公司</h1>
        <p>世界領先的XXX服務提供商</p>
        <p><a class="btn btn-primary btn-lg">瞭解更多</a>
      </p>
   </div>
</div>

圖片

• .img-responsive 響應式樣式，圖片將自適應父元素
• .img-rounded 圓角圖片
• .img-circle 圓形圖片
• .img-thumbnail 帶邊框樣式

圖標

Bootstrap可以免費使用Glyphicons字體圖標，這個算一個很好的福利。

用法：

<span class="glyphicon glyphicon-plus"></span><!--這是一個添加圖標-->

常見的圖標可從下面的網址查詢：
http://w3c.3306.biz/bootstrap/eg/bootstrap–glyphicons-list.html