Bootstrap 列表组
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap 列表组
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、創建一個基本的列表組的步驟如下：
1、向元素 <ul> 添加 class .list-group。
2、向 <li> 添加 class .list-group-item。只需要在 <li> 元素中添加 <span class="badge">，我們就可以向任意的列表項添加徽章組件，它會自動定位到右邊。
html代碼
<ul class="list-group"><li class="list-group-item">唐代詩人李白</li><li class="list-group-item">唐代詩人李白</li><li class="list-group-item">唐代詩人李白</li><li class="list-group-item">唐代詩人李白</li><li class="list-group-item">周杰倫新歌<span class="badge">新</span><span class="badge">2首</span></li></ul> 效果圖
二、向列表組里添加鏈接，我們只需要使用 <div> 代替 <ul> 元素，html代碼
<div class="list-group"><a href="#" class="list-group-item active" >唐代詩人李白</a><a href="#" class="list-group-item" >唐代詩人李白</a><a href="#" class="list-group-item" >唐代詩人李白</a><a href="#" class="list-group-item" >唐代詩人李白</a><a href="#" class="list-group-item" >唐代詩人李白</a></div> 效果圖三、向列表添加自定義內容，我們可以向上面已添加鏈接的列表組添加任意的 HTML 內容。html代碼
<!DOCTYPE html> <html> <head> <title>Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style>body{margin-top:30px;background: #3E4E70;font-family: '楷體';}p{font-size: 18px;}</style> </head> <body> <div class="container"><div class="list-group"><a href="#" class="list-group-item active" ><h3 class="list-group-item-heading">唐代詩人李白</h3></a><a href="#" class="list-group-item"><h3 class="list-group-item-heading">唐朝著名浪漫主義詩人</h3><p class="list-group-item-text">字太白，號青蓮居士，又號“謫仙人”，被后人譽為“詩仙”，與杜甫并稱為“李杜”.</p></a><a href="#" class="list-group-item"><h3 class="list-group-item-heading">唐朝著名浪漫主義詩人</h3><p class="list-group-item-text">字太白，號青蓮居士，又號“謫仙人”，被后人譽為“詩仙”，與杜甫并稱為“李杜”.</p></a></div> <div class="list-group"><a href="#" class="list-group-item active" ><h3 class="list-group-item-heading">周杰倫</h3></a><a href="#" class="list-group-item"><h3 class="list-group-item-heading">中國臺灣流行樂男歌手、音樂人、演員、導演、編劇、監制、商人。</h3><p class="list-group-item-text">周杰倫熱心公益慈善，多次向中國內地災區捐款捐物.2008年捐款援建希望小學,2014年擔任中國禁毒宣傳形象大使.</p></a><a href="#" class="list-group-item"><h3 class="list-group-item-heading">中國臺灣流行樂男歌手、音樂人、演員、導演、編劇、監制、商人。</h3><p class="list-group-item-text">周杰倫熱心公益慈善，多次向中國內地災區捐款捐物.2008年捐款援建希望小學,2014年擔任中國禁毒宣傳形象大使.</p></a></div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> 效果圖
總結
以上是生活随笔為你收集整理的Bootstrap 列表组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [ROS]（12）ROS通信 —— 参数
- 下一篇： 安全不“放假”，VR安全教育等你沉浸式体