Bootstrap基本组件学习笔记之缩略图(13)

2024-12-07 10:15:37

Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案。

直接看例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>缩略图</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>缩略图</h1>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

从上面例子可以看出，实现缩略图需要添加.thumbnail样式类，这样会在图片四周添加padding的边框，同时当鼠标悬停在图片上时，会动态显示出轮廓。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Bootstrap每天必学之缩略图与警示窗

1.缩略图缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 源码文件: ☑ LESS版本:对应文件thumbnails.less ☑ Sass版本:对应文件_thumbnails.scss ☑ 编译后版本:bootstrap.css文件第4402行-第4426行使用方法:
Bootstrap缩略图的创建方法

Bootstrap 创建缩略图的步骤如下: 1.在图像周围添加带有 class .thumbnail 的 <a> 标签. 2.这会添加四个像素的内边距(padding)和一个灰色的边框. 有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题.段落或按钮.具体步骤如下: 1.把带有 class .thumbnail 的 <a> 标签改为 <div>. 2.在该 <div> 内,您可以添加任何您想要添加的东西.由于这是一个 <div&
Bootstrap源码解读标签、徽章、缩略图和警示框（8）

标签标签组件通常用来做一些高亮显示用以提醒.使用".label"样式来实现,可以使用span这样的行内标签,例如:<span class="label">标签</span> 实现源码如下: .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align:
Bootstrap笔记之缩略图、警告框实例详解

1. 基础缩略图给a标签添加类class="thumbnail"如下: <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"
浅析Bootstrap缩略图组件与警示框组件

Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 缩略图组件缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息. bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合bootstrap的网格系统来实现.下面是bootstrap缩略图组件不同版本的源码文件: L
Bootstrap缩略图与警告框学习使用

本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
Bootstrap基本组件学习笔记之缩略图(13)

Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案. 直接看例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link
Bootstrap基本组件学习笔记之下拉菜单(7)

对于一些较为常用的功能模块,Bootstrap也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
Bootstrap基本组件学习笔记之列表组(11)

列表组件用于以列表形式呈现复杂的和自定义的内容. 创建一个列表组,只需要完成以下两步: (1)向元素 <ul> 添加 class .list-group: (2)向 <li> 添加 class .list-group-item. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta n
Bootstrap基本组件学习笔记之按钮组(8)

按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单. 0x01 基本用法直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l
Bootstrap基本组件学习笔记之input输入框组(9)

使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap基本组件学习笔记之进度条(15)

Bootstrap提供了各式各样的进度条. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="
Bootstrap基本组件学习笔记之面板(14)

直接看Bootstrap面板例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo
Bootstrap基本组件学习笔记之导航(10)

Bootstrap的导航很有特色,主要分为胶囊式导航.面包屑导航.头部导航共3大类,可以满足绝大部分需求. 0x01 胶囊式导航胶囊式导航采用的是无序列表ul来实现: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
Bootstrap基本组件学习笔记之分页(12)

Bootstrap提供了对分页的良好支持. 0x01 默认的分页 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&qu
Bootstrap源码学习笔记之bootstrap进度条

基本样式要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr

Bootstrap基本组件学习笔记之缩略图(13)

相关推荐

随机推荐