移动web——bootstrap响应式轮播图
基本介绍
1、bootstrap有轮播图的模板，我们只需要改动下就行。
2、这里我们将介绍桌面版本和移动版本最后是综合版本
桌面版本
1、这里的图片设置是有窍门的，不再去添加img标签，而是作为a标签的背景图片
2、背景图片的设置必须是两边很长，中间是内容，设置cover，居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.item a {
display: block;
height: 410px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} .item a.a1 {
background-image: url("images/slide_01_2000x410.jpg");
} .item a.a2 {
background-image: url("images/slide_03_2000x410.jpg");
} .item a.a3 {
background-image: url("images/slide_04_2000x410.jpg");
} </style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="a1 hidden-xs"></a>
</div>
<div class="item">
<a class="a2 hidden-xs"></a>
</div>
<div class="item">
<a class="a3 hidden-xs"></a>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
移动版本
1、移动版本需要注意img标签和a标签的宽度都是100%
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.item a {
display: block;
width: 100%;
} .item a img {
width: 100%;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test01.jpg" alt="...">
</a>
</div>
<div class="item">
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test02.jpg" alt="...">
</a>
</div>
<div class="item">
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test03.jpg" alt="...">
</a>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
综合版本
1、将两者融合在一起，在不同设备下，有不同的显示效果
2、注意使用响应式工具就行了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.item a:nth-child(1) {
display: block;
height: 410px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} .item a:nth-child(1).a1 {
background-image: url("images/slide_01_2000x410.jpg");
} .item a:nth-child(1).a2 {
background-image: url("images/slide_03_2000x410.jpg");
} .item a:nth-child(1).a3 {
background-image: url("images/slide_04_2000x410.jpg");
} .item a:nth-child(2) {
display: block;
width: 100%;
} .item a img {
width: 100%;
} </style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="a1 hidden-xs"></a>
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test01.jpg" alt="...">
</a>
</div>
<div class="item">
<a class="a2 hidden-xs"></a>
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test02.jpg" alt="...">
</a>
</div>
<div class="item">
<a class="a3 hidden-xs"></a>
<a class="hidden-lg hidden-md hidden-sm">
<img src="data:images/test03.jpg" alt="...">
</a>
</div>
</div> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
移动web——bootstrap响应式轮播图的更多相关文章
- 第二百五十一节，Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- JavaScript响应式轮播图插件–Flickity
简介 flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线演示及下载 演示地址 下载页面 使用方法 ...
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- 分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图
话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为<聊聊大麦网UWP版的首页顶部图片联动效果的实现方法>(传递:http://www.cnblogs.com/hippieZh ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- web常见效果之轮播图
轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
随机推荐
- noip模拟赛 天天和不可描述
分析:直接就这么翻肯定是不行的,换一种想法:有括号就是把括号里的字符串倒着输出,如果在括号里又遇到了括号就继续倒着输出,相当于递归. 我们可以用递归直接做,也可以用一层循环搞定,每次从左括号跳到右括号 ...
- WINDOWS下调用GetTokenInformation的奇怪之处--两次调用
就是用getLastErr可以得到错误号,同时,会将需要的长度写到参数里,再进行第二次调用,以此来节约内存空间. 神奇的长见识了. 相关说法如下: ====================== The ...
- codevs——1979 第K个数
1979 第K个数 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 给定一个长度为N(0<n<=10 ...
- maven 本地配置
1.安装 配置环境变量 文件路径:C:\Program Files\apache-maven-3.3.9 2.本地文件配置 setting的配置 找到文件C:\Program Files\apache ...
- uva 11552 dp
UVA 11552 - Fewest Flops 一个字符串,字符串每 k 个当作一组,组中的字符顺序能够重组.问经过重组后改字符串能够编程最少由多少块字符组成.连续的一段字符被称为块. dp[i][ ...
- cocos2d-x大版本号3.1系列一
本人博客,欢迎转载:http://blog.csdn.net/dawn_moon 项目忙完了.继续写我的博客.去cocos2d-x的官网看了下,不出所料.又有惊喜啊.3.0经过几个版本号的迭代,最终迎 ...
- H5端调起百度地图、腾讯地图app
来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...
- automaticallyAdjustsScrollViewInsets 使用
automaticallyAdjustsScrollViewInsets(个人认为iOS7中略坑爹的属性) @当我们在一个UIViewController中同时创建2个tableView的时候,如果把 ...
- E20171015-hm
quirk n. 怪癖; 奇事,巧合; 突然的弯曲; propagation n. 宣传; 传播,传输,蔓延,扩展,波及深度; [生]繁殖法,[地]传导; 培养; immediate adj. ...
- Ruby 遍历多个数组
puts("----------------------------------------") puts(" 多重指定 test") ...