Boostrap 布局控件(四)
阿新 • • 發佈:2017-07-16
鼠標 位置 dism ssa 導航 con mis small 創建
1.Bootstrap 徽章(Badges)
徽章與標簽相似,主要的區別在於徽章的邊角更加圓滑。
徽章(Badges)主要用於突出顯示新的或未讀的項。如需使用徽章,只需要把 <span class="badge"> 添加到鏈接、Bootstrap 導航等這些元素上即可。
下面的實例演示了這點:
<div class="container"> <h2>徽章</h2> <p>.badge 類指定未讀消息的數量:</p> <p><a href="#">收件箱 <span class="badge">21</span></a></p> </div>
2.Bootstrap 頁面標題(Page Header)
頁面標題(Page Header)是個不錯的功能,它會在網頁標題四周添加適當的間距。當一個網頁中有多個標題且每個標題之間需要添加一定的間距時,頁面標題這個功能就顯得特別有用。如需使用頁面標題(Page Header),請把您的標題放置在帶有 class .page-header 的 <div> 中:
<div class="page-header"> <h1>頁面標題實例<small>子標題</small> </h1> </div>
3.Bootstrap 縮略圖
使用 Bootstrap 創建縮略圖的步驟如下:
- 在圖像周圍添加帶有 class .thumbnail 的 <a> 標簽。
- 這會添加四個像素的內邊距(padding)和一個灰色的邊框。
- 當鼠標懸停在圖像上時,會動畫顯示出圖像的輪廓。
4.Bootstrap 警告(Alerts)
通過創建一個 <div>,並向其添加一個 .alert class 和四個上下文 class(即 .alert-success、.alert-info、.alert-warning、.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>
4.1 可取消的警告(Dismissal Alerts)
- 通過創建一個 <div>,並向其添加一個 .alert class 和四個上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來添加一個基本的警告框。
- 同時向上面的 <div> class 添加可選的 .alert-dismissable。
- 添加一個關閉按鈕。
<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功!很好地完成了提交。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 信息!請註意這個信息。 </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 警告!請不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 錯誤!請進行一些更改。 </div>
5.Bootstrap 進度條
5.1默認的進度條
創建一個基本的進度條的步驟如下:
- 添加一個帶有 class .progress 的 <div>。
- 接著,在上面的 <div> 內,添加一個帶有 class .progress-bar 的空的 <div>。
- 添加一個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。
讓我們看看下面的實例:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div> </div>
5.2條紋的進度條
創建一個條紋的進度條的步驟如下:
- 添加一個帶有 class .progress 和 .progress-striped 的 <div>。
- 接著,在上面的 <div> 內,添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中,* 可以是success、info、warning、danger。
- 添加一個帶有百分比表示的寬度的 style 屬性,例如 style="60%"; 表示進度條在 60% 的位置。
讓我們看看下面的實例:
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% 完成(成功)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> <span class="sr-only">10% 完成(危險)</span> </div> </div>
Boostrap 布局控件(四)