第九章之路徑分頁標(biāo)簽與徽章組件
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。
學(xué)習(xí)要點(diǎn):
1.路徑組件
2.分頁組件
3.標(biāo)簽組件
4.徽章組件
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 的四個(gè)組件功能:路徑組件、分頁組件、標(biāo)簽組件和徽章組件。
一.路徑組件
路徑組件也叫做面包屑導(dǎo)航。
//面包屑導(dǎo)航 <ol class="breadcrumb"> <li> <a href="#">首頁</a> </li> <li> <a href="#">產(chǎn)品列表</a> </li> <li class="active"> 韓版 2015 年羊絨毛衣 </li> </ol>
二.分頁組件
分頁組件可以提供帶有展示頁面的功能。
//默認(rèn)分頁 <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="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#">»</a> </li> </ul> //首選項(xiàng)和禁用 <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> //設(shè)置尺寸,四種 lg、默認(rèn)、sm 和 xs <ul class="pagination pagination-lg"> //翻頁效果 <ul class="pager"> <li> <a href="#">上一頁</a> </li> <li> <a href="#">下一頁</a> </li> </ul> //對齊翻頁鏈接 <ul class="pager"> <li class="previous"> <a href="#">上一頁</a> </li> <li class="next"> <a href="#">下一頁</a> </li> </ul> //翻頁項(xiàng)禁用 <li class="previous disabled"><a href="#">上一頁</a></li>
三.標(biāo)簽
//在文本后面帶上標(biāo)簽 <h3>標(biāo)簽 <span class="label label-default">new</span></h3> //不同色調(diào)的標(biāo)簽 <h3>標(biāo)簽 <span class="label label-primary">new</span></h3> <h3>標(biāo)簽 <span class="label label-success">new</span></h3> <h3>標(biāo)簽 <span class="label label-info">new</span></h3> <h3>標(biāo)簽 <span class="label label-warning">new</span></h3> <h3>標(biāo)簽 <span class="label label-danger">new</span></h3>
四.徽章
//未讀信息數(shù)量徽章 <a href="#">信息 <span class="badge">10</span></a> //按鈕中使用徽章 <button class="btn btn-success"> 提交 <span class="badge">3</span> </button> //激活狀態(tài)自動適配色調(diào) <ul class="nav nav-pills"> <li class="active"> <a href="#">首頁 <span class="badge">2</span></a> </li> <li> <a href="#">資訊</a> </li> </ul>
以上所述是小編給大家介紹的Bootstrap組件之路徑分頁標(biāo)簽與徽章組件,希望對大家有所幫助!
相關(guān)文章
JavaScript中函數(shù)的防抖與節(jié)流詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的防抖與節(jié)流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-0210個(gè)基于瀏覽器的JavaScript調(diào)試工具分享
調(diào)試Javascript可能是web開發(fā)中最讓人郁悶的事情,這里是10款我們精選的基于瀏覽器的JS在線調(diào)試工具,感興趣的朋友可以參考下,或許對你有所幫助2013-02-02javascript parseInt() 函數(shù)的進(jìn)制轉(zhuǎn)換注意細(xì)節(jié)
parseInt(string, radix) 有2個(gè)參數(shù),第一個(gè)string 是傳入的數(shù)值,第二個(gè)radix是 傳入數(shù)值的進(jìn)制,參數(shù)radix 可以忽略,默認(rèn)為 10,各種進(jìn)制的數(shù)轉(zhuǎn)換為 十進(jìn)制整數(shù),接下來詳細(xì)介紹,感興趣的朋友可以了解下哦2013-01-01淺談JavaScript窗體Window.ShowModalDialog使用
這篇文章主要介紹了淺談JavaScript窗體Window.ShowModalDialog使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)(推薦)
jQuery中直接通過$(this).index()即可得到當(dāng)前元素的下標(biāo)。下面通過實(shí)例給大家介紹JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo),需要的朋友參考下吧2017-06-06ros::spin() 和 ros::spinOnce()函數(shù)的區(qū)別及詳解
這篇文章主要介紹了ros::spin() 和 ros::spinOnce()函數(shù)的區(qū)別及詳解的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感謝興趣的朋友一起看看吧2016-10-10typescript編寫微信小程序創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了typescript編寫微信小程序創(chuàng)建項(xiàng)目的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02