功能強大的Bootstrap效果展示（二）
更新時間：2016年08月03日 08:37:41 作者：qq_32198277
這篇文章主要介紹了功能強大的Bootstrap效果展示，介紹常用Bootstrap效果的使用方法，感興趣的小伙伴們可以參考一下
上一篇已經(jīng)講了一些使用BootStrap的步驟和一些基本使用，點擊查看
這篇博客繼續(xù)給大家介紹一些常用效果的使用，主要有以下幾個組件
1. 下拉菜單
2. 導航欄
3. 進度條
4. 媒體對象
5. 分頁
6. 列表
首先要導入BootStrap的css和js
<link rel="stylesheet" href="css/bootstrap.min.css"> <!--最好也引用cdn的css，有些樣式文件里沒有--> <link rel="stylesheet" > <script src="js/jquery-3.1.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
1.下拉菜單
主要由button和ul組成，可以添加小標題和分割線
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> 地鐵線路 <!--這個是向下的三角符號--> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <!--這個是小標題--> <li class="dropdown-header">地鐵</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 class="divider"></li> <li><a href="#">5號線</a> </li> </ul> </div>
2.導航欄
導航欄幾乎是每個網(wǎng)頁的標配，學好怎么用一定沒錯
這是網(wǎng)頁頂部的導航欄
<!--將nav的類設(shè)為navbar-inverse更加高端,設(shè)為navbar-static-top將navbar的圓角去掉并且靜止固定在頂部-->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!--導航欄的開頭，通常是文字或者圖片-->
<div class="navbar-header">
<!--這個按鈕可以在位置不夠時點開菜單-->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--可將Brand換成img-->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!--要id設(shè)為bs-example-navbar-collapse-1才能伸縮后被點開-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">會員管理</a></li>
<li><a href="#">會員管理</a></li>
<li><a href="#">會員管理</a></li>
<li><a href="#">會員管理</a></li>
<!--導航欄中加一個下拉菜單-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
系統(tǒng)維護<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">恢復系統(tǒng)</a></li>
<li><a href="#">系統(tǒng)備份</a></li>
<li><a href="#">斷開連接</a></li>
<li><a href="#">刪除用戶</a></li>
</ul>
</li>
</ul>
<!--先寫navbar-right越靠右-->
<!--導航欄中的按鈕-->
<button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>
<!--導航欄中的表單-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="輸入搜索內(nèi)容">
</div>
<button type="summit" class="btn btn-default">搜索</button>
</form>
</div>
</div>
</nav>
我們在用網(wǎng)頁瀏覽博客或者文件的時候，都有一個層級，這時如果是想返回上一級或者上幾級就需要位置的導航欄
<!--導航條--> <ol class="breadcrumb"> <li><a href="#">我的后臺</a> </li> <li><a href="#">系統(tǒng)分析</a> </li> <!--當前位置不可以點擊跳轉(zhuǎn)--> <li class="active">訪問統(tǒng)計</li> </ol>
3.進度條
<div class="progress"> <!--progress-bar-striped設(shè)置條紋，active設(shè)置動畫--> <!--根據(jù)style寬度的百分比顯示進度條的百分比--> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> <span class="sr-only">30%</span> <!--文字顯示在進度條中間--> 30% </div> </div>
4.媒體對象
在微博或者Twitter里的消息基本上都是這種樣式
左邊是頭像，右邊是標題和文字
<div class="media"> <div class="media-left"> <img class="media-object" src="images/1.jpg"> </div> <div class=" media-body"> <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 class="pagination"> <li class="disabled"> <a href="#" aria-label="Previous"> <!--向左的雙箭頭--> <span aria-hidden="true">«</span> </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="#">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 class="pager"> <li><a href="#"><span aria-hidden="true">←</span>上一頁</a> </li> <li><a href="#"><span aria-hidden="true">→</span>下一頁 </a> </li> </ul>
上面的寫法是兩個按鈕連在一起的
下面的寫法是兩個按鈕分布在兩側(cè)
<ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span>上一頁</a> </li> <li class="next"><a href="#"><span aria-hidden="true">→</span>下一頁 </a> </li> </ul>
6.列表
列表的效果十分常見，用起來也十分簡單
<div class="list-group col-md-3"> <!--第一項被選中--> <a href="#" class="list-group-item active">訪問統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> <a href="#" class="list-group-item">日志統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> <a href="#" class="list-group-item">信息統(tǒng)計</a> </div>
我用上面的組件做了一個后臺的靜態(tài)網(wǎng)頁
效果如圖
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
實例分析eval的一些使用方法與技巧。2009-03-03
關(guān)于JavaScript的面向?qū)ο蠛屠^承有利新手學習
這是一篇關(guān)于JavaScript的面向?qū)ο蠛屠^承的文章,對想學習JavaScript中面向?qū)ο蟮耐瑢W來說是很有幫助,雖然一些Javascript用戶可能永遠也不需要知道原型或面向?qū)ο笳Z言的性質(zhì)，但是那些來自傳統(tǒng)面向?qū)ο蟮恼Z言的開發(fā)者使用的時候會發(fā)現(xiàn)JavaScript的繼承模型非常的奇怪2013-01-01
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細介紹了javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript為事件句柄綁定監(jiān)聽函數(shù)實例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實例詳細分析了常見的事件句柄綁定監(jiān)聽函數(shù)的實現(xiàn)技巧,并實例講解了跨瀏覽器的實現(xiàn)方法,需要的朋友可以參考下2015-12-12
本文給出如何在頁面上同步顯示服務器時間的解決方案，能夠?qū)崿F(xiàn)同步服務器時間、同步倒計時，卻不占用服務器太多資源，下面我給寫出實現(xiàn)的思路2015-09-09
這篇文章主要為大家詳細介紹了JS中的二叉樹遍歷，何為二叉樹，什么是二叉樹的遍歷，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了JavaScript中常用的六種互動方法示例，是個人的一些經(jīng)驗總結(jié)，這里分享給大家，希望對大家能夠有所幫助。2015-03-03
計時器效果想必大家都見到過吧，其實使用js可以很輕松的實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要給大家簡單介紹了javascript中return語句，有需要的小伙伴可以參考下。2015-07-07