縮圖\警示框\進度條\媒體對象\列表組\面板 組件

標籤：

歡迎收看大奧編寫的Bootstrap快速學習筆記（6）縮圖\警示框\進度條\媒體對象\列表組\面板 組件

本學習筆記根據[慕課網]教程修改而來，用它學習Bootstrap，將會帶來全新的體驗哦：

• 縮圖
• 警示框
• 進度條
• 媒體對象
• 列表組
• 面板

詳細介紹

 

• 縮圖 通過配合網格系統來實現，div.container>div.row>div.col-md-3 col-xs-6>a.thumbnail>img來實現，這樣的效果就是當寬屏的時候能夠一行顯示4個縮圖，窄屏的時候一行顯示兩個；那麼配合縮圖的標題、簡介以及按鈕等內容如何顯示呢？通過給a標籤這一級的後面添加一個div.caption容器來實現，標題、簡介與按鈕三者並列，標題用h3標籤顯示，簡介用p標籤顯示，按鈕用p標籤下的兩個同級a.btn標籤顯示，並分別追加class類btn-primary和btn-info；

• 警示框 通過給div容器添加alert alert-XXX類來實現，如果要設定可關閉的警示框，就要給div標籤追加類alert-dismissable，並添加一個button元素<button class="close" type="button" data-dismiss="alert">&times;</button>，還可以在警示框的文本中設定警示框連結，方法就是給a標籤添加alert-link的class類；

• 進度條 通進度條有太多的樣式，但基本的結構是這樣的div.process>div.process-bar[style="width:40%"]，process和process-bar分別還可以追加process-striped和process-bar-striped來給進度條添加條紋效果，再追加active就會顯示動態條紋效果，注意一個div.process>div.process-bar是一個進度條，如果用一個div.process包含多個div.process-bar那麼就會顯示為層疊效果，如果要顯示具體的進度，就要在div.process-bar上添加屬性role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"，還要在該div中寫入<div>50%</div>類似的效果，也就是將50%文字顯示到進度條中；

• 媒體對象 媒體對象就類似於在左邊顯示一個圖片，右邊顯示標題、簡介等，大致的實現結構為最外圍是div.media，其中包含兩個部分：第一部分用a.pull-left>img.media-object實現，顯示的是某圖片連結，第二部分用div.media-body作容器，包含兩個平級的部分，h4.media-heading以及div；如果要嵌套顯示，就要將整個嵌套內容寫在div.media-body的最後邊；如果要用媒體對象列表顯示，就寫成ul.media-list>li.media，li中包含兩個部分：第一部分用a.pull-left>img.media-object實現，顯示的是某圖片連結，第二部分用div.media-body作容器，包含兩個平級的部分，h4.media-heading以及div；這個可以做成一個動態顯示，QQ空間、朋友圈、微博等每條動態都可以看成是一個媒體對象；一個媒體對象列表可以用作一個評論列表；而媒體對象的嵌套可以用作一個評論內容及其回複；

• 列表組 主要的結構就是ul.list-group>li.list-group-item，如果想添加各種顏色可以在li上追加list-group-item-XXX；自訂欄表要使用div.list-group>a.list-group-item>h4.list-group-item-heading p.list-group-item-text；

• 面板 其主要結構是div.panel panel-default>div.panel-heading div.panel-body div.panel-footer，其中panel-default可以改為panel-XXX來改變面板主題；面板中如果要巢狀表格格的話，要把div.panel-body中原先的內容用p標標籤包起來，然後在p標籤後面添加table標籤，table.table table-bordered>thead tbody，thead中 thead>tr>th，tbody中 tbody>tr>td；


注意：知識的積累是一個漫長的過程，請繼續關注後續內容。

縮圖\警示框\進度條\媒體對象\列表組\面板 組件