第 12 章列表組面板和嵌入組件 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 12 章列表組面板和嵌入組件 **學習要點：** 1.列表組組件 2.面板組件 3.響應式嵌入組件主講教師：李炎恢本節課我們主要學習一下 Bootstrap 的三個組件功能：列表組組件、面板組件、響應式嵌入組件。 **一．列表組組件** 列表組組件用于顯示一組列表的組件。 //基本實例 ``` <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> ``` //列表項帶勛章 ``` <li class="list-group-item"> 1.這是起始 <span class="badge">10</span> </li> ``` //鏈接和首選 ``` <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> ``` //按鈕式列表 ``` <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> ``` //設置項目被禁用 ``` class="list-group-item disabled" ``` //情景類 ``` <li class="list-group-item list-group-item-success"> 3.這是第三排信息 </li> ``` //定制內容 ``` <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> ``` **二．面板組件** 面板組件就是一個存放內容的容器組件。 //基本實例 ``` <div class="panel panel-default"> <div class="panel-body"> 這里是詳細內容區！ </div> </div> ``` //帶標題容器的面板 ``` <div class="panel panel-default"> <div class="panel-heading"> 面板標題 </div> <div class="panel-body"> 這里是詳細內容區！ </div> </div> ``` //也可以設置標題元素 ``` <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> ``` //帶注腳的面板 ``` <div class="panel-footer"> 這里是底部 </div> ``` //情景效果：default、success、info、warning、danger、primary ``` <div class="panel panel-success"> ``` //表格類面板 ``` <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> ``` //列表類面板 ``` <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 響應式 ``` <div class="embed-responsive embed-responsive-16by9"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed> </div> ``` //4:3 響應式 ``` <div class="embed-responsive embed-responsive-4by3"> <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed> </div> ```