bootstrap实例- 1 - 轮播图

2024-02-15 13:53:23

bootstrap实例之轮播图

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，这个是需要用百分比的。

我们通过下面的代码来进行解决，同时加上了媒体查询。