【Bootstrap】017-组件：面板、嵌入内容、Well

淡淡的烟草味﹌ 2023-10-05 11:09 51阅读 0赞

# **目录** #

一、面板

1、基本实例

代码演示：

运行结果：

2、带标题的面版

代码演示：

运行结果：

3、带脚注的面版

代码演示：

运行结果：

4、情境效果

代码演示：

运行结果：

5、带表格的面版

代码演示：

运行结果：

6、带列表组的面版

代码演示：

运行结果：

二、具有响应式特性的嵌入内容

代码演示：

运行结果：

三、Well

1、默认效果

代码演示：

运行结果：

2、可选类/样式

代码演示：

运行结果：

--------------------

# 一、面板 #

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件；

## 1、基本实例 ##

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 2、带标题的面版 ##

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖；

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 3、带脚注的面版 ##

把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

## 4、情境效果 ##

其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版；

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    		
    		<script src="../js/jquery.min.js"></script>
    		<script src="../js/bootstrap.min.js"></script>
    	</head>
    	<body>
    		<div class="bs-example" data-example-id="contextual-panels">
    			<div class="panel panel-primary">
    				<div class="panel-heading">
    					<h3 class="panel-title">Panel title</h3>
    				</div>
    				<div class="panel-body">
    					Panel content
    				</div>
    			</div>
    			<div class="panel panel-success">
    				<div class="panel-heading">
    					<h3 class="panel-title">Panel title</h3>
    				</div>
    				<div class="panel-body">
    					Panel content
    				</div>
    			</div>
    			<div class="panel panel-info">
    				<div class="panel-heading">
    					<h3 class="panel-title">Panel title</h3>
    				</div>
    				<div class="panel-body">
    					Panel content
    				</div>
    			</div>
    			<div class="panel panel-warning">
    				<div class="panel-heading">
    					<h3 class="panel-title">Panel title</h3>
    				</div>
    				<div class="panel-body">
    					Panel content
    				</div>
    			</div>
    			<div class="panel panel-danger">
    				<div class="panel-heading">
    					<h3 class="panel-title">Panel title</h3>
    				</div>
    				<div class="panel-body">
    					Panel content
    				</div>
    			</div>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 5、带表格的面版 ##

为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果；

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    		<title></title>
    		
    		<link rel="stylesheet" href="../css/bootstrap.min.css" />
    		
    		<script src="../js/jquery.min.js"></script>
    		<script src="../js/bootstrap.min.js"></script>
    	</head>
    	<body>
    		<div class="panel panel-default">
    			
    			<div class="panel-heading">Panel heading</div>
    			<div class="panel-body">
    				<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed
    					consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id
    					nibh ultricies vehicula ut id elit.</p>
    			</div>
    
    			
    			<table class="table">
    				<thead>
    					<tr>
    						<th>#</th>
    						<th>First Name</th>
    						<th>Last Name</th>
    						<th>Username</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<th scope="row">1</th>
    						<td>Mark</td>
    						<td>Otto</td>
    						<td>@mdo</td>
    					</tr>
    					<tr>
    						<th scope="row">2</th>
    						<td>Jacob</td>
    						<td>Thornton</td>
    						<td>@fat</td>
    					</tr>
    					<tr>
    						<th scope="row">3</th>
    						<td>Larry</td>
    						<td>the Bird</td>
    						<td>@twitter</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 6、带列表组的面版 ##

可以简单地在任何面版中加入具有最大宽度的列表组；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

# 二、具有响应式特性的嵌入内容 #

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放；

这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类；

**超级提示：** 不需要为 <iframe> 元素设置 frameborder="0" 属性，因为我们已经替你这样做了！

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

# 三、Well #

## 1、默认效果 ##

把 Well 用在元素上，就能有嵌入（inset）的简单效果；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

## 2、可选类/样式 ##

通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置；

### 代码演示： ###

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020100715403883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201007154240572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201007154356819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020100715455910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020100715481394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/202010071549576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201007155320948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201007155520290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201007155728965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70