List group components, panel components, and responsive embedded components in BootStrap (detailed graphic and text explanation)

This article will introduce you to the list group component, panel component, and responsive embedded component in BootStrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to get and learn more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

1. List group component

The list group component is used to display a set of lists

Basic example:

		<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>

List item plus medal

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

##List link and preferred

		<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>

The first line is the preferred status

The third line is the mouse hover The state when stopped on it

Button list

		<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>

The style is similar to the hyperlink list.

Scenario class

		<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>

##Colors that can be set: success, warning, danger, info

Custom content

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

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

			</p>

2. Panel component

The panel component is a container component that stores content

Basic example: panel

		<p class="panel panel-success">

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

		</p>

Panel with heading: panel-heading

		<p class="panel panel-success">

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

		</p>

Set the title element: panel-title

		<p class="panel panel-success">

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

		</p>

The effect is similar to the above, the title font is just one size larger

With footnotes Panel: panel-footer

		<p class="panel panel-success">

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

		</p>

Situational effect

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

Table class panel

		<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>

##List class panel

		<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>

2. Responsive embedded component

Automatically creates a fixed ratio based on the width of the external container of the embedded content, allowing the browser to automatically determine the size of the content and be able to Scaling on all devices

These rules apply directly to