Bootstrap 图片

最新推荐文章于 2023-09-09 21:50:42 发布

boonyaxnn

最新推荐文章于 2023-09-09 21:50:42 发布

阅读量607

点赞数 2

分类专栏： Bootstrap 文章标签： bootstrap 图片 img

本文链接：https://blog.csdn.net/boonyaxnn/article/details/62041453

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Bootstrap 提供了4个可对图片应用简单样式的 class，请看html代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Bootstrap-图片</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">  
<style>
    h1{
     color: #0F0305;
     font-weight:900;  
     text-shadow:1px 1px 0px #AD55C9;   
    }
	p{
	 color: #6A031A;
	 size: 12px;
	}
</style>
</head>
<body>
<div class="container">
	<div class="header">
		<h1>图片1</h1><br />
		<p>.img-rounded：添加 border-radius:20px 来获得图片圆角。</p><br>
		<img src="img/1.jpg" class="img-rounded" style=" border-radius:20px;">
	</div>
	<div class="one">
		<h1>图片2</h1><br />
		<p>.img-circle：添加 border-radius:500px 来让整个图片变成圆形。</p><br>
		<img src="img/1.jpg" width="600" height="600" class="img-circle" style="border-radius:500px;">
	</div>
	<div class="two">
		<h1>图片3</h1><br />
		<p>.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。</p><br>
		<img src="img/1.jpg" class="img-thumbnail" style="padding:8px 10px 8px 10px; ">
	</div>
	<div class="foot">
		<h1>图片4</h1><br />
		<p>.img-responsive让图片支持响应式设计。 图片将很好地扩展到父元素。
		   .img-responsive 类将 max-width: 100%;和 height: auto; 样式应用在图片上：</p><br>
		<img src="img/1.jpg" class="img-responsive">
	</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

效果图

boonyaxnn

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 图片

Bootstrap 提供了4个可对图片应用简单样式的 class，请看html代码 Bootstrap-图片 h1{ color: #0F0305; font-weight:900; text-shadow:1px 1px 0px #AD55C9; } p{ color: #6A031A; siz
复制链接

扫一扫