這篇文章主要為大家展示了“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:列表組內容--> <div class="row"> <ul class="list-group"> <li class="list-group-item"> <h5 class="list-group-item-heading">水果</h5> <p class="list-group-item-text">東北角空格積分兌換肯定會框看東北角空格積分兌換肯定會框看東北角空格積分兌換肯定</p> </li> <li class="list-group-item"> <h5 class="list-group-item-heading">水果</h5> <p>東北角空格積分兌換肯定會框看東北角空格積分兌換肯定會框看東北角空格積分兌換肯定</p> </li> <li class="list-group-item"> <h5 class="list-group-item-heading">水果</h5> <p>東北角空格積分兌換肯定會框看東北角空格積分兌換肯定會框看東北角空格積分兌換肯定</p> </li> </ul> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
效果圖：
以上是“Bootstrap列表組怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
