首頁 > 文章 > web前端 > BootStrap中的清單群組元件，面板元件，響應式嵌入元件（圖文詳解）

BootStrap中的清單群組元件，面板元件，響應式嵌入元件（圖文詳解）

青灯夜游轉載: 2018-10-13 16:48:042290瀏覽

本篇文章就給大家介紹BootStrap中的列表群組元件，面板元件，響應式嵌入元件。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。如果大家想要取得和學習更多的bootstrap相關影片教學也可以存取：bootstrap教學！

一、清單群組元件

清單群組元件用來顯示一組清單的元件

基本實例：

		<ul class="list-group">
			<li class="list-group-item">我是第一行</li>
			<li class="list-group-item">我是第二行</li>
			<li class="list-group-item">我是第三行</li>
			<li class="list-group-item">我是第四行</li>
		</ul>

清單項目加上勳章

		<ul class="list-group">
			<li class="list-group-item">我是第一行
			<span class="badge">10</span>
			</li>
			<li class="list-group-item">我是第二行</li>
		</ul>

		<p class="list-group">
			<a class="list-group-item active">我是第一行
			<span class="badge">10</span>
			</a>
			<a class="list-group-item">我是第二行</a>
			<a class="list-group-item">我是第三行</a>
			<a class="list-group-item">我是第四行</a>
		</p>

##清單連結和首選

		<p class="list-group">
			<button class="list-group-item active">我是第一行
			<span class="badge">10</span>
			</button>
			<button class="list-group-item">我是第二行</button>
			<button class="list-group-item">我是第三行</button>
			<button class="list-group-item">我是第四行</button>
		</p>

第一行為首選狀態

#第三行是滑鼠懸停在上面的時候的狀態

按鈕式清單

		<ul class="list-group">
			<li class="list-group-item list-group-item-danger">我是第一行</li>
			<li class="list-group-item list-group-item-info">我是第二行</li>
		</ul>

樣式和超連結的清單類似。

情境類別

			<p href="#" class="list-group-item active">

				<h3>我是标题</h3>
				<p>我是一段文本</p>

			</p>

#可以設定的顏色： success ，warning，danger，info

自訂內容

		<p class="panel panel-success">

			<p class="panel-body">这里是内容区域</p>

		</p>

二、面板元件

面板元件是一個存放內容的容器元件

基本實例：panel

		<p class="panel panel-success">

			<p class="panel-heading">这个是标题啊</p>
			<p class="panel-body">这里是内容区域</p>

		</p>

#有標題的面板：panel-heading

		<p class="panel panel-success">

			<p class="panel-heading">
				<h3 class="panel-title">这是标题</h3>			
			</p>
			<p class="panel-body">这里是内容区域</p>

		</p>

#設定標題元素：panel-title

		<p class="panel panel-success">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</p>
			<p class="panel-footer">这里是注脚区域</p>

		</p>

和以上效果類似，標題字體大一號而已

有註腳的圖：panel-footer

		<p class="panel panel-warning">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</p>
			<table class="table">
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</table>

		</p>

情境效果

panel panel- default / success / warning / danger / info / primary

表格類別面板

		<p class="panel panel-warning">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</p>

			<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>
				<li class="list-group-item">5</li>
			</ul>

		</p>

清單類別面板

		<p class="embed-responsive embed-responsive-4by3"><!--这里可以修改比例，16:9或是4:3-->

			<!--插入到这里面的媒体都会按照指定的比例缩放-->

		</p>

二、響應式嵌入元件