Web前端 — Bootstrap（8）

本次知識點：

1.分頁

2.标簽

3.徽章

4.巨幕

5.頁頭

6.縮略圖

7.警告框

（1）預設的分頁

<ul class="pagination">

<li><a href="">«</a></li>

<li><a href="">1</a></li>

<li><a href="">2</a></li>

<li><a href="">3</a></li>

<li><a href="">»</a></li>

</ul>

（2）禁用和激活的狀态

<ul class="pagination">

<li class="disabled"><a href="">«</a></li>

<li class="active"><a href="">1</a></li>

<li><a href="">2</a></li>

<li><a href="">3</a></li>

<li><a href="">»</a></li>

</ul>

（3）分頁的尺寸

pagination-lg 、 pagination-sm

<ul class="pagination pagination-lg">

<li><a href="#">«</a></li>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">»</a></li>

</ul>

<ul class="pagination pagination-sm">

<li><a href="#">«</a></li>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">»</a></li>

</ul>

（4）翻頁

    Pager

<ul class="pager">

<li><a href="">previous</a></li>

<li><a href="">next</a></li>

</ul>

（5）對齊的連結

<ul class="pager">

<li class="previous"><a href="">← previous</a></li>

<li class="next"><a href="">next →</a></li>

</ul>

（6）可選的禁用狀态

<ul class="pager">

<li class="previous disabled"><a href="">← previous</a></li>

<li class="next"><a href="">next →</a></li>

</ul>

<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>

badge

<a href="">Messages <span class="badge">20</span></a>

<button class="btn btn-default">Messages <span class="badge">20</span></button>

jumbotron

<div class="jumbotron">

<div class="container">

<h1>hello world!!!</h1>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured

content or information.</p>

<p><a class="btn btn-primary" href="">Learn more</a></p>

</div>

</div>

page-header

<div class="page-header">

<h1>Example page header

<small>Subtext for header</small>

</h1>

</div>

（1）預設樣式

<div class="col-md-3 col-sm-6">

<a class="thumbnail" href="">

<img src="images/kittens.jpg" alt=""/>

</a>

</div>

（2）自定義内容

<div class="col-md-3 col-sm-6">

<div class="thumbnail">

<img src="images/kittens.jpg" alt=""/>

<div class="caption"> <!--text-center-->

<h3>縮略圖示簽</h3>

<p>一些示例文本。一些示例文本。</p>

<p>

<a href="#" class="btn btn-primary" role="button">按鈕</a>

<a href="#" class="btn btn-default" role="button">按鈕 </a>

</p>

</div>

</div>

</div>

（1）基本預設樣式

<div class="alert alert-success">成功！很好地完成了送出。</div>

<div class="alert alert-info">資訊！請注意這個資訊。</div>

<div class="alert alert-warning">警告！請不要送出。</div>

<div class="alert alert-danger">錯誤！請進行一些更改。</div>

（2）可關閉的警告框

<button type="button" class="close" data-dismiss="alert">×</button>           

（3）警告中的連結

<div class="alert alert-success">

<a href="#" class="alert-link">成功！很好地完成了送出。</a>

</div>

原文釋出時間：2018年06月13日 09:21:52

原文作者：Roger_CoderLife

本文來源

CSDN

，如需轉載請聯系原作者