在本章中，我们将学习 bootstrap 对图片的支持。bootstrap 提供了四个可对图片应用简单样式的class，分别是：
img-rounded 添加 border-radius:6px 来获得图片圆角
img-circle 添加 border-radius:50% 来让整个图片变成圆形
img-thumbnail 添加一些内边距（padding）和一个灰色的边框
img-responsive 图片响应式
1、img-rounded
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<div class = "container">
@@##@@
</div>
</body>
</html> .img-rounded{border-radius:6px;}
效果：
2、img-circle
立即学习“Java免费学习笔记（深入）”；
<body style="padding: 20px;">
<div class = "container">
@@##@@
</div>
</body> .img-circle{border-radius:50%;}
效果(因为本图片的宽高大小不同，所以呈现出椭圆，如果将width和height设置相同，那么会呈现出一个圆)：
3、img-thumbnail
<body style="padding: 20px;">
<div class = "container">
@@##@@
@@##@@
@@##@@
</div>
</body>.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s ease-in-out;}
效果：
4、img-responsize
<body style="padding: 20px;">
<div class = "container" style = "width:150px;">
@@##@@
</div>
</body> .img-responsive{display:block;max-width:100%;height:auto;}
效果(img中的width属性值被忽略)：
以上内容分步骤给大家介绍了Bootstrap四种图片样式的相关知识，希望大家喜欢。
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
471
