如何用Bootstrap制作輪播圖
輪播圖是每個網站中必不可少的元素，制作一個輪播圖通常需要頁面和腳本方法搭配。如今，隨著bootstrap的興起，制作輪播圖變得非常的簡單。因為Bootstrap中已經包含了輪播圖的成熟方案，我們只需要學會應用即可。下面小編就教大家如何用Bootstrap制作輪播圖。
東西/材料
Sublime Text
操作方式
-
01
起首我們需要新建一個HTML5的文檔，然后在文檔中導入Bootstrap的樣式文件，這個文件中包含了輪播圖所有的樣式界說，如下圖所示
-
02
接下來我們需要導入劇本文件，注重先導入Jquery文件，然后導入bootstrap的劇本文件，挨次必然不克不及倒置，如下圖所示
-
03
然后在body標簽里界說輪播圖的容器，容器的巨細需要和圖片的巨細一樣，不然會呈現輪播圖錯位，結果如下圖所示
-
04
接下來我們就正式的添加輪播圖了，這里先添加三張圖，如下圖所示，注重讓哪種輪播圖顯示直接挪用Bootstrap的active樣式即可
-
05
輪播圖片添加完畢今后，就可以添加輪播圖核心了。在Bootstrap中運用li列表界說輪播圖核心，注重核心的數目和圖片的數目要一樣，如下圖所示
-
06
輪播圖中還有一個必不成少的元素就是擺布箭頭，經由過程Bootstrap的carousel-control樣式添加輪播圖箭頭，如下圖所示
-
07
最后我們運行法式今后，在頁面中你就可以看到如下圖所示的輪播圖結果了。可以看到我們上面說的輪播圖核心和擺布箭頭都在頁面上顯示出來了，如下圖所示
- End
- 發表于 2018-03-01 00:00
- 閱讀 ( 751 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章