精华内容
下载资源
问答
  • Bootstrap 缩略图

    2020-12-14 02:54:51
    Bootstrap 缩略图 本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
  • bootstrap缩略图

    2014-10-31 09:51:21
    bootstrap缩略图,简洁方便,样式漂亮新异
  • Bootstrap缩略图

    2017-07-05 10:36:00
    Bootstrap框架将这一部独立成一个模块组件,本文将详细介绍Bootstrap缩略图 概述  Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片,通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图 ...

    前面的话

      缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底部(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件,本文将详细介绍Bootstrap缩略图

     

    概述

      Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片,通过“thumbnail”样式配合bootstrap的网格系统来实现缩略图

      thumbnail中文翻译是拇指指甲,确实有些像缩略图,中间是图片,图片周围是一小圈空白,外面是边框和圆角,下面是文字

    .thumbnail {
      display: block;
      padding: 4px;
      margin-bottom: 20px;
      line-height: 1.42857143;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      -webkit-transition: all .2s ease-in-out;
              transition: all .2s ease-in-out;
    }
    .thumbnail > img,
    .thumbnail a > img {
      margin-right: auto;
      margin-left: auto;
    }
    a.thumbnail:hover,
    a.thumbnail:focus,
    a.thumbnail.active {
      border-color: #428bca;
    }
    .thumbnail .caption {
      padding: 9px;
      color: #333;
    }
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
            </div>
        </div>
    </div>

     

    自定义内容

      在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如标题,文本描述,按钮等

    .thumbnail .caption {
      padding: 9px;
      color: #333;
    }
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
                <div class="caption">
                    <h3>小火柴的蓝色理想</h3>
                    <p>好的代码像粥一样,都是用时间熬出来的</p>
                    <p>
                        <a href="##" class="btn btn-primary">确认</a>
                        <a href="##" class="btn btn-info">取消</a>
                    </p>
                </div> 
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
                <div class="caption">
                    <h3>小火柴的蓝色理想</h3>
                    <p>好的代码像粥一样,都是用时间熬出来的</p>
                    <p>
                        <a href="##" class="btn btn-primary">确认</a>
                        <a href="##" class="btn btn-info">取消</a>
                    </p>
                </div> 
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
                <div class="caption">
                    <h3>小火柴的蓝色理想</h3>
                    <p>好的代码像粥一样,都是用时间熬出来的</p>
                    <p>
                        <a href="##" class="btn btn-primary">确认</a>
                        <a href="##" class="btn btn-info">取消</a>
                    </p>
                </div> 
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://via.placeholder.com/100x100"" alt="#">
                </a>
                <div class="caption">
                    <h3>小火柴的蓝色理想</h3>
                    <p>好的代码像粥一样,都是用时间熬出来的</p>
                    <p>
                        <a href="##" class="btn btn-primary">确认</a>
                        <a href="##" class="btn btn-info">取消</a>
                    </p>
                </div> 
            </div>                
        </div>
    </div>

     

    转载于:https://www.cnblogs.com/xiaohuochai/p/7119963.html

    展开全文
  • BootStrap缩略图

    2020-03-31 10:27:39
    通过缩略图组件扩展 Bootstrap 的栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。 默认样式的实例 Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。 <!DOCTYPEhtml> <...

    通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。

    默认样式的实例

    Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。

     

    <!DOCTYPE html>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <body>
    <div class="container">
     <div class="row">
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
       </a>
     </div>
      <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
       </a>
     </div>
      <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
       </a>
     </div>
      <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
       </a>
     </div>
     </div>
     </div>
    </body>
    </html>

    自定义内容

    添加一点点额外的标签,就可以把任何类型的 HTML 内容,例如标题、段落或按钮,加入缩略图组件内

    <!DOCTYPE html>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <body>
    <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
        </a>
    <div class="caption">
            <h3>学习BootStrap</h3>
       <p>BootStrap系列教材</p>
       <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
          </div>
      </div>
        <div class="col-xs-3">
        <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
        </a>
    <div class="caption">
            <h3>学习BootStrap</h3>
       <p>BootStrap系列教材</p>
       <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
          </div>
      </div>
      <div class="col-xs-3">
        <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
        </a>
    <div class="caption">
            <h3>学习BootStrap</h3>
       <p>BootStrap系列教材</p>
       <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
          </div>
      </div>
        <div class="col-xs-3">
        <a href="#" class="thumbnail">
     <img src="img/bg2.gif">
        </a>
    <div class="caption">
            <h3>学习BootStrap</h3>
       <p>BootStrap系列教材</p>
       <p><a href="#"  class="btn btn-primary" role="button">确定</a><a class="btn btn-default" role="button">取消</a></p>
          </div>
      </div>
    </div>
    </div>
    </body>
    </html>
    展开全文
  • 主要介绍了Bootstrap缩略图的创建方法,教大家如何实现Bootstrap缩略图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • BootStrap 缩略图

    2016-07-20 14:08:33
    配合栅栏网格使用                              
    配合栅栏网格使用
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
        </div>
    </div>

    自定义内容

    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                    
                    <div class="caption">
                        <h3>图片</h3>
                        <p>关于这张图片的详情</p>
                        <p><a href="#" class="btn btn-default">快速进入</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="img/1.jpg" alt="图片" />
                </div>
            </div>
        </div>
    </div>
    展开全文
  • 主要为大家详细介绍了Bootstrap缩略图与警告框学习使用的相关资料,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警告框,从中得到收获
  • Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。... 缩略图组件 缩略图在网站中最常用的就是...下面是bootstrap缩略图组件不同版本的源码文件: LESS : tbumbnails.less SASS : _tbumbnails.scss
  • bootstrap缩略图(21)

    2018-12-29 15:03:46
    Bootstrap 缩略图 本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
    Bootstrap 缩略图
    本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。
    Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:
    
    在图像周围添加带有 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>
    添加自定义的内容
    现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:
    
    把带有 class .thumbnail 的 <a> 标签改为 <div>。
    在该 <div> 内,您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。
    如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
    下面的实例演示了这点:
    
    实例
    <div class="row">
        <div class="col-sm-6 col-md-3">
             <div class="thumbnail">
                <img src="/wp-content/uploads/2014/06/kittens.jpg" 
                 alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>缩略图标签</h3>
                    <p>一些示例文本。一些示例文本。</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">
                            按钮
                        </a> 
                        <a href="#" class="btn btn-default" role="button">
                            按钮
                        </a>
                    </p>
                </div>
             </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="/wp-content/uploads/2014/06/kittens.jpg" 
                alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>缩略图标签</h3>
                    <p>一些示例文本。一些示例文本。</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">
                            按钮
                        </a> 
                        <a href="#" class="btn btn-default" role="button">
                            按钮
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="/wp-content/uploads/2014/06/kittens.jpg" 
                alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>缩略图标签</h3>
                    <p>一些示例文本。一些示例文本。</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">
                            按钮
                        </a> 
                        <a href="#" class="btn btn-default" role="button">
                            按钮
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="/wp-content/uploads/2014/06/kittens.jpg" 
                alt="通用的占位符缩略图">
                <div class="caption">
                    <h3>缩略图标签</h3>
                    <p>一些示例文本。一些示例文本。</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">
                            按钮
                        </a> 
                        <a href="#" class="btn btn-default" role="button">
                            按钮
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    展开全文
  • Bootstrap缩略图样式使用方法

    千次阅读 2017-01-16 15:47:36
    默认Bootstrap缩略图样式 因为缩略图可能要牵涉到链接,所以需要在图片外面加入一个a标签,缩略图样式直接写入这个a标签即可,使用起来非常方便: class="thumbnail"> 通过对a标签引入thumbnail样式,就可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 494
精华内容 197
关键字:

bootstrap缩略图