Bootstrap基本組件學習筆記之列表組(11)
更新時間：2016年12月07日 14:56:15 作者：kikay
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之列表組,具有一定的參考價值，感興趣的小伙伴們可以參考一下
列表組件用于以列表形式呈現(xiàn)復(fù)雜的和自定義的內(nèi)容。
創(chuàng)建一個列表組，只需要完成以下兩步：
（1）向元素 <ul> 添加 class .list-group；
（2）向 <li> 添加 class .list-group-item。
看下面的例子：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>列表組</title> </head> <body> <div class="container"> <div class="col-lg-3"> <div class="page-header"> <h1>排行榜</h1> </div> <ul class="list-group"> <li class="list-group-item"> <a href="#"> kikay <span class="badge navbar-right">255</span> </a> </li> <li class="list-group-item"> <a href="#"> Tom <span class="badge navbar-right">125</span> </a> </li> <li class="list-group-item"> <a href="#"> 小花 <span class="badge navbar-right">101</span> </a> </li> </ul> </div> <div class="col-lg-3"> <div class="page-header"> <h1>新聞列表</h1> </div> <div class="list-group"> <div class="list-group-item active"> <h3 class="list-group-item-heading">新聞標題1</h3> <p class="list-group-item-text">新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容</p> </div> <div class="list-group-item list-group-item-info"> <h3 class="list-group-item-heading">新聞標題2</h3> <p class="list-group-item-text">新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容</p> </div> <div class="list-group-item list-group-item-danger"> <h3 class="list-group-item-heading">新聞標題3</h3> <p class="list-group-item-text">新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容新聞內(nèi)容</p> </div> </div> </div> </div> </body> </html>
效果如下：
最后說明下，上面的例子的“排行榜”中，向列表項添加徽章組件。只需要在<li>元素中添加<span class="badge">即可。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
一個小項目中用到，奉命進行修改，定位到2009-03-03
js 遍歷json的方法有很多，在本文為大家詳細介紹下如何返回的map內(nèi)容，感興趣的朋友可以參考下2013-10-10
javascript使用數(shù)組的push方法完成快速排序
排序的方法有很多，本節(jié)為大家介紹的是使用數(shù)組的push方法完成快速排序，當然你也可以舉一反三2014-09-09
這篇文章主要介紹了JavaScript對象之深度克隆介紹,本文詳細的講解了什么是對象深度克隆,并給出了示例代碼,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了基于JS實現(xiàn)父組件的請求服務(wù)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
three.js是一款webGL框架，由于其易用性被廣泛應(yīng)用。接下來通過本文給大家分享three.js加載obj模型的實例代碼，需要的朋友參考下吧
2017-11-11 
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下
2018-09-09 
學習C#的朋友都知道format()這個方法，本文給大家介紹在javascript中如何實現(xiàn)此操作，js模擬C#字符串格式化操作，需要的盆友一起學習吧
2015-08-08 
這篇文章主要介紹了ES6 中可以提升幸福度的小功能,在量解構(gòu)賦值的用途，函數(shù)的用處等方面給大家介紹，需要的朋友可以參考下
2018-08-08