Bootstrap響應式前端框架筆記十五——面板與井

Bootstrap響應式前端框架筆記十五——面板與井

    Bootstrap中的面板由pannel相關類來建立，一個完整的面板分爲面板頭部、面板體和麪板註腳，而且Bootstrap中默認定義了一些面板風格，示例以下：

<p>標準樣式的面板</p>
			<div class="panel panel-default">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>
			<div class="panel panel-success">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>
			<div class="panel panel-warning">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>
			<div class="panel panel-danger">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="panel-footer">
					面板註腳..........
				</div>
			</div>

效果以下：

面板中也能夠追加列表組，是的面板更具擴展性，示例以下：

<p>在面板中追加列表組</p>
		<div class="panel panel-danger">
				<div class="panel-heading">
					面板標題
				</div>
				<div class="panel-body">
					面板內容.........
				</div>
				<div class="list-group">
					<div class="list-group-item">數據</div>
					<div class="list-group-item">數據</div>
					<div class="list-group-item">數據</div>
					<div class="list-group-item">數據</div>
				</div>
			</div>

效果以下：

    Bootstrap中還定義了一種樣式Well，其效果相似嵌入界面內，示例以下：

<p>Well效果</p>
			<div class="well">
				這裏是內容！！！！！！！
			</div>

效果以下：

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

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

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