bootStrap缩略图和面板

aqzengkuasheng

于 2022-02-21 21:42:59 发布

阅读量112

点赞数

分类专栏：前端框架文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/123056751

版权

前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

缩略图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 缩略图 -->


				<div class="col-md-3">
					  <div class="thumbnail">
						  <img src="img/1.png" style="width: 240px; height: 360px;">
						  <h3>图一</h3>
						  <p>出生于北京市，中国内地影视女演员、模特。</p>
						 <button class="btn btn-default">
							    <span class="glyphicon glyphicon-heart">
								喜欢
							</span>
						</button>

						  <button class="btn btn-info">
							        <span class="glyphicon glyphicon-pencil">
								评论
							</span>
						</button>
						  </div>
				</div>


				<!-- 缩略图 -->
				<div class="col-md-3">
					<div class="thumbnail">
						<img src="img/1.png" style="width: 250px; height: 360px;">
						<h3>图二</h3>
						<p>你好</p>
						<button class="btn btn-default">
							<span class="glyphicon glyphicon-heart">
								喜欢
							</span>
						</button>

						<button class="btn btn-info">
							<span class="glyphicon glyphicon-pencil">
								评论
							</span>
						</button>
					</div>

				</div>
				<!-- 缩略图 -->
				<div class="col-md-3">
					  <div class="thumbnail">
						  <img src="img/3.jpg" style="width: 240px; height: 360px;">
						  <h3>图三</h3>
						  <p>出生于北京市，中国内地影视女演员、模特。</p>
						<button class="btn btn-default">
							<span class="glyphicon glyphicon-heart"></span> 喜欢
						</button>
						<button class="btn btn-info">
							<span class="glyphicon glyphicon-pencil"></span> 评论
						</button>
						 
					</div>
				</div>


				<!-- 缩略图 -->

				<div class="col-md-3">
					<div class="thumbnail">
						<img src="img/4.png" style="width: 240px;height: 360px;">
						<h3>戚薇</h3>
						<p>出生于四川省，演员。</p>
						<button class="btn btn-default">
							<span class="glyphicon glyphicon-heart"></span> 喜欢
						</button>
						<button class="btn btn-info">
							<span class="glyphicon glyphicon-pencil"></span> 评论
						</button>
					</div>
				</div>


			</div>
		</div>
	</body>
</html>

面板：
默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容

<div class="panel panel-success">
 <div class="panel-heading">
 ......
 </div>
 <div class="panel-body">
 ......
 </div>
</div>

aqzengkuasheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootStrap缩略图和面板

缩略图：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> </head> <body> <div class="contai
复制链接

扫一扫