BootStrap-CSS样式_布局组件_缩略图

最新推荐文章于 2021-12-30 10:02:07 发布

有梦的小草

最新推荐文章于 2021-12-30 10:02:07 发布

阅读量439

点赞数

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_布局组件 BootStrap缩略图

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85311190

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

Bootstrap 缩略图

大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：
1.在图像周围添加带有 class .thumbnail 的 <a> 标签。

2.这会添加四个像素的内边距（padding）和一个灰色的边框。

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

代码实例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
    <!-- 
    row样式：栅格布局，设置column的排列
    col-sm-6样式：在小型屏幕上栅格占6位
    col-md-3样式：在中型屏幕上栅格占6位
    thumbnail样式：设置略缩图 
    -->

    <!--<div class="row">
       <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
              <img src="../img/phone.jpg" alt="通用的占位符缩略图" >   
          </a> 
       </div>
       <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
              <img src="../img/phone.jpg" alt="通用的占位符缩略图" >   
          </a> 
       </div>
       <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
              <img src="../img/phone.jpg" alt="通用的占位符缩略图" >   
          </a> 
       </div>
       <div class="col-sm-6 col-md-3">
          <a href="#" class="thumbnail">
              <img src="../img/phone.jpg" alt="通用的占位符缩略图" >   
          </a> 
       </div>
   </div>-->

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/phone.jpg" alt="通用的占位符缩略图">
            </a>
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些描述的文字，一些描述的文字</p>
                <p>
                    <a href="#" class="btn btn-success">购买</a>
                </p>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/phone.jpg" alt="通用的占位符缩略图">
            </a>
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些描述的文字，一些描述的文字</p>
                <p>
                    <a href="#" class="btn btn-primary">购买</a>
                </p>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/phone.jpg" alt="通用的占位符缩略图">
            </a>
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些描述的文字，一些描述的文字</p>
                <p>
                    <a href="#" class="btn btn-warning">购买</a>
                </p>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="../img/phone.jpg" alt="通用的占位符缩略图">
            </a>
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些描述的文字，一些描述的文字</p>
                <p>
                    <a href="#" class="btn btn-danger">购买</a>
                </p>
            </div>
        </div>

    </div>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

显示效果：

有梦的小草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_布局组件_缩略图

Bootstrap 缩略图大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：1.在图像周围添加带有 class .thumbnail 的 &lt;a&gt; 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。 3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。...
复制链接

扫一扫

专栏目录