bootstrap怎樣制作輪播圖呢
bootstrap制作輪播圖非常方便，今天咪咪我就來給大家講解一下bootstrap怎樣制作輪播圖。
工具/材料
電腦
Hbuilder
bootstrap
jQuery
操作方法
-
01
打開Hbuilder，新建一個輪播圖的項目，如圖，輪播圖用到有圖片，哈哈，這里我就只用一張圖片進行輪播，如果喜歡多圖輪播就準備好多張圖片，還有把bootstrap以及jQuery插件放進去。
-
02
然后搜狗搜索bootstrap，去bootstrap那里找到JavaScript插件，點擊它。
-
03
然后在右邊找到這個選項（carousel）,這個選項就是bootstrap中用來制作輪播圖的代碼。
-
04
如圖，點擊carousel之后，就會跳轉到輪播圖源代碼處，這里有一個輪播圖的例子，下面有一些輪播圖的代碼，我們直接點擊“copy”即可。
-
05
然后我們把復制到的代碼粘貼到之前的html文件里面，代碼放在body標簽里面哦。
-
06
然后找到carousel-inner，它下面有img標簽，這個img標簽就是放置我們的輪播圖片的。
-
07
如圖，我把圖片的路徑給設置好就可以了，這里我就設置成三個圖片進行輪播。
-
08
如圖，這里有三個div，表示三張輪播圖片，如果要多圖，可以多復制幾個，然后修改圖片即可。
-
09
當然了，還要引入bootstrap的css和JS文件哦，jq也不要忘了引入進來哦。
-
10
最后，打開搜狗瀏覽器看看輪播圖效果，點擊左右按鈕可以滑動輪播圖哦，哈哈，快去對照著指南練習吧。
- End
特別提示
jq要在bootstrapjs前面才有效哦，不然輪播圖不會滑動的。
- 發表于 2017-09-28 00:00
- 閱讀 ( 838 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章