首页 > 其他分享> > BootStrap图片样式

BootStrap图片样式

2019-02-12 10:41:06 作者：互联网

图片

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

标签：截图,img,样式,前端,BootStrap,responsive,图片
来源： https://www.cnblogs.com/PCBullprogrammer/p/10364172.html