欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

【Bootstrap】017

2025-07-26 09:01:16
【Bootstrap】017 一、面板虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件；1、基本实例默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <

【Bootstrap】017

一、面板

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

1、基本实例

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="panel panel-default">
		  <div class="panel-body">
		    Basic panel example
		  </div>
		</div>
	</body>
</html>
运行结果：

2、带标题的面版

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

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="panel panel-default">
			<div class="panel-heading">Panel heading without title</div>
			<div class="panel-body">
				Panel content
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h class="panel-title">Panel title</h>
			</div>
			<div class="panel-body">
				Panel content
			</div>
		</div>
	</body>
</html>
运行结果：

、带脚注的面版

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="panel panel-default">
		  <div class="panel-body">
		    Panel content
		  </div>
		  <div class="panel-footer">Panel footer</div>
		</div>
	</body>
</html>
运行结果：

4、情境效果

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="contextual-panels">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h class="panel-title">Panel title</h>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
			<div class="panel panel-success">
				<div class="panel-heading">
					<h class="panel-title">Panel title</h>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">
					<h class="panel-title">Panel title</h>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
			<div class="panel panel-warning">
				<div class="panel-heading">
					<h class="panel-title">Panel title</h>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
			<div class="panel panel-danger">
				<div class="panel-heading">
					<h class="panel-title">Panel title</h>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
	</body>
</html>
运行结果：

5、带表格的面版

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="panel panel-default">
			<!-- Default panel contents -->
			<div class="panel-heading">Panel heading</div>
			<div class="panel-body">
				<p>Some default panel content here. ulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed
					cectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. ullam id dolor id
					nibh ultricies vehicula ut id elit.</p>
			</div>

			<!-- Table -->
			<table class="table">
				<thead>
					<tr>
						<th>#</th>
						<th>First ame</th>
						<th>Last ame</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"></th>
						<td>Larry</td>
						<td>the Bird</td>
						<td>@twitter</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
运行结果：

6、带列表组的面版

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="panel panel-default">
		  <!-- Default panel contents -->
		  <div class="panel-heading">Panel heading</div>
		  <div class="panel-body">
		    <p>...</p>
		  </div>
		
		  <!-- List group -->
		  <ul class="list-group">
		    <li class="list-group-item">Cras justo odio</li>
		    <li class="list-group-item">Dapibus ac facilisis in</li>
		    <li class="list-group-item">Morbi leo risus</li>
		    <li class="list-group-item">Porta ac cectetur ac</li>
		    <li class="list-group-item">Vestibulum at eros</li>
		  </ul>
		</div>
	</body>
</html>
运行结果：
二、具有响应式特性的嵌入内容

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

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

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<!-- 16:9 aspect ratio -->
		<div class="embed-respive embed-respive-16by9">
		  <iframe class="embed-respive-item" src="..."></iframe>
		</div>
		
		<!-- 4: aspect ratio -->
		<div class="embed-respive embed-respive-4by">
		  <iframe class="embed-respive-item" src="..."></iframe>
		</div>
	</body>
</html>
运行结果：
三、Well

1、默认效果

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="well">well？这是什么东西？</div>
	</body>
</html>
运行结果：

2、可选类/样式

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

代码演示：
代码语言：javascript代码运行次数：0运行复制
<!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">
		<!-- 上述个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/js"></script>
		<script src="../js/js"></script>
	</head>
	<body>
		<div class="well">well？这是什么东西？</div>
		<div class="well well-lg">well？这是什么东西？well-lg大的！</div>
		<div class="well well-sm">well？这是什么东西？well-lg小的！</div>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除scriptbootstrapclassmetapanel

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1198381.html

相关标签：无
上传时间： 2025-07-23 11:34:16

上一篇：【C#】001

下一篇：【Bootstrap】016

推荐阅读

留言与评论（共有 8 条评论）
注册新账号 登录
本站网友 微商号
30分钟前 发表
原始发表：2025-01-06
本站网友 王东整形
5分钟前 发表
就能有嵌入（inset）的简单效果；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 阜外心血管医院
17分钟前 发表
任何其他内容都*必须*跟随其后！ --> <title></title> <!-- 引入bootstrap --> <link rel="stylesheet" href="../css/" /> <!-- 要想实现点击效果
本站网友 大庆个人二手房网
21分钟前 发表
<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖；为了给链接设置合适的颜
本站网友 青岛搜房帮登陆
18分钟前 发表
分享自作者个人站点/博客
本站网友 大学城美食
15分钟前 发表
还可以明确地使用一个派生出来的 .embed-respive-item 类；超级提示： 不需要为 <iframe> 元素设置 frameborder="0" 属性
本站网友 什么是界面剂
21分钟前 发表
带标题的面版通过 .panel-heading 可以很简单地为面板加入一个标题容器