本文主要是介绍bootstrap3-Image 图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Bootstrap内部对图片样式的默认设置
img {border: 0;/*This removes any border when images are rendered.*/page-break-inside: avoid;/*avoids page breaks inside images.*/max-width: 100% !important;/*make sure that even if the width of the image exceeds the container, it is restricted to the premise of the container.*/vertical-align: middle;/*an image is vertically centred within a div or other element*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"rel="stylesheet" media="screen">
<style>
body {padding: 50px/*边距*/
}
.mdl {background-color: silver;/*背景*/padding: 7px/*上下左右边距*/
}</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->
</head>
<body><!-- 图片样式 --><p class="mdl"><img src="../../bootstrap-3.0.0/image/icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
为图片指定样式
img-rounded 圆角图片
<!-- 图片样式 --><p class="mdl"><!-- 圆角，响应式(自动根据屏幕尺寸调整到合适的大小) --><img src="../../image/mobile.jpg" class="img-rounded img-responsive"></p>
img-thumbnail 缩略图样式，但不是真正的缩略图
图片四周有边框效果
<!-- 缩略图样式 -->
<img src="../../image/mobile.jpg" class="img-rounded img-thumbnail">
img-circle 圆形图片
<!-- 圆形图片 -->
<img src="../../image/mobile.jpg" class="img-rounded img-circle img-responsive">
Responsive image 响应式图片
Bootstrap没有把responsive样式设置为默认的，需要手动设置
.img-responsive {display: block;height: auto;max-width: 100%;
}
设置响应式图片最简单的办法：在img标签上设置class="img-responsive"
<!-- 让图片具有响应功能 -->
<img src="../../image/mobile.jpg" class=" img-responsive">
这篇关于bootstrap3-Image 图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
