bootstrap系列之十七缩略图和警告框

最新推荐文章于 2021-08-11 16:21:41 发布
最新推荐文章于 2021-08-11 16:21:41 发布
阅读量394 收藏
点赞数
分类专栏： JAVAEE 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeputi1015/article/details/76762663
版权 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo01</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
	    <script language="JavaScript" src="js/bootstrap.min.js"></script>
	  
	</head>
	<body>
	    <div class="container">
			<div class="row">
						  <div class="col-xs-6 col-md-3">
						    <a href="#" class="thumbnail">
						      <img src="img/pic01.jpg" alt="pic">
						    </a>
						  </div>
						  <div class="col-xs-6 col-md-3">
						    <a href="#" class="thumbnail">
						      <img src="img/pic01.jpg" alt="pic">
						    </a>
						  </div>
						  <div class="col-xs-6 col-md-3">
						    <a href="#" class="thumbnail">
						      <img src="img/pic01.jpg" alt="pic">
						    </a>
						  </div>
						  <div class="col-xs-6 col-md-3">
						    <a href="#" class="thumbnail">
						      <img src="img/pic01.jpg" alt="pic">
						    </a>
						  </div>

			</div>
		
	        <hr/>
	        
<div class="row">
	  <div class="col-sm-6 col-md-4">
	    <div class="thumbnail">
		      <img src="./img/pic01.jpg" alt="pic">
		      <div class="caption">
		        <h3>Thumbnail label</h3>
		        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
	    </div>
	  </div>
	  <div class="col-sm-6 col-md-4">
	    <div class="thumbnail">
		      <img src="./img/pic01.jpg" alt="pic">
		      <div class="caption">
		        <h3>Thumbnail label</h3>
		        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
	    </div>
	  </div>
	  <div class="col-sm-6 col-md-4">
	    <div class="thumbnail">
		      <img src="./img/pic01.jpg" alt="pic">
		      <div class="caption">
		        <h3>Thumbnail label</h3>
		        <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
		        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
		      </div>
	    </div>
	  </div>
	  
</div>
	    </div>
	    	  
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo01</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
	    <script language="JavaScript" src="js/bootstrap.min.js"></script>
	  
	</head>
	<body>
		<div class="container">
			 <div class="alert alert-info">
			 	<button type="button" class="close" data-dismiss="alert">×</button>
			 	<p>这里是提示信息</p>
			 </div>
			 <hr />
			 
			  <div class="alert alert-info alert-dismissable">
			 	<button type="button" class="close" data-dismiss="alert">×</button>
			 	<p>这里是提示信息<a href="#" class="alert-link">百度</a></p>
			 </div>
			
		</div>
	</body>
</html>



叶菩提
关注
专栏目录
Bootstrap笔记之缩略图、警告框实例详解
08-31
【Bootstrap缩略图】Bootstrap是流行的前端开发框架，其缩略图组件（thumbnail）用于创建美观的图片展示，常用于产品列表或者图像预览。在HTML中，通过为`<a>`标签添加`class="thumbnail"`，可以快速将链接转换为...
Bootstrap缩略图与警告框学习使用
08-31
在本教程中，我们将深入探讨如何使用Bootstrap中的缩略图（Thumbnails）和警告框（Alerts）来增强网站的用户体验。 首先，让我们来看看Bootstrap的缩略图组件。缩略图通常用于展示图片、视频或其他媒体的预览。在...
bootstrap学习（六）————缩略图和面板
weixin_52166438的博客
08-11 356
使用 Bootstrap 创建缩略图的步骤如下： 在图像外面添加带有 class .thumbnail 的 a 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。 添加自定义的内容 我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下： 把带有 class .thumbnail 的 a 标签改为 div。 在该 div 内，您可以添加任何您想要添加的东西。由于这是一个 div，我们可以使用默认的基于 span 的
Bootstrap缩略图样式使用方法
我的web前端学习
01-16 7393
默认Bootstrap缩略图样式 因为缩略图可能要牵涉到链接，所以需要在图片外面加入一个a标签，缩略图样式直接写入这个a标签即可，使用起来非常方便：<a href="#" class="thumbnail">  通过对a标签引入thumbnail样式，就可以实现Bootstrap缩略图的样式，而且hover还有对应的交互效果，非常不错，另外，为了符合SEO搜索引擎优化原则，你需要在img
Bootstrap巨幕页头缩略图和警告框组件
Just The Way You Are
07-16 836
巨幕组件 巨幕组件主要是展示网站的关键性区域 <!-- 固定范围内，有圆角 --> <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>这是一个学习性网站</p> <p><a href="#" class="btn btn-default">更多内容</a></p
【Bootstrap】015-组件：缩略图、警告框、进度条
訾博（ZiBo）的博客
10-07 496
目录 一、缩略图 1、概述 2、默认样式的实例 代码演示： 运行结果： 3、自定义内容 代码演示： 运行结果： 二、警告框 1、实例 代码演示： 运行结果： 2、可关闭的警告框 代码演示： 运行结果： 备注： 3、警告框中的链接 代码演示： 运行结果： 三、进度条 1、概述 2、基本实例 代码演示： 运行结果： 3、带有提示标签的进度条 代码演示： 运行结果： 代码演示： 运行结果： 4、根据情境变化效果 代码演示： 运行结果： 5、条纹效果
bootstrap学习笔记——10——巨幕页头缩略图和警告框组件
小贺的博客
06-19 352
组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。 巨幕组件 巨幕组件主要是展示网站的关键性区域 //在固定的范围内，有圆角 &lt;div class="container"&gt; &lt;div class="jumbotron"&gt; &lt;h2&gt;网站标题&lt;/h2&gt; &lt;p&gt;这是一个学习性的...
bootstrap巨幕页头缩略图和警告框组件
涂涂
07-20 479
学习笔记 一．巨幕组件 1.留有边距的巨幕。也就是固定大小的巨幕 在固定的范围内，有圆角 网站标题 这是一个学习型网站 更多内容 2.100%全屏的巨幕，没有留外边距，没有圆角。1.2两种巨幕只是交换了container和jumbotron的位置 网站标题 重中之重 更多内容 1.2效果如下：
Bootstrap笔记12—缩略图、警告框
erdouzhang
03-09 401
1. 基础缩略图给a标签添加类class="thumbnail"如下：<div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" class="thumbnail"><img src="img/01.png" alt="图片"></a> </div> <div class="col-md-3 co
Bootstrap 巨幕页头缩略图和警告框组件
weixin_30501857的博客
12-20 90
一．巨幕组件 //在固定的范围内，有圆角 <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p>这是一个学习性的网站！</p> <p><a href="#" class="btn btn...
Bootstrap 第10章 巨幕页头缩略图和警告框组件
一直专注于互联网
12-28 131
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, us
第十章之巨幕页头缩略图与警告框组件
10-22
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，...本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件 的相关资料,需要的朋友可以参考下
SpringBoot系列之二 关于JSON使用的那点事儿
yeputi_WK的博客
06-21 4404
一、使用JSON 1、使用SpringBoot 中的Controller如果返回对象，返回到前端的数据默认为JSON @RequestMapping("getPerson") public Person getPerson() { Person person = new Person(); person.setId(0); person.setName("Kmagic枣庄智行公
SpringBoot系列之四全局配置
yeputi_WK的博客
06-21 2175
一、在src/main/resources代码目录下，建立application.properties文件 二、可配置内容实例如下 #配置context pach , 访问地址就是http://ip:port/spring-boot-hello server.context-path=/spring-boot-hello server.port=8081 #server.address= #
SpringBoot系列之三全局异常的捕获处理
yeputi_WK的博客
06-21 979
/** * @auth yeputi1015 QQ953916078 枣庄智行公交 * 1、注解class , @ControllerAdvice * 2、注解方法, @ExceptionHandler(value=Exception.class) */ @ControllerAdvice public class GlobalDefaultException { @Exceptio
bootstrap系列之八小图标
yeputi_WK的博客
08-05 807
效果图  注册 Star
bootstrap系列之十一按钮下拉菜单
yeputi_WK的博客
08-06 720
效果图 demo01 下拉 项目 项目 项目
Bootstrap实战：缩略图与警告窗口应用解析
使用Bootstrap缩略图的步骤如下： 1. 创建一个包含多个`.thumbnail`类的容器，通常是一个`.row`内的`.col-*-*`元素。`.col-*-*`代表Bootstrap的响应式网格系统，允许在不同屏幕尺寸下调整元素的宽度。 2. 在`....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值