zoukankan      html  css  js  c++  java
  • 响应式图像

    • .img-rounded:添加 border-radius:6px 来获得图片圆角。
    • .img-circle:添加 border-radius:500px 来让整个图片变成圆形。
    • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

      <img src="/wp-content/uploads/2014/06/download.png"
         class="img-rounded">
      <img src="/wp-content/uploads/2014/06/download.png"
         class="img-circle">
      <img src="/wp-content/uploads/2014/06/download.png"
         class="img-thumbnail">

    响应式图像:

    <div class="container">
          <h2>图片</h2>
          <p> .img-responsive类让图片支持响应式,将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                 
          <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
        </div>

    缩略图:

    • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
    • 这会添加四个像素的内边距(padding)和一个灰色的边框。
    • 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
    • <div class="row">
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/wp-content/uploads/2014/06/kittens.jpg" 
               alt="通用的占位符缩略图">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/wp-content/uploads/2014/06/kittens.jpg" 
               alt="通用的占位符缩略图">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/wp-content/uploads/2014/06/kittens.jpg" 
               alt="通用的占位符缩略图">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/wp-content/uploads/2014/06/kittens.jpg" 
               alt="通用的占位符缩略图">
            </a>
         </div>
      </div>
      
  • 相关阅读:
    map
    01背包和完全背包 POJ
    并查集 计算节点数量
    set
    map,vector,queue 图 综合运用
    并查集 hdu-1325 Is It A Tree?
    js中的ajax
    java算法
    MySql在Window上的安装
    微信开发账号要求
  • 原文地址:https://www.cnblogs.com/liuyuanhao/p/4343053.html
Copyright © 2011-2022 走看看