亚洲野狼伊人,久热久草线在视频

列表組

列表組是Bootstrap框架新增的一個組件，可以用來制作列表清單、垂直導航等效果，也可以配合其他的組件制作出更漂亮的組件。由于其在Bootstrap是一個獨立的組件，所以也對應有自己獨立源碼：

? LESS版本：對應的源碼文件 list-group.less

? Sass版本：對應的源碼文件是 _list-group.scss

? 編譯出的Bootstrap版本：對應的源碼bootstrap.css文件第4820行～第4994行

下面幾個小節會對這幾種列表組詳細講解，大家不要心急噢！

任務

?不會了怎么辦

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>列表組</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body{padding:50px;} </style> </head> <body> <h3>基礎列表組</h3> <ul class="list-group"> <li class="list-group-item">揭開CSS3的面紗</li> <li class="list-group-item">CSS3選擇器</li> <li class="list-group-item">CSS3邊框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul> <h3>帶徽章的列表組</h3> <ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>揭開CSS3的面 </li> <li class="list-group-item"> <span class="badge">456</span>CSS3選擇器 </li> <li class="list-group-item"> <span class="badge">892</span>CSS3邊框 </li> <li class="list-group-item"> <span class="badge">90</span>CSS3背景 </li> <li class="list-group-item"> <span class="badge">1290</span>CSS3文本 </li> </ul> <h3>帶鏈接的列表組</h3> <ul class="list-group"> <li class="list-group-item"> <a href="##">揭開CSS3的面</a> </li> <li class="list-group-item"> <a href="##">CSS3選擇器</a> </li> <li class="list-group-item"> <a href="##">CSS3邊框</a> </li> <li class="list-group-item"> <a href="##">CSS3背景</a> </li> <li class="list-group-item"> <a href="##">CSS3文本</a> </li> </ul> <h3>自定義列表組</h3> <div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">圖解CSS3</h4> <p class="list-group-item-text">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性...</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">Sass中國</h4> <p class="list-group-item-text">致力于為中國開發者提供最全面，最具影響力，最前沿的Sass相關技術與教程...</p> </a> </div> <h3>組合列表項的狀態</h3> <div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a> </div> <h3>多彩列表組</h3> <div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a> <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a> <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a> </div> <script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-18 列表組

列表組

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-18 列表組

熱搜

最近搜索清空

列表組

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～