bootstrap-图片、关闭、浮动

最新推荐文章于 2024-06-05 09:42:15 发布

deepquiet

最新推荐文章于 2024-06-05 09:42:15 发布

阅读量3.3k

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/deepquiet/article/details/60467558

版权

bootstrap 专栏收录该内容

22 篇文章

订阅专栏

本文通过示例代码展示了如何使用Bootstrap为图片添加不同样式，包括圆角、椭圆形和矩形，并介绍了如何实现元素的居中显示及向右浮动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片：
class=”img-rounded” 圆角边
class=”img-circle” 椭圆形
class=”img-thumbnail” 矩形

代码：

<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">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<img src="timg.jpg" alt="timg.jpg" class="img-rounded">
<img src="timg.jpg" alt="timg.jpg" class="img-circle">
<img src="timg.jpg" alt="timg.jpg" class="img-thumbnail">
<br/>

<!-- 向右浮动，关闭按钮 -->
<div class="col-xs-4 bg-info pull-right">
<input type="button" class="btn btn-success" value="button">
<button type="button" class="close"><span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span></button>

</div>
<br/>
<br/>
<br/>
<!-- 居中 -->
<div style="width:200px;height:200px;" class="center-block bg-danger"></div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

这里写图片描述