[代码实例][HTML][Bootstrap]媒体版式

最新推荐文章于 2024-05-23 16:52:46 发布

cloudblaze

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量134

点赞数

分类专栏：操作系统原理与实现

本文链接：https://blog.csdn.net/cloudblaze/article/details/108788484

版权

操作系统原理与实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

媒体版式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 102</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="Js/popper.min.js"></script>

	<%-- css:Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>
</head>
<body class="container">
	<h3 class="mb-4">媒体版式</h3>
	<div class="media">
		<img src="Image/pic008.jpg" class="mr-4 w-25" alt="" />
		<div class="media-body">
			<h3 class="mt-0">肖申克的救赎</h3>
			<div class="my-1">类型：电影作品</div>
			<div class="my-1">导演：弗兰克达拉邦特</div>
			<div class="my-1">主演：蒂姆罗宾斯、摩根弗里曼等</div>
			<div class="my-1">片场：142分钟</div>
			<div class="my-1">
				<a href="#">角色介绍、</a>
				<a href="#">音乐原声、</a>
				<a href="#">幕后花絮、</a>
				<a href="#">更多>></a>
			</div>
			<div class="my-1">简介：该片改变自斯蒂芬金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧...</div>
		</div>
	</div>
</body>
</html>