-
图片
-
在 Bootstrap 版本 3 中，通过为图片添加
.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width: 100%;、height: auto;和display: block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了.img-responsive类的图片水平居中，请使用.center-block类，不要用.text-center。 - 图片形状：通过为
<img>元素添加以下相应的类，可以让图片呈现不同的形状。 - .img-rounded：圆角
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--没有压缩的，即是没有去除空格和换行，方便学习--> <link rel="stylesheet" href="bs/css/bootstrap.css" /> <!-- 压缩版的，去除了空格和换行，文件小，省带宽 <link rel="stylesheet" href="bs/css/bootstrap.min.css" /> --> <!--要使用bootstrap的js插件，必须有jquery的支持--> <script type="text/javascript" src="js/jquery.min.js" ></script> <!--bootstrap的主包，同样bootstrap.min.js是压缩版--> <script type="text/javascript" src="bs/js/bootstrap.js" ></script> <style> *{ font-family: 微软雅黑; } img{ background: #ccc; } </style> </head> <body> <div class="container"> <h1 class="page-header">BootStrap前端框架</h1> <img src="img/heroplane0.png" class="img-rounded"/> </div> </body> </html>
截图：
-
.img-circle：圆
<div class="container"> <h1 class="page-header">BootStrap前端框架</h1> <img src="img/heroplane0.png" class="img-circle"/> </div>
截图：
-
.img-thumbnail
<div class="container"> <h1 class="page-header">BootStrap前端框架</h1> <img src="img/heroplane0.png" class="img-thumbnail"/> </div>
截图：
注意：图片需要有自己的背景色才能看出效果，因为它会默认把图片的background样式改成白色，所以自己设置的背景无效。