Bootstrap JS插件使用
>对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中
>然后作出相应的样式调整
引导中轮播图插件叫作旋转木马
一，基本的轮播图实现
HTML代码
1 <!--
2 以下容器就是整个轮播图组件的整体，
3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
4 bootstrap.js会自动为当前元素添加图片轮播的特效
5 -->
6 <div id="轮播图的ID" class="carousel slide" data-ride="carousel">
7 <!-- ol标签是图片轮播的控制点 -->
8 <ol class="carousel-indicators">
9 <!--
10 每一个li就是一个单独的控制点
11 data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
12 data-slide-to属性是指当前的li元素绑定的是第几个轮播项
13 注意，默认必须给其中某个li加上active，展示的时候就是焦点项目
14 -->
15 <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
16 <li data-target="#轮播图的ID" data-slide-to="1"></li>
17 <!-- ...更多的 -->
18 </ol>
19 <!--
20 .carousel-inner是所有轮播项的容器盒子，
21 注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
22 -->
23 <div class="carousel-inner" role="listbox">
24 <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
25 <div class="item active">
26 <!-- 轮播项目中展示的图片 -->
27 <img src="example.jpg" alt="示例图片">
28 <div class="carousel-caption">
29 <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->
30 </div>
31 </div>
32 <div class="item">
33 <!-- ... -->
34 </div>
35 <!-- ... -->
36 </div>
37 <!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 -->
38 <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
39 <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 -->
40 <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
41 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
42 <span class="sr-only">上一张</span>
43 </a>
44 <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
45 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
46 <span class="sr-only">下一张</span>
47 </a>
48 </div>
二，轮播图使用中的问题
如图1所示，由于轮播图片超宽造成的影响
- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度
- 而且Bootstrap的样式中默认将图片的max-width设置为100 ％;
- 造成界面图片缩放
- 想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示
+ 两种办法：
（1）换用背景图的方式，background-position：center center ;
（2）使用img元素绝对定位，左：50％，margin-left：-width / 2
2，背景使用
- 将容器的高度固定（410px）
- 将轮播图改为背景显示
- 由于可能图片的高度不一定是410px
- 所以需要设置css3中的background-size
3，背景尺寸
（1）长度
+如果背景尺寸： 100px 100px，将背景图固定到多大尺寸
-百分比
+如果背景尺寸：90％ 90％，以百分比的形式设置背景大小（2）封面 + 1.背景图片等比例缩放 + 2.让背景图相对较小边放大到目标容器大小结束 *如：一张100 \ * 200的背景图放到一个 300 \ * 400的盒子中，最终背景图片的大小是 300 \ * 600 *因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300 \ * 600（3）包含 + 1.背景图片等比例缩放 + 2.让背景图相对较大边放大到目标容器大小结束 *如：一张 100 \ * 200的背景图放到一个
300 \ * 400的盒子中，最终背景图片的大小是200 \ * 400
*因为背景图的较大边为200，将200放大到目标容器400的高度，放大了2倍，最终结果200 \ * 400
4，图片响应式
（1）目的
+各种终端都需要正常显示图片
+移动端应该使用更小（体积）的图片
（2）实现方式
+将元素中直接设置的图片背景删除，换成两个 data-属性（如： data-img-sm =“小图路径”，data-img-lg =“大图路径”）
+通过 JS的方式获取屏幕的宽度 ;
+判断屏幕宽度是否小于一定的值（如： 768）
+判断根据情况决定使用具体的大图产品还是小图产品
三，JavaScript的
如图1所示，根据屏幕大小设置轮播图片
1 var windowWidth = $(window).width(); // 获取屏幕宽度
2 var isSmallScreen = windowWidth < 768; // 判断屏幕属于大还是小
3 // 根据大小为界面上的每一张轮播图设置背景
4 // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
5 $('#main_ad > .carousel-inner > .item').each(function(i, item) {
6 var $item = $(item);// 因为拿到是DOM对象 需要转换
7 // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
8 var imgSrc =
9 isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
10
11 // 设置背景图片
12 $item.css('backgroundImage', 'url("' + imgSrc + '")');
13 });
2，窗口调整大小事件
由于上一步我们实现的过程是指在页面加载完成判断一次，
- 当用户手动调整页面宽度过后没有及时发生变化，
- 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题
1 function 窗口变化后执行的函数名(){
2 // 具体的操作
3 }
4 $(window).on('resize', 窗口变化后执行的函数名);
5 ```
6
7 - 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次
trigger函数是让window对象立即出发一次
$(window).on('resize', 窗口变化后执行的函数名).trigger('resize');
3，小图片不需要使用背景的方式
- 小图如果还是使用背景的方式，当屏幕特别小时，效果很差
- 所以当使用小图时，改用img的方式
1 // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
2 if (isSmallScreen) {
3 $item.html('<img src="' + imgSrc + '" alt="" />');
4 } else {
5 $item.empty();
6 }
按照目前的情况，如果是小图展示则不需要给容器加上410px的固定高度
- 所以我们可以通过CSS媒体查询的方式解决方案
1 #main_ad > .carousel-inner > .item {
2 background-repeat: no-repeat;
3 background-position: center center;
4 background-size: cover;
5 }
6 @media (min-width: 768px) {
7 #main_ad > .carousel-inner > .item {
8 height: 410px;
9 }
10 }
11 #main_ad > .carousel-inner > .item > img {
12 width: 100%;
13 }
四，栅格系统
网格系统
- 该板块当屏幕为中等尺寸时分为3列，较小屏幕是分为2列
- 所以使用网格系统划分
<div class="col-sm-6 col-md-4">
<!-- ... -->
</div>
五，媒体对象样式
- 每一个小块的样式可以通过Bootstrap中的媒体对象样式实现
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全称保证支付安全</p>
</div>
</div>
</a>
六，响应式辅助类型
- 整个板块在超小屏幕下是隐藏起来的
+只需要给当前板块加上hidden-xs的类
扫一扫
1132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
