Bootstrap入門（十七）組件11：分頁與標簽

Bootstrap入門（十七）組件11：分頁與標簽

 

1.默認樣式的分頁

2.分頁的大小

3.禁用的分頁

4.翻頁的效果

5.兩端對齊的分頁

6. 標簽的不同樣式

7. 標簽的大小

 

先引入本地的CSS文件

          

<link href="css/bootstrap.min.css" rel="stylesheet">

1.默認樣式的分頁

在瀏覽網頁或者搜索信息的時候，可能會遇到必須瀏覽幾個頁面的情況，分頁為您的網站或應用提供帶有展示頁碼的分頁組件，或者可以使用簡單的翻頁組件。

我們需要在一個<nav>標簽中新建<ul><li>組合來實現，制定<ul>的class為pagination

（假定當前是第三頁,class="active"，沒有class="active"的話每個都是看起來一樣的）

　　　　　<nav>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li class="active"><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </nav>

效果：

2.分頁的大小

分頁也有響應式的大小效果，根據不同的情況使用不同的大小

　　　　  <nav>
            <ul class="pagination pagination-lg">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li class="active"><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </nav>

        <nav>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li class="active"><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </nav>

        <nav>
            <ul class="pagination pagination-sm">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li class="active"><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </nav>

效果：

 

3.禁用的分頁

只需要想禁用的地方加上disabled屬性就可以了

（剛剛也使用了，可以仔細看，在“2”那里，鼠標移動上去會顯示禁用的圖案）

 

4.翻頁的效果

只需要兩個標簽，而且是居中的，<ul>的class為pager

　　　　　<nav>
            <ul class="pager">
                <li><a href="#">上一頁</a></li>
                <li><a href="#">下一頁</a></li>
            </ul>
        </nav>

效果（是在整個瀏覽器水平居中）

5.兩端對齊的分頁

只需要修改<li>的class就可以了，而且是兩端對齊的

　　　　　<nav>
            <ul class="pager">
                <li class="previous"><a href="#">&larr;向前</a></li>
                <li class="next"><a href="#">向后&rarr;</a></li>
            </ul>
        </nav>

效果

 

6. 標簽的不同樣式

在一些網站，我們經常能看到用不同顏色的標簽、按鈕等來顯示當前是怎樣的一個狀態

有不同種類的標簽（用<span>來承載）

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

效果

 

7. 標簽的大小

標簽的大小受<hn>的影響

　　　　 <h3>主標題<span class="label label-default">標識</span></h3>
        <h2>主標題<span class="label label-default">標識</span></h2>
        <h1>主標題<span class="label label-default">標識</span></h1>

效果