如何用Bootstrap製作輪播圖

工具/材料

Sublime Text

操作方法

首先我們需要新建一個HTML5的文件，然後在文件中匯入Bootstrap的樣式檔案，這個檔案中包含了輪播圖所有的樣式定義，如下圖所示

接下來我們需要匯入指令碼檔案，注意先匯入Jquery檔案，然後匯入bootstrap的指令碼檔案，順序一定不能顛倒，如下圖所示

然後在body標籤裡定義輪播圖的容器，容器的大小需要和圖片的大小一樣，否則會出現輪播圖錯位，效果如下圖所示

接下來我們就正式的新增輪播圖了，這裡先新增三張圖，如下圖所示，注意讓哪種輪播圖顯示直接呼叫Bootstrap的active樣式即可

輪播圖片新增完畢以後，就可以新增輪播圖焦點了。在Bootstrap中運用li列表定義輪播圖焦點，注意焦點的數量和圖片的數量要一樣，如下圖所示

輪播圖中還有一個必不可少的元素就是左右箭頭，通過Bootstrap的carousel-control樣式新增輪播圖箭頭，如下圖所示

最後我們執行程式以後，在頁面中你就可以看到如下圖所示的輪播圖效果了。可以看到我們上面說的輪播圖焦點和左右箭頭都在頁面上顯示出來了，如下圖所示