置顶文章：《纯CSS打造银色MacBook Air（完整版）》 上一篇：《拥Bootstrap入怀??导航栏篇》
作者：myvin
写在前面在该博文中，我依旧结合自己做的那个山水网页来聊一下Bootstrap的使用，网页截图如下：
完整网页的效果和代码可以点击这里查看或者到CodePen上查看。我们再在这里重复一下这个网页要达到的几个主要效果，看过上一篇博文的帅哥美女们可以直接跳过这一段了：
-
导航栏的登陆、注册按钮点击后弹出登陆、注册modal框，并且登陆、注册窗口可切换，菜单栏为响应式
立即学习“前端免费学习笔记（深入）”；
导航栏中的山水选项可下拉，点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab
幻灯片大屏轮播
tab页点击切换
上一篇博文中我们简单聊了聊导航栏的相关内容，想了解或回顾一下的可以点击这里查看上一篇博文。今天我们再聊聊幻灯片大屏轮播这部分。想先目睹下大屏轮播效果实现的可以点击这里查看。
幻灯片大屏轮播先给出大屏轮播的准完整代码：
其中，该段代码是轮播图下方的三个快速切换的小圆点：
该段代码是轮播图切换的前后两个箭头：
Previous Next
大屏轮播下是带有风景圆图的三段简介：
其中，col-md-10类使得下方三段简介总共占10列，col-md-4类使得每段简介分别占4列。
运行以上代码后，我们面对的其实并不是我们想要的效果，轮播图紧挨着下面的三段简介，图片大的有些畸形，而且还有没有填充满的边缘，所以上面说的是准代码，所以我们还需要填补一些代码来完善。
首先我们给carousel类添加代码，限制整个轮播区域的大小，为了视觉上的美观，并和下方的三段简介间隔70px：
.carousel{ height:500px; margin-bottom: 70px; }同时也给carousel类下的item类添加样式：
.carousel .item{ height:500px; }最后为了填充侧边的空白，将轮播的图片百分百占满浏览器宽度：
.carousel .item img{ width:100%; }自行添加上这三段代码后运行，貌似没有什么bug，但如果将浏览器缩小缩小再缩小，令人“欣慰”的情况终于出现了：
我们看下面的那段黑白过度的条儿。因为我们给轮播图片容器限制了500px的高度，所以当页面缩小自适应时由于容器500px的高度限制，图片虽然在缩小，容器依然保持不变。明白了原因，当然修改的方法也非常简单，我们可以将height属性替换成max-height属性：
.carousel .item{ max-height:500px; }这样，图片容器也能随着自适应。
至于三段简单介绍，大家简单看看就可以。
小了个结下回接着聊tab切换。
祝大家一切安好。
转载请记得说明作者和出处哦-.-
上一篇：《拥Bootstrap入怀??导航栏篇》 置顶文章：《纯CSS打造银色MacBook Air（完整版）》
作者：myvin
原文出处：
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
