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:

• 我是第一行
• 我是第二行
• 我是第三行
• 我是第四行

List item plus medal

• 我是第一行 10
• 我是第二行

##List link and preferred

		<p>
			<a>我是第一行
			<span>10</span>
			</a>
			<a>我是第二行</a>
			<a>我是第三行</a>
			<a>我是第四行</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>
			<button>我是第一行
			<span>10</span>
			</button>
			<button>我是第二行</button>
			<button>我是第三行</button>
			<button>我是第四行</button>
		</p>

The style is similar to the hyperlink list.

Scenario class

• 我是第一行
• 我是第二行

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

Custom content

			<p>

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

			

2. Panel component

The panel component is a container component that stores content

Basic example: panel

		<p>

			</p><p>这里是内容区域</p>

		

Panel with heading: panel-heading

		<p>

			</p><p>这个是标题啊</p>
			<p>这里是内容区域</p>

		

Set the title element: panel-title

		<p>

			</p><p>
				</p><h3 id="这是标题">这是标题</h3>			
			

这里是内容区域

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

With footnotes Panel: panel-footer

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			<p>这里是注脚区域</p>

		

Situational effect

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

Table class panel

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			

1	2	3
1	2	3

##List class panel

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>

			

• 1
• 2
• 3
• 4
• 5

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

The above is the detailed content of List group components, panel components, and responsive embedded components in BootStrap (detailed graphic and text explanation). For more information, please follow other related articles on the PHP Chinese website!