Bootstrap3实用教程
3.14.2 自定义缩略图
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

默认缩略图

自定义缩略图

缩略图的扩展性也非常好,只需添加一点点额外的标签,就可以把任何类型的 HTML 内容,如标题、段落或按钮,加入缩略图组件中。

在定义稍微复杂的缩略图时,需要把标题、段落或按钮等内容让在一个 .caption 的容器中,再把它和图片、视频等统统放入 .thumbnail 的容器中即可。如:

<div class="thumbnail">
  <img src="img/cat.jpg">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>Cras justo odio, dapibus ac ... ut id elit.</p>
    <p>
      <a href="#" class="btn btn-primary">Button</a>
      <a href="#" class="btn btn-default">Button</a>
    </p>
  </div>
</div>

效果如图 3‑70所示:

自定义缩略图
图3-70 自定义缩略图

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验