为了可以看到这个 Bootstrap 的旋转木马组件的最终的效果，我们可以把这里用到的图片点位符用真正的图片替换一下 ...

先打开这个项目所在的目录 ... 在里面，新建一个文件夹 .. 命名为 images ... 然后再找两张图片放进去 ..

回到编辑器 ...

修改一下幻灯片项目的 img 标签里面的图像的地址 ... 在 images 目录下面，有一个 01.jpg ... 在这个幻灯片项目里面，我们也可以添加点描述的文字 ... 可以把它放在一组带有 carousel-caption 类的 div 标签里面 ...

添加一个标题 ... 再添加点文字

然后用类似的方法，去处理一下第二个幻灯片项目 ...

保存 ... 回到浏览器去预览一下 ...

你会看到真正的图像的幻灯片 ... 上面还多了一些描述的文字 ... 下面，我们再继续去改进一下 ... 回到编辑器 ... 我们可以把包装幻灯片用的 .container 这个类的元素去掉 ...

然后再让幻灯片里面的图片占满整个页面显示 .. 可以把幻灯片里面的 img 标签的宽度设置成 100% .. 打开自定义的样式表 ...

img {width: 100%}

再修改一下 body 标签上的，这个内边距的值 ... 现成是 70 px ，导航栏的高度是 50 像素， 这里设置成 70 的话，会在导航栏与它下面的内容之间留出一个 20 像素空间 ... 我们可以去掉这个多余的空间 ... 所以，这里把这个边距的值设置成 50 px ...

保存 ... 再回到浏览器预览一下 ...

刷新 ...

现在，幻灯片项目里的图像会占满整个页面显示 ... 而且，它还可以随着浏览窗口的宽度的变化而变化 ...

点击这个箭头 ... 或者按下键盘上的左右箭头 ... 都可以切换这个幻灯片的显示 ...