zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本。Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下:

    1、在图像的周围添加带class.thumbnail类的<a>标签。

    2、这会添加四个像素的内边距和一个灰色的边框。

    3、当鼠标悬停在图像上时,会动画显示出图像的轮廓。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bootstrap历练实例:默认的缩略图</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div style="padding:20px;text-align:center">
    <div class="row">
    <div class="col-sm-6 col-md-3">
    <a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
    </div>
    <div class="col-sm-6 col-md-3">
    <a class="thumbnail"><img src="Images/HTML5LOGO.jpg" alt="通用的占位符缩略图" /></a>
    </div>
    </div>
    </div>


    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    《梦断代码》随笔第1篇
    四则运算3
    1、软件工程结对开发之求一维数组中连续最大子数组之和
    四则运算2单元测试
    《梦断代码》随笔第0篇
    四则运算2完整版
    四则运算2设计思想
    软件工程第一个程序
    软件工程阅读计划
    电梯调度之需求分析
  • 原文地址:https://www.cnblogs.com/melao2006/p/4998157.html
Copyright © 2011-2022 走看看