bootstrap实例- 1 - 轮播图
作者：互联网
bootstrap实例之轮播图
看一个轮播图，要看亮点。
第一，是不是自动轮播。
第二，是不是无缝的。会不会循环。到最后一张之后，是否要去第一章的。
我们自己写轮播的时候，可以将js的基础，过一遍。
之后，我们做移动端的时候，上来的第一件事情，也是做轮播。可是移动端，我们不叫做轮播，叫做无缝滑屏，逼格很高。
简单分析
上面图中两边有两个按钮，这是字体图标。
在bootstrap的组件当中，我们是找不到轮播图的，因为组件当中的东西，都是比较静态的，就是一些框框。
我们想要找轮播图的时候，要去找javascript插件。
这个教程是，使用bootstrap3，地址是：https://v3.bootcss.com/javascript/#carousel
在js插件中，找到了轮播图的代码，然后复制粘贴就可以了。
小提醒
轮播图的代码是放在如图所示的位置，从上面的图中可以看出，之前老师已经写了一部分的代码。
这部分的代码，就是导航栏的代码，只不过这部分的代码，被这个龟孙折叠了，所以我们看不到。
做到这一步之后，页面显示的样子，是下面的样子：
对比这篇文章开头的轮播图的效果图，可以看到，现在我们的轮播图两边的箭头是没有的，箭头是字体图标，所以下一步，我们需要添加轮播图两边的字体图标。
字体图标
在添加字体图标这个环节，老师是从之前做过轮播图的项目中，将fonts和images文件夹拷贝到了现在的项目文件夹中，可以看到之前做过轮播图的班级是北京_1208，现在我们的项目的文件夹是02_bootstrap实例文件夹。
做完了这个操作之后，页面的效果图如下所示：
轮播图两边的箭头就出现了，表示字体图标就已经添加上去了。
在a标签上面写一个class，字体图标就上来了，之前老师是演示过字体图标的玩法的，当然了，这对我来说是未知隐藏的信息。
轮播图插图
我们先分析轮播图的html代码的结构。
轮播图的代码折叠起来，就是上图所示的样子，最外层是一个div容器，class是carousel slide。
这里有一个需要注意的点，就是这个div容器的data-ride属性，这里关于data-开头的属性有一个知识点。
对于data-开头的属性，html5当中是有API来获取这样的属性的。
这些data-开头的属性，都是javascript要获取的属性，在bootstrap当中，这些data-都是javascript的标志位。
小判断
根据上面的知识点，我们的判断是：在轮播图中，如果没有这个data-ride属性，那么就没有轮播的效果。如果写了这个data-ride属性，那么通过bootstrap中的javascript代码，就会产生轮播的效果。
对于上面的判断，我们做一个小小的验证：
我们去掉了上面的data-ride属性，然后观察一下页面的效果，如图所示：
最终我们看到，这个自动轮播的效果，还是在的，这说明了我们前面基于知识点做的小判断是错误的。
为什么会这样呢？我们需要研究一下轮播图的代码。
小判断失误的代码研究
我们将轮播图的代码展开，一行一行地阅读。
第一部分根据代码注释是indicators，这个单词的意思是，指示器；迹象；指示剂；标志；（indicator的复数），这个根据经验一看就知道，显示在页面上的效果，就是小圆点。
接着往下看：
上图中，在小圆点的代码下面的代码，注释显示的是wrapper for slides，这里应该放置的是每一张需要轮播的图。
注释为controls的两个a标签，就是按钮。我们可以从图中看到在a标签的内部还有span标签，在span标签上面有class属性是glyphicon，这个单词不算是一个英文单词，glyph是一个英文单词，意思是象形文字；束腰竖沟；竖面浅槽饰；竖沟装饰；雕刻的符号；图示符。glyphicon的意思就是字体图标。
在bootstrap的官网的组件中，glyphicon glyphicon-chevron-left和glyphicon glyphicon-chevron-right就是如下图所示的两个图标。我们将这两个class给span标签加上这两个属性，就加上了字体图标。
遗漏
讲到这里，这个龟孙就不再讲上面的判断为啥失误了。滑溜过去了。就开始讲轮播图的插入图片的过程了。
插入图片
在轮播图的代码中，一个item表示的，就是一个图片。如图所示，直接在img标签的src属性中，引入images文件夹下面的图片，就可以了。
上图中carousel-caption属性所在的div中所写的，应该是对图片的文本描述。
最终我们写成了下面的样子：
得到的效果如下图所示：
同样地，我们在上面的图片中，也看到了小圆点。
小圆点
我们实际要做的实例中，轮播图是有五张，有五个小圆点的。所以我们这样写：
插图
然后我们是需要将五张图片全部都引入进来，写成了下面的这个样子：
我们看到下面的效果：
问题一 - 图片的响应式
我们看到上面的图片显示出来了一个问题，就是我们引入的图片都不是一样大的。
我们的目标是要做一个响应式的轮播图，那么我们的图片也应该是响应式的。
所以，我们要让图片实现响应式。
我们的容器是响应式的，我们让图片跟着我们的容器走，这样就实现了响应式。
我们需要编写下面的代码：
这样，图片就会自适应了。
问题二 - 显示的空白问题
添加了上面的图片响应式的代码后，得到的是下面的效果：
这个显示是有一点问题的，就是上图当中的图片和导航栏之间的空白问题。
这个问题我们先放着，先不解决。
问题三 - 图片太大的问题
我们最终要做的效果是下面的样子：
我们现在的效果，和我们最终的效果相对比，我们现在的图片看起来就是太大了，这个原因是因为我们的容器太大了。
现在这个id为carousel-example-generic的容器，默认是靠我们的图片撑开的。我们不希望容器的大小被图片的大小撑开。
这种情况下，需要我们自己去写容器的大小。我们不要去利用bootstrap的class属性去修改样式，因为这样可能会将bootstrap给我们添加好的样式覆盖掉。我们可以自己去添加class属性名，然后再添加样式。
我们给容器添加了一个damu-carousel属性，然后控制它的高度为500px，得到下面的效果：
我们看上面的效果，图片已经溢出了，对比最终的效果，我们需要将溢出的效果隐藏掉：
这样得到的效果，如下图所示：
问题四 - 文本消失和文本很丑的问题
但是上图当中，我们添加的文本chrome、firefox等这些已经没有了，这是一个衍生的新的问题。而且老师这时候又提出来一个问题，是感觉这些文本是很丑的，想要优化一下。
对于这个文字很丑的问题，想要去bootstrap中找一点东西优化一下。
bootstrap中有组件，javascript插件，全局css样式。
组件当中是静态的东西，插件当中是动态的东西。
老师找了一圈没有找到什么合适的玩意。只好用h2标签将这些文本包裹起来了。
接下来解决文字消失的问题，经过分析，是在小屏幕的时候，文字是正常显示的，大屏幕的时候，文字就下移消失了。
我们分析发现文字所在的class为.carousel-caption的div的bottom属性是20px，这个bottom表示的是.carousel-caption容器距离.item所在的容器的底部，是20px。
我们现在判断，这个20px是不应该写死的，应该是一个百分比。
要想理解这个判断，我们必须理解bottom属性。
bottom属性的理解
对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。
对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。
对于上面的bottom属性的知识点，我们再用下面的例子进行说明。
回到文本消失问题的判断
上面的.carousel-caption的div的bottom是20px，这是写死的，这是不合适的。
这个bottom的意思就是，对于包裹.carousel-caption的div的.item的div的底部，距离是20px。
这是第一个原因。
我们发现包裹.carousel-caption这个div的.item的div，它的宽度和高度是auto和auto的。
从上面两张图，可以明白无误地看到，chrome所在的item的容器的高度，是比firefox所在的item的高度，是要高的。
这是因为item这个容器的大小，是根据图片来的。
我们的五张图片大小是不一样的，所以item的大小是不一样的。
文本所在的div的bottom是相对于item这个元素的底部的距离，item的大小不一样，这个距离也就是不一样，就会出现看不到文本的现象。
这才是文本消失的本质原因，前面那个对botttom的判断，不是本质原因。
文本消失问题的梳理和解决
梳理一下html的结构：
- div：carousel-slide、damu-carousel
这个div是相对定位的，我们利用damu-carousel设置了height为500px- div：carousel-inner
- div: item
这个div是相对定位的，它的宽度和高度是auto和auto，这个是需要固定的。- div: carousel-caption
这个div的bottom，设置为了20px，这个是需要用百分比的。
- div: carousel-caption
- div: item
- div：carousel-inner
我们通过下面的代码来进行解决，同时加上了媒体查询。
通过这样的调整，得到的效果是这样的：
到了这里，文本消失的问题，就解决了，当然了，从上面的图中，我们还是可以看到，有问题二所述的问题存在，再放一放。
问题五 - 导航栏的问题
我们通过研究效果图，发现，上面的导航栏，应该是固定定位的，我们拉动滚动条，导航栏都是位于页面的顶部的。
我们现在自己写的页面当中，导航栏并不是固定定位，因为我们现在还什么都没有给我们的导航栏进行设置的。
然后我们是需要去bootstrap的官网当中寻找一下的。
然后我们在代码当中，给导航栏增加上，上面的navbar-fixed-top，就可以实现了导航栏的固定定位：
这个时候，得到的效果图如下所示：
问题六 - 导航栏会挡住一点图片
从上面的效果图中，我们可以看到，导航栏是会挡住一点图片的。
我们需要给轮播图的容器加上一点margin-top。
效果如下：
这个时候，看这个效果，就是一个比较完整的效果了。
我们在开发者工具当中，将导航栏的透明度调整为0，然后看看效果，确实是显示正常的。
移动端的效果，也是如此：
到这里，我们问题二所述的显示空白的问题，也解决了。
现在的效果如下：
这个效果，就没有太大的问题了。
轮播图的速度
我们嫌弃轮播图的速度太慢了，现在差不多轮播的耗时是需要5s，我们想要提高一点的，怎么办呢？
我们需要看bootstrap的文档：
我们可以看到官方文档中的对轮播图的参数是有说明的，我们根据官方文档的说明，可以来自定义轮播图的播放速度：
我们除了使用上面的方式可以进行自定义参数，还可以使用jquery。
boostrap当中的所有的插件，都是基于jquery的。
两个事件
到了这里，轮播图就结束了。
标签：轮播,bootstrap,实例,carousel,div,属性,我们,图片 来源： https://www.cnblogs.com/gnuzsx/p/15642009.html