多语言展示
当前在线:1787今日阅读:103今日分享:49

bootstrap轮播插件教程

用bootstrap做自适应网站已成为一种主流,bootstrap轮播插件如何使用呢?bootstrap轮播插件教程如下:
工具/原料
1

bootstrap手册

2

web编辑器(这里推荐Sublime text3)

3

高版本的浏览器(谷歌等可以测试自适应的浏览器)

方法/步骤
1

打开bootstrap手册找到  Carousel   JavaScript 插件,先熟悉 Carousel插件效果及代码布局

2

首先写最外面的主题部分

先定义一个ID为myCarousel   class名称为carousel slide  这是固定的

3

其次写 Indicators 就是轮播图下面的 指示信息 通常有 圆形、方形、圆圈等

这里 OL 也可以用 UL  这 data-target='#myCarousel'  ID和外面的一样。

4

第三写轮播主体部分

这里的图片和上一步提示是一致的  上一步写了 0~2的索引,是三个提示信息,那么这里就写三张图片的内容。

5

第四写左右 Controls  这里的图标可以从bootstrap图片库是寻找 注意 data-slide 的用法。

6

第五,写JS代码,carousel 方法因为JS加载慢,所以建议放到最下面之前。

7

浏览器测试效果。最好是边做边测试,有不合适的地方即可修改。把浏览器放小一些,检测网页是否自适应屏幕大小不同的设备。

注意事项
1

代码边写边测试效果

2

ID class名一定要写正确,必要的时候要复制,手打的话可能会出错,仔细、耐心

推荐信息