Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >【Bootstrap】016-组件：媒体对象、列表组

【Bootstrap】016-组件：媒体对象、列表组

作者头像
訾博ZiBo
发布于 2025-01-06 07:51:38
发布于 2025-01-06 07:51:38
3700
代码可运行
举报
文章被收录于专栏：全栈开发工程师全栈开发工程师
运行总次数：0
代码可运行
关联问题
换一批

一、媒体对象

1、概述

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）；

2、默认样式

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="default-media">
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxNDY4OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjE0Njg5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
						 data-holder-rendered="true" style="width: 64px; height: 64px;">
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">Media heading</h4>
					Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
					odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
					lacinia congue felis in faucibus.
				</div>
			</div>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxM2M4NSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjEzYzg1Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
						 data-holder-rendered="true" style="width: 64px; height: 64px;">
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">Media heading</h4>
					Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
					odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
					lacinia congue felis in faucibus.
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxMzRjOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjEzNGM4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
								 data-holder-rendered="true" style="width: 64px; height: 64px;">
							</a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">Nested media heading</h4>
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
							odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
							Donec lacinia congue felis in faucibus.
						</div>
					</div>
				</div>
			</div>
			<div class="media">
				<div class="media-body">
					<h4 class="media-heading">Media heading</h4>
					Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
					odio, vestibulum in vulputate at, tempus viverra turpis.
				</div>
				<div class="media-right">
					<a href="#">
						<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxNGVlYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjE0ZWVjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
						 data-holder-rendered="true" style="width: 64px; height: 64px;">
					</a>
				</div>
			</div>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxMDY1YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjEwNjVhIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
						 data-holder-rendered="true" style="width: 64px; height: 64px;">
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">Media heading</h4>
					Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus
					odio, vestibulum in vulputate at, tempus viverra turpis.
				</div>
				<div class="media-right">
					<a href="#">
						<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYwZTY1YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjBlNjVjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
						 data-holder-rendered="true" style="width: 64px; height: 64px;">
					</a>
				</div>
			</div>
		</div>
	</body>
</html>
运行结果：
备注：

.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上，但是，从 v3.3.0 版本开始，他们就不再被建议使用了。.media-left 和 .media-right 替代了他们，不同之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面；

3、对齐

图片或其他媒体类型可以顶部、中部或底部对齐，默认是顶部对齐；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="media-alignment">
		    <div class="media">
		      <div class="media-left">
		        <a href="#">
		          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYwZjE1MiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjBmMTUyIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		        </a>
		      </div>
		      <div class="media-body">
		        <h4 class="media-heading">Top aligned media</h4>
		        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		      </div>
		    </div>
		    <div class="media">
		      <div class="media-left media-middle">
		        <a href="#">
		          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxMGM2YiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjEwYzZiIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		        </a>
		      </div>
		      <div class="media-body">
		        <h4 class="media-heading">Middle aligned media</h4>
		        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		      </div>
		    </div>
		    <div class="media">
		      <div class="media-left media-bottom">
		        <a href="#">
		          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYwZmM5NyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjBmYzk3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		        </a>
		      </div>
		      <div class="media-body">
		        <h4 class="media-heading">Bottom aligned media</h4>
		        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		      </div>
		    </div>
		  </div>
	</body>
</html>
运行结果：

4、媒体对象列表

用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="bs-example" data-example-id="media-list">
		    <ul class="media-list">
		      <li class="media">
		        <div class="media-left">
		          <a href="#">
		            <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxNTdmOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjE1N2Y4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		          </a>
		        </div>
		        <div class="media-body">
		          <h4 class="media-heading">Media heading</h4>
		          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
		          <!-- Nested media object -->
		          <div class="media">
		            <div class="media-left">
		              <a href="#">
		                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYwZWQ1YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjBlZDVjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		              </a>
		            </div>
		            <div class="media-body">
		              <h4 class="media-heading">Nested media heading</h4>
		              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
		              <!-- Nested media object -->
		              <div class="media">
		                <div class="media-left">
		                  <a href="#">
		                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYwZmFiMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjBmYWIzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		                  </a>
		                </div>
		                <div class="media-body">
		                  <h4 class="media-heading">Nested media heading</h4>
		                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
		                </div>
		              </div>
		            </div>
		          </div>
		          <!-- Nested media object -->
		          <div class="media">
		            <div class="media-left">
		              <a href="#">
		                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzUwMWYxMzlmMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3NTAxZjEzOWYzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi40MDE1NjI1Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
		              </a>
		            </div>
		            <div class="media-body">
		              <h4 class="media-heading">Nested media heading</h4>
		              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
		            </div>
		          </div>
		        </div>
		      </li>
		    </ul>
		  </div>
	</body>
</html>
运行结果：

二、列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容；

1、基本实例

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<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 consectetur ac</li>
			<li class="list-group-item">Vestibulum at eros</li>
		</ul>
	</body>
</html>
运行结果：

2、徽章

给列表组加入徽章组件，它会自动被放在右边；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<ul class="list-group">
		  <li class="list-group-item">
		    <span class="badge">14</span>
		    Cras justo odio
		  </li>
		  <li class="list-group-item">
		    <span class="badge">17</span>
		    Cras justo odio
		  </li>
		  <li class="list-group-item">
		    <span class="badge">24</span>
		    Cras justo odio
		  </li>
		</ul>
	</body>
</html>
运行结果：

3、链接

用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="list-group">
		  <a href="#" class="list-group-item active">
		    Cras justo odio
		  </a>
		  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
		  <a href="#" class="list-group-item">Morbi leo risus</a>
		  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
		  <a href="#" class="list-group-item">Vestibulum at eros</a>
		</div>
	</body>
</html>
运行结果：

4、按钮

列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="list-group">
		  <button type="button" class="list-group-item">Cras justo odio</button>
		  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
		  <button type="button" class="list-group-item">Morbi leo risus</button>
		  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
		  <button type="button" class="list-group-item">Vestibulum at eros</button>
		</div>
	</body>
</html>
运行结果：

5、被禁用的条目

为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="list-group">
		  <a href="#" class="list-group-item disabled">
		    Cras justo odio
		  </a>
		  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
		  <a href="#" class="list-group-item">Morbi leo risus</a>
		  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
		  <a href="#" class="list-group-item">Vestibulum at eros</a>
		</div>
	</body>
</html>
运行结果：

6、情境类

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<ul class="list-group">
		  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
		  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
		  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
		  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
		</ul>
		<div class="list-group">
		  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
		  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
		  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
		  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
		</div>
	</body>
</html>
运行结果：

7、定制内容

列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组；

代码演示：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 要想实现点击效果，需要引入js -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="list-group">
			<a href="#" class="list-group-item active">
				<h4 class="list-group-item-heading">List group item heading</h4>
				<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
					varius blandit.</p>
			</a>
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">List group item heading</h4>
				<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
					varius blandit.</p>
			</a>
			<a href="#" class="list-group-item">
				<h4 class="list-group-item-heading">List group item heading</h4>
				<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
					varius blandit.</p>
			</a>
		</div>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
对象
bootstrap
class
list
media

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

对象
bootstrap
class
list
media
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1339
Go 开发者必备：Protocol Buffers 入门指南
642
10分钟带你彻底搞懂分布式链路跟踪
331
多租户的 4 种常用方案
731
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
551
60页PPT全解：DeepSeek系列论文技术要点整理
1168
聊聊Spring AI Alibaba的MarkdownDocumentParser
LLM
本文主要研究一下Spring AI Alibaba的MarkdownDocumentParser
code4it
2025/04/16
530
聊聊Spring AI Alibaba的MarkdownDocumentParser
【Bootstrap】017-组件：面板、嵌入内容、Well
scriptbootstrapclassmetapanel
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件；
訾博ZiBo
2025/01/06
800
【Bootstrap】017-组件：面板、嵌入内容、Well
bootstrap 列表list样式
域名注册.net
<ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li> </ul>
用户5760343
2019/07/05
1.8K0
bootstrap 列表list样式
Bootstrap响应式前端框架笔记十四——媒体对象与列表组
bootstrap
    在移动开发中经常会使用到列表，使用媒体对象可以方便的创建列表中每一行元素，常规的媒体对象实例如下：
珲少
2018/08/15
7400
Bootstrap响应式前端框架笔记十四——媒体对象与列表组
Bootstrap学习文档（三）
其他
Bootstrap 中还带有免费的图标供我们使用，这些图标使用起来很简单，就像使用字体一样，改变图标的大小就是改变字体的 font-size，改变图标的颜色就是改变字体的颜色 color。有了这些图标，再也不用切图啦。另外还有第三方的图标我们可以使用，比如说 Font Awesome ，也是这种字体图标。在Bootstrap的下载包中，记得引入fonts文件，这样图标才能显示出来。
Wizey
2018/08/30
6K0
Bootstrap学习文档（三）
Python Web 菜谱系统的首页，不会前端技术，也能做【附源码】
python
滚雪球第三轮核心学习的是 Python Web 相关知识点，那不可避免的会涉及到前端技术栈，如果你对 HTML，CSS 完全零基础，学习来可能比较吃力，建议可以先补充一些前端知识，便于后续学习，你也可以先直接进入 Django 学习阶段，问题不大。
查理不是猹
2022/01/08
5730
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
asp.netmvcbootstrap
Bootstrap为我们提供了十几种的可复用组件，包括字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件，将为用户提供一致和简单易用的用户体验。 Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现。Bootstrap元素我在上一篇文章中涉及到，具体可以参考《ASP.NET MVC使用Bootstrap系列（2）——使用Bootstrap CSS和HTML元素》。 在这篇博客中，我将继续探索Bootstr
用户1161731
2018/01/11
6.6K2
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Mac全栈开发-Markdown手册
html
Headings from h1 through h6 are constructed with a # for each level:
用户1065635
2019/03/21
4840
【Bootstrap】015-组件：缩略图、警告框、进度条
progressscriptwidthbootstrapclass
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容；
訾博ZiBo
2025/01/06
830
【Bootstrap】015-组件：缩略图、警告框、进度条
外卖点餐源码|外卖点餐小程序源码h5
h5页面源码分析
外卖点餐系统是一种软件,可以让餐馆、咖啡店或酒吧在线接受订单。它通常允许顾客选择和支付食物,然后在订单发出时提醒厨房。这是在员工和客户之间没有联系的情况下发生的。网上订购系统是一个过程,人们可以通过使用互联网,坐在家里或任何地方,从当地的一些餐馆和旅馆订购各种食物和饮料。订单会送到指定地点。
用户10694937
2023/08/06
4550
外卖点餐源码|外卖点餐小程序源码h5
BBS 项目（四）
html
目录 BBS 项目（四） 首页布局 个人头像显示 个人站点路由设计 个人站点页面设计 base.html site.html 左侧过滤功能 404.html BBS 项目（四） 首页布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog-index</title> <script src="/static/element/jQuery3.4.js"></script> <s
HammerZe
2022/03/24
7040
BBS 项目（四）
【尚筹网】四、管理员登录
管理异常class登录对象
用户11332765
2024/11/26
770
【尚筹网】四、管理员登录
Vue教程(组件案例-评论列表)
vue.js网站
  前面给大家介绍了Vue的组件功能，本文我们通过一个评论列表的案例来巩固下组件的内容，具体效果如下:
用户4919348
2019/08/01
5410
Vue教程(组件案例-评论列表)
Jump Start Bootstrap 第3章
bootstraphtml
在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件，Bootstrap可以简单和快速的帮我们在网站上添加这些功能。
Remember_Ray
2018/12/20
14K0
Jump Start Bootstrap 第3章
5.栅格系统
bootstrap
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yx7xPxw0-1594451881727)(D:\bootstrap\Bootstrap入门.assets\image-20200711135751305.png)]
Qwe7
2022/06/01
1.2K0
Bootstrap Metronic 学习记录（二）菜单栏
bootstrap
1.简介 1)  .环境配置 2)  .提取页面 2）.动态生成菜单（无限级别树） 2.系统环境配置 项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读） 运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012 解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式 提取theme下的所有文件到MVC的Content，提取admin的index.h
用户1149182
2018/01/16
5.3K0
Bootstrap Metronic 学习记录（二）菜单栏
BootStrap使用
bootstrap
BootStrap基本使用 图书管理系统界面 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书管理系统</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax
HammerZe
2022/03/25
6800
BootStrap使用
jquery 手风琴效果
htmlcsshttpshttpgo
image.png <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap3扁平风格垂直手风琴特效</title> <link
用户5760343
2019/08/23
3K0
jquery 手风琴效果
基于 Django 的个人网站（5）
bootstrapcsshtml数据库sql
配置 bootstrap 很简单，首先是 css 文件的导入，我们只要将 css 文件以 link 标签的形式添加到 head 标签中，并放置在所有其他样式表之前就行，代码如下：
不可言诉的深渊
2020/05/27
8310
大学生圣诞网页设计制作成品 圣诞节静态HTML网页作业作品 简单DIV CSS布局网站
htmljavacssjqueryjavascript
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！ 一、👨‍🎓网站题目 🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。 二、✍️网站描述 🏷️ 大学生传统节日网页作业成品采用DIV
IT司马青衫
2022/08/13
1.2K0
大学生圣诞网页设计制作成品 圣诞节静态HTML网页作业作品 简单DIV CSS布局网站
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
Bootstrap乱码咋搞？单一组件如何绑定数据表中的字段？从媒体和内容创作者谈谈，区块链媒体如何变现？
相关课程
AI绘画-StableDiffusion图像生成Python教程-Django框架快速入门到实战微信小程序应用实践_《锋运票务系统》
聊聊Spring AI Alibaba的MarkdownDocumentParser
530
【Bootstrap】017-组件：面板、嵌入内容、Well
800
bootstrap 列表list样式
1.8K0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组
7400
Bootstrap学习文档（三）
6K0
Python Web 菜谱系统的首页，不会前端技术，也能做【附源码】
5730
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
6.6K2
Mac全栈开发-Markdown手册
4840
【Bootstrap】015-组件：缩略图、警告框、进度条
830
外卖点餐源码|外卖点餐小程序源码h5
4550
BBS 项目（四）
7040
【尚筹网】四、管理员登录
770
Vue教程(组件案例-评论列表)
5410
Jump Start Bootstrap 第3章
14K0
5.栅格系统
1.2K0
Bootstrap Metronic 学习记录（二）菜单栏
5.3K0
BootStrap使用
6800
jquery 手风琴效果
3K0
基于 Django 的个人网站（5）
8310
大学生圣诞网页设计制作成品 圣诞节静态HTML网页作业作品 简单DIV CSS布局网站
1.2K0
相关推荐
聊聊Spring AI Alibaba的MarkdownDocumentParser
更多 >
訾博ZiBo0
LV.3
这个人很懒，什么都没有留下～
文章
797
获赞
523
排名
139
作者相关精选
加入讨论
的问答专区 >
小雨云0
相关课程
一站式学习中心 >
AI绘画-StableDiffusion图像生成
1672人在学
大模型图像创作引擎
高性能应用服务
Python教程-Django框架快速入门到实战
938人在学
对象存储
python
开源框架
微信小程序应用实践_《锋运票务系统》
317人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验