BootStrap图片样式

  • 图片

  1. 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

  2. 图片形状:通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。
  3. .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>

    截图:
    BootStrap图片样式

  4. .img-circle:圆

    <div class="container">
         <h1 class="page-header">BootStrap前端框架</h1>
         <img src="img/heroplane0.png"  class="img-circle"/>
    </div>

    截图:
    BootStrap图片样式

    BootStrap图片样式

  5. .img-thumbnail

    <div class="container">
        <h1 class="page-header">BootStrap前端框架</h1>
        <img src="img/heroplane0.png"  class="img-thumbnail"/>
    </div>

    截图:
    BootStrap图片样式
    注意:图片需要有自己的背景色才能看出效果,因为它会默认把图片的background样式改成白色,所以自己设置的背景无效。

     

上一篇:响应式网站设计(Responsive Web design)


下一篇:javascript – Flexbox:根据行号替换“row”和“row-reverse”