列表組和嵌入組件 · 隨堂筆記-JAVA103班

### 列表組組件列表組組件用于顯示一組列表的組件。 ~~~html <ul class="list-group"> <li class="list-group-item">1.這是起始</li> <li class="list-group-item">2.這是第二條數據</li> <li class="list-group-item">3.這是第三排信息</li> <li class="list-group-item">4.這是末尾</li> </ul> ~~~ **列表項帶勛章** ~~~html <li class="list-group-item"> MESSAGE <span class="badge">10</span> </li> ~~~ **鏈接和首選** ~~~html <div class="list-group"> <a href="#" class="list-group-item active">1.這是起始 <span class="badge">10</span> </a> <a href="#" class="list-group-item">2.這是第二條數據</a> <a href="#" class="list-group-item">3.這是第三排信息</a> <a href="#" class="list-group-item">4.這是末尾</a> </div> ~~~ **按鈕式列表** ~~~html <div class="list-group"> <button class="list-group-item active">1.這是起始 <span class="badge">10</span> </button> <button class="list-group-item">2.這是第二條數據</button> <button class="list-group-item">3.這是第三排信息</button> <button class="list-group-item">4.這是末尾</button> </div> ~~~ **設置項目被禁用** ~~~html class="list-group-item disabled" ~~~ **情景類** 為列表中的條目添加情境類，默認樣式或鏈接列表都可以。還可以為列表中的條目設置` .active` 狀態。 ~~~html <li class="list-group-item list-group-item-success"> 3.這是第三排信息</li> ~~~ **定制內容** 列表組中的每個元素都可以是任何 HTML 內容，甚至是像下面的帶鏈接的列表組。 ~~~html <div class="list-group"> <a href="#" class="list-group-item active"> <h4>內容標題</h4> <p class="list-group-item-text">這里是相關內容詳情！</p> </a> <a href="#" class="list-group-item"> <h4>內容標題</h4> <p class="list-group-item-text">這里是相關內容詳情！</p> </a> <a href="#" class="list-group-item"> <h4>內容標題</h4> <p class="list-group-item-text">這里是相關內容詳情！</p> </a> </div> ~~~ ### 面板組件面板組件就是一個存放內容的容器組件。默認的` .panel `組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。 ~~~html <div class="panel panel-default"> <div class="panel-body"> 這里是詳細內容區！ </div> </div> ~~~ **帶標題容器的面板** ~~~html <div class="panel panel-default"> <div class="panel-heading"> 面板標題 </div> <div class="panel-body"> 這里是詳細內容區！ </div> </div> ~~~ //也可以設置標題元素 ~~~html <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> ~~~ **帶注腳的面板** 把按鈕或次要的文本放入 .panel-footer 容器內。 ~~~html <div class="panel-footer"> 這里是底部 </div> ~~~ **情景效果：default、success、info、warning、danger、primary ** ~~~html <div class="panel panel-success"> ~~~ **表格類面板** ~~~html <div class="panel panel-default"> <div class="panel-heading"> 表格標題 </div> <div class="panel-body"> <p>這里是表格標題的詳細內容！</p> </div> <table class="table"> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div> ~~~ **列表類面板** ~~~html <div class="panel panel-default"> <div class="panel-heading"> 表格標題 </div> <div class="panel-body"> <p>這里是表格標題的詳細內容！</p> </div> <ul class="list-group"> <li class="list-group-item">1.這里是首頁</li> <li class="list-group-item">2.這里是第二個項目</li> <li class="list-group-item">3.這里是第三個項目</li> <li class="list-group-item">4.這里是第四個項目</li> </ul> </div> ~~~ ### 響應式嵌入組件根據被嵌入內容的外部容器的寬度，自動創建一個固定的比例，從而讓瀏覽器自動確定內容的尺寸，能夠在各種設備上縮放。這些規則可以直接用于`<iframe>`、`<embed>`、`<video>`和`<object>`元素。 **16:9 響應式** ~~~html <div class="embed-responsive embed-responsive-16by9"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"> </embed> </div> ~~~ **4:3 響應式** ~~~html <div class="embed-responsive embed-responsive-4by3"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"> </embed> </div> ~~~