上一篇已經講了一些使用BootStrap的步驟和一些基本使用，點擊查看
這篇博客繼續給大家介紹一些常用效果的使用，主要有以下幾個組件
1. 下拉菜單
2. 導航欄
3. 進度條
4. 媒體對象
5. 分頁
6. 列表
首先要導入BootStrap的css和js
<link rel="stylesheet" href="css/bootstrap.min.css"><!--最好也引用cdn的css，有些樣式文件裡沒有--><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="js/jquery-3.1.0.min.js"></script><script src="js/bootstrap.min.js"></script>
1.下拉菜單
主要由button和ul組成，可以添加小標題和分割線
<div> <button type="button" data-toggle="dropdown" aria-expanded="false"> 地鐵線路<!--這個是向下的三角符號--> <span></span> </button> <ul role="menu"> <!--這個是小標題--> <li>地鐵</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></li> <li><a href="#">5號線</a> </li> </ul> </div>
2.導航欄
導航欄幾乎是每個網頁的標配，學好怎麼用一定沒錯
這是網頁頂部的導航欄
<!--將nav的類設為navbar-inverse更加高端,設為navbar-static-top將navbar的圓角去掉並且靜止固定在頂部--> <nav role="navigation"> <div> <!--導航欄的開頭，通常是文字或者圖片--> <div> <!--這個按鈕可以在位置不夠時點開菜單--> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <!--可將Brand換成img--> <a href="#">Brand</a> </div> <!--要id設為bs-example-navbar-collapse-1才能伸縮後被點開--> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">會員管理</a></li> <li><a href="#">會員管理</a></li> <li><a href="#">會員管理</a></li> <li><a href="#">會員管理</a></li> <!--導航欄中加一個下拉菜單--> <li> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"> 系統維護<span></span> </a> <ul role="menu"> <li><a href="#">恢復系統</a></li> <li><a href="#">系統備份</a></li> <li><a href="#">斷開連接</a></li> <li><a href="#">刪除用戶</a></li> </ul> </li> </ul> <!--先寫navbar-right越靠右--> <!--導航欄中的按鈕--> <button type="button">Sign in</button> <!--導航欄中的表單--> <form role="search"> <div> <input type="text" placeholder="輸入搜索內容"> </div> <button type="summit">搜索</button> </form> </div> </div> </nav>
我們在用網頁瀏覽博客或者文件的時候，都有一個層級，這時如果是想返回上一級或者上幾級就需要位置的導航欄
<!--導航條--> <ol> <li><a href="#">我的後台</a> </li> <li><a href="#">系統分析</a> </li> <!--當前位置不可以點擊跳轉--> <li>訪問統計</li> </ol>
3.進度條
<div> <!--progress-bar-striped設置條紋，active設置動畫--> <!--根據style寬度的百分比顯示進度條的百分比--> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>30%</span> <!--文字顯示在進度條中間--> 30% </div> </div>
4.媒體對象
在微博或者Twitter裡的消息基本上都是這種樣式
左邊是頭像，右邊是標題和文字
<div> <div> <img src="images/1.jpg"> </div> <div> <h4>Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> </div> </div>
5.分頁
這是有多個頁碼的
<ul> <li> <a href="#" aria-label="Previous"> <!--向左的雙箭頭--> <span aria-hidden="true">«</span> </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="#">6</a> </li> <li><a href="#">7</a> </li> <li> <a href="#" aria-label="Next"> <!--向右的雙箭頭--> <span aria-hidden="true">»</span> </a> </li> </ul>
這是只有上一頁和下一頁的
<ul> <li><a href="#"><span aria-hidden="true">←</span>上一頁</a> </li> <li><a href="#"><span aria-hidden="true">→</span>下一頁</a> </li> </ul>
上面的寫法是兩個按鈕連在一起的
下面的寫法是兩個按鈕分佈在兩側
<ul> <li><a href="#"><span aria-hidden="true">←</span>上一頁</a> </li> <li><a href="#"><span aria-hidden="true">→</span>下一頁</a> </li> </ul>
6.列表
列表的效果十分常見，用起來也十分簡單
<div> <!--第一項被選中--> <a href="#">訪問統計</a> <a href="#">信息統計</a> <a href="#">日誌統計</a> <a href="#">信息統計</a> <a href="#">信息統計</a> <a href="#">信息統計</a> <a href="#">信息統計</a> <a href="#">信息統計</a> </div>
我用上面的組件做了一個後台的靜態網頁
效果如圖
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。