响应式前端框架Bootstrap系列（8）图片处理

最新推荐文章于 2021-05-30 20:27:12 发布

黄泽平

最新推荐文章于 2021-05-30 20:27:12 发布

阅读量578

点赞数

分类专栏： bootstrap3 前端集合 Bootstrap入门系列及组件归纳应用文章标签： Bootstrap

本文链接：https://blog.csdn.net/zeping891103/article/details/79045007

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

bootstrap3

20 篇文章 2 订阅

订阅专栏

Bootstrap入门系列及组件归纳应用

20 篇文章 2 订阅

订阅专栏

bs对图片的处理只有简单的遮罩功能，如把一张图片变为圆形、正方形等。

.img-rounded：为图片添加圆角
.img-circle：将图片变为圆形
.img-thumbnail：缩略图功能
.img-responsive：块级显示，宽为100%，高为自适应。图片响应式 (将很好地扩展到父元素)

演示代码：

<style>
	img {
		width: 200px;
		height: 200px;
		margin: 20px;
	}
</style>

<div class="container">
	<img src="../imgs/timg.jpg" class="img-rounded">
	<img src="../imgs/timg.jpg" class="img-circle">
	<img src="../imgs/timg.jpg" class="img-thumbnail">
	<img src="../imgs/timg.jpg" class="img-responsive">
</div>

效果图：

在实际应用中，图片很有可能应用在相册、缩略图等界面，在bs中，可以通过系统提供的API实现简单的缩略图功能效果。

演示代码：

<style>
			div .thumbnail:hover{
				border: solid 1px black;
			}
		</style>
		
		<div class="container">
			<div class="row">
				<div class="col-sm-3">
					<div class="thumbnail">
						<img src="../imgs/timg.jpg" />
						<div class="caption">
							<h3>婚纱照系列</h3>
							<p>巴厘岛</p>
							<p>
								<a href="../imgs/timg.jpg" class="btn btn-primary" role="button" download>
									下载
								</a>
								<a href="#" class="btn btn-default" role="button">
									删除
								</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>

效果图：

Bootstrap 轮播（Carousel）插件

bs还内置了一个相册轮播的插件效果，Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。它的API介绍参数如下：

选项:

（1）interval，属性data-interval（默认为5000），自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
（2）pause，属性data-pause（默认为hover），鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
（3）wrap，属性data-wrap（默认为true），轮播是否连续循环。
方法：

（1）.carousel(options)，初始化轮播为可选的 options 对象，并开始循环项目。如$('#identifier').carousel({interval: 2000})
（2）.carousel('cycle')，从左到右循环轮播项目。
（3）.carousel('pause')，停止轮播循环项目。
（4）.carousel(number)，循环轮播到某个特定的帧（从 0 开始计数），如 $("#identifier").carousel(0);
（5）.carousel('prev')，循环轮播到上一个项目。
（6）.carousel('next')，循环轮播到下一个项目。

事件：

（1）slide.bs.carousel，当调用 slide 实例方法时立即触发该事件。
（2）slid.bs.carousel，当轮播完成幻灯片过渡效果时触发该事件。

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 轮播（Carousel）插件</title>
		<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
		<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script>
		<style>
			#myCarousel {
				width: 620px;
				margin: auto;
			}
			
			#myCarousel img {
				margin: auto;
				max-width: 1920px;
				margin: 0 50%;
				transform: translateX(-50%);
				width: 100%;
			}
		</style>
		<!--要想设置比div宽的图片居中显示，可把<img>设为：max-width等于图片宽度，margin: 0 50%;transform: translateX(-50%);-->
	</head>

	<body>
		<div class="container">
			<div id="myCarousel" class="carousel slide" data-interval="2000">
				<!-- 轮播（Carousel）指标，此处li的原点样式是可以改变的，只要根据需求重置li宽高和边框border、border-radius即可 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
						<img src="../imgs/timg.jpg" alt="First slide" class="img-responsive">
						<div class="carousel-caption">标题 1</div>
					</div>
					<div class="item">
						<img src="../imgs/timg.jpg" alt="Second slide" class="img-responsive">
						<div class="carousel-caption">标题 2</div>
					</div>
					<div class="item">
						<img src="../imgs/timg.jpg" alt="Third slide" class="img-responsive">
						<div class="carousel-caption">标题 3</div>
					</div>
				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="carousel-control left" href="#myCarousel" data-slide="prev" style="line-height: 370px; font-size: 140px;">‹</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next" style="line-height: 370px; font-size: 140px;">›</a>
			</div>
		</div>
	</body>
	<script>
		// 方法
		$('#myCarousel').carousel('cycle');

		//事件
		$('#myCarousel').on('slide.bs.carousel', function() {
			console.log("slide.bs.carousel事件触发");
		});
	</script>
</html>

效果图：

黄泽平

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
响应式前端框架Bootstrap系列（8）图片处理

bs对图片的处理只有简单的遮罩功能，如把一张图片变为圆形、正方形等。.img-rounded：为图片添加圆角 .img-circle：将图片变为圆形.img-thumbnail：缩略图功能.img-responsive：块级显示，宽为100%，高为自适应。图片响应式 (将很好地扩展到父元素)演示代码： img { width: 200px; height:
复制链接

扫一扫

专栏目录