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