-
图片
-
在 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样式改成白色,所以自己设置的背景无效。