Bootstrap面包屑導航、分頁、標簽、徽章

jopen 8年前發布 | 32K 次閱讀 前端技術

面包屑導航

Bootstrap 中的面包屑導航（Breadcrumbs）是一個簡單的帶有 .breadcrumb class 的無序列表。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width,initial-scale = 1.0">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src = "js/jquery-1.11.2.min.js"></script>
    <title>CSSDemo</title>
</head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#"> 瀘沽湖</a></li>
            <li class="active"><a href="#">青海</a></li>
            <li><a href="#">阿里</a></li>
            <li><a href="#">林芝</a></li>
        </ul>
   </div>
</body>
</html>


.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.active看起來并無效果。
審查元素，可以看出.active{color:#777;}，但是a標簽是不會繼承父元素的文字顏色的。如果想要看出效果，可以去掉.active里面的a標簽，直接寫成<li class = "active">青海</li>.
不知這是否算是一個Bug，還是bootstrap故意這樣設置。不是很理解。


Bootstrap 分頁

給ul加上class .pagination。不過需要注意的是，頁碼需要寫在a標簽中，才能呈現出下面的樣式。 

<body>
    <div class="container">
        <ul class="pagination">
            <li><a href="#">?</a> </li>
            <li class="disabled"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="active"><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">?</a> </li>
        </ul>
   </div>
</body>


給ul加上class .pagination-lg 或者.pagination-sm可以得到不同大小的分頁效果

翻頁（Pager）

創建一個簡單的分頁鏈接為用戶提供導航，可通過翻頁來實現。與分頁鏈接一樣，翻頁也是無序列表。默認情況下，鏈接是居中顯示。 

<body>
    <div class="container">
        <ul class="pager">
            <li><a href="#">previous</a></li>
            <li><a href="#">next</a></li>
        </ul>
   </div>
</body>

通過給li加上class .previous可以使鏈接左對齊，給li加上class .next可以使鏈接右對齊。


翻頁的狀態


<body>
    <div class="container">
        <ul class="pager">
            <li class="previous"><a href="#">previous</a></li>
            <li class="next disabled"><a href="#">next</a></li>
        </ul>
   </div>
</body>
注意，是加disabled的。

Bootstrap 標簽

標簽可用于計數、提示或頁面上其他的標記顯示。使用 class .label 來顯示標簽 

<body>
    <div class="container">
        <h2>西北<span class="label-warning">茶卡鹽湖</span></h2>
        <h2>新疆<span class="label-danger">喀納斯湖</span></h2>
        <h2>云南<span class="label-info">瀘沽湖</span></h2>
   </div>
</body>


同p標簽一樣，可以使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變
標簽的外觀

Bootstrap 徽章

徽章與標簽相似，主要的區別在于徽章的邊角更加圓滑。徽章（Badges）主要用于突出顯示新的或未讀的項。如需使用徽章，只需要把 

<span class="badge"> 添加到鏈接、Bootstrap 導航等這些元素上即可。

<body>
    <div class="container">
        <ul class="nav nav-pills nav-stacked col-lg-3">
            <li class="active">
                <a href="#">
                    <span class="badge pull-right">4000</span>
                    瀘沽湖
                </a>
            </li>
            <li><a href="#">青海湖</a></li>
            <li>
                <a href="#">
                    <span class="badge pull-right">30000</span>
                    九寨溝
                </a>
            </li>
        </ul>
    </div>
</body>



文章最后向大家推薦下webstorm編輯器，真的是好使得不要不要的，欲罷不能！！！


來自： http://blog.csdn.net/liuyan19891230/article/details/50537086

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！