Bootstrap列表組學(xué)習(xí)使用
更新時(shí)間：2017年02月09日 09:57:55 作者：輕擾時(shí)光
這篇文章主要為大家詳細(xì)介紹了Bootstrap列表組的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
這篇文章主要為大家詳細(xì)介紹了Bootstrap列表組的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group"><!--列表組-->
<li class="list-group-item">html</li><!--列表項(xiàng)-->
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
</ul>
</div>
<div class="row">
<ul class="list-group"><!--給列表項(xiàng)添加標(biāo)記，并且標(biāo)記自動(dòng)居右-->
<li class="list-group-item active">html<span class="badge">12</span></li>
<li class="list-group-item">css<span class="badge">21</span></li>
</ul>
</div>
<div class="row">
<div class="list-group"><!--a標(biāo)簽做的列表組，并加上背景色-->
<a class="list-group-item active">html<span class="badge">12</span></a>
<a class="list-group-item disabled">css<span class="badge">21</span></a>
<a class="list-group-item list-group-item-info">javascript<span class="badge">6</span></a>
</div>
</div>
<!--list-group-item-heading:列表組標(biāo)題；list-group-item-text:列表組內(nèi)容-->
<div class="row">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">水果</h4>
<p class="list-group-item-text">東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">水果</h4>
<p>東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">水果</h4>
<p>東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定會(huì)框看東北角空格積分兌換肯定</p>
</li>
</ul>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript使用localStorage判斷設(shè)置值是否過(guò)期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過(guò)期，通過(guò)設(shè)置過(guò)期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過(guò)期，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05
小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理的干貨(經(jīng)典)
工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理知識(shí)經(jīng)常會(huì)用到，下面小編通過(guò)查閱相關(guān)資料及日常記錄的知識(shí)分享到腳本之家平臺(tái)，供大家參考2016-08-08
借用Google的Javascript API Loader來(lái)加速你的網(wǎng)站
加速頁(yè)面加載速度有一個(gè)方法就是把CSS和JS文件放到另外一個(gè)單獨(dú)的服務(wù)器上，這樣在訪問(wèn)量比較大的情況下可以分擔(dān)主服務(wù)器的壓力2009-01-01
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時(shí)候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了BootStrap實(shí)用代碼片段之一，總結(jié)在使用BootStrap中遇到的問(wèn)題，并記錄解決方法，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript console的使用方法實(shí)例分析
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實(shí)例形式分析了JavaScript console的使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問(wèn)題詳解
最近在做一個(gè)web的數(shù)據(jù)統(tǒng)計(jì)部分用到了Echart,下面這篇文章主要給大家介紹了關(guān)于echarts圖形x、y坐標(biāo)文字設(shè)置間隔顯示及相關(guān)問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08