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