Bootstrap響應式前端框架筆記十四——媒體對象與列表組

Bootstrap響應式前端框架筆記十四——媒體對象與列表組

    在移動開發中常常會使用到列表，使用媒體對象能夠方便的建立列表中每一行元素，常規的媒體對象實例以下：

<p>常規的媒體對象</p>
		<div class="media">
			<div class="media-left">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院：經濟不會發生硬着陸 警戒高房價對消費擠出效應</h4>
				從2010年開始中國經濟增速逐年下滑，到2015年經濟增速爲6.9%，這是從1990年以來最低的增速，也是從改革開放以來首次連續六年經濟增速下滑。因爲今年前三季度經濟增速爲6.7%，北京大學國家發展研究院名譽院長、國務院參事林毅夫在18日舉行的第一屆國家發展論壇上表示， 2016年的經濟增速還會繼續下行，低於6.9%。
			</div>
         </div>

效果以下圖所示：

使用media-middle類與media-bottom類能夠設置媒體對象居中或者底部對齊，示例以下：

<p>媒體對象居中顯示</p>
		<div class="media">
			<div class="media-left media-middle">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院：經濟不會發生硬着陸 警戒高房價對消費擠出效應</h4> 從2010年開始中國經濟增速逐年下滑，到2015年經濟增速爲6.9%，這是從1990年以來最低的增速，也是從改革開放以來首次連續六年經濟增速下滑。因爲今年前三季度經濟增速爲6.7%，北京大學國家發展研究院名譽院長、國務院參事林毅夫在18日舉行的第一屆國家發展論壇上表示， 2016年的經濟增速還會繼續下行，低於6.9%。
			</div>
		</div>
		<br />
		<p>媒體對象底部對齊</p>
		<div class="media">
			<div class="media-left media-bottom">
				<img src="image/icon.png" />
			</div>
			<div class="media-body">
				<h4 class="media-heading">社科院：經濟不會發生硬着陸 警戒高房價對消費擠出效應</h4> 從2010年開始中國經濟增速逐年下滑，到2015年經濟增速爲6.9%，這是從1990年以來最低的增速，也是從改革開放以來首次連續六年經濟增速下滑。因爲今年前三季度經濟增速爲6.7%，北京大學國家發展研究院名譽院長、國務院參事林毅夫在18日舉行的第一屆國家發展論壇上表示， 2016年的經濟增速還會繼續下行，低於6.9%。
			</div>
		</div>

效果以下圖所示：

    在實際開發中，列表組的應用也十分普遍，Bootstrap中定義的列表組樣式十分靈活，開發者能夠靈活的對其進行自定義操做，示例以下：

<p>列表組示例</p>
		<ul class="list-group">
			<li class="list-group-item list-group-item-info">
				未讀消息
				<span class="badge">2</span>
			</li>
			<li class="list-group-item list-group-item-success">
				我的中心
			</li>
			<li class="list-group-item list-group-item-danger">
				退出登陸
			</li>
			<li class="list-group-item list-group-item-warning">
				<div class="list-group-item-heading">舒適提示</div>
				<small>更多功能請進我的中心</small>
			</li>
		</ul>

效果以下圖所示：

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/medioAndListGroup.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536