Bootstrap列表組學(xué)習(xí)使用

更新時間：2017年02月09日 09:57:55 作者：輕擾時光

這篇文章主要為大家詳細介紹了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)文章

js日歷相關(guān)函數(shù)使用詳解
這篇文章主要為大家詳細介紹了js日歷相關(guān)函數(shù)的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
javascript函數(shù)式編程程序員的工具集
函數(shù)式編程語言一向被認為是比其它編程語言更高深的語言。一是因為函數(shù)式編程語言的語法很另類，比如Lisp語言，二是因為函數(shù)式編程語言都很古老，比如Schema語言。在如今面向?qū)ο笳Z言大行其道的時代，函數(shù)式編程語言有其特殊的優(yōu)勢
2015-10-10
JavaScript 防抖和節(jié)流遇見的奇怪問題及解決
這篇文章主要介紹了JavaScript 防抖和節(jié)流遇見的奇怪問題及解決，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-11-11
js模仿php中strtotime()與date()函數(shù)實現(xiàn)方法
這篇文章主要介紹了js模仿php中strtotime()與date()函數(shù)實現(xiàn)方法,涉及javascript時間操作的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
2015-08-08
談?wù)凧S中常遇到的瀏覽器兼容問題和解決方法
這篇文章主要介紹了談?wù)凧S中常遇到的瀏覽器兼容問題和解決方法，有些代碼在某些瀏覽器的某些版本中表現(xiàn)出不兼容，影響頁面的體驗；這時就需要處理了這些兼容問題，讓頁面在多個版本的瀏覽器上運行良好。
2016-12-12
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)硪黄猨s-FCC算法-No repeats please字符串的全排列(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
利用JavaScript構(gòu)建樹形圖的方法詳解
?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經(jīng)驗還想創(chuàng)建一個，那將會有些復(fù)雜。下面是一個詳細教程，教你如何使用JavaScript創(chuàng)建交互式樹形圖
2022-06-06
FireFox的getYear的注意事項
FireFox的getYear的注意事項...
2007-04-04
javascript實現(xiàn)瀏覽器窗口傳遞參數(shù)的方法
這篇文章主要介紹了javascript實現(xiàn)瀏覽器窗口傳遞參數(shù),需要的朋友可以參考下
2014-09-09
[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄猍js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08