生活随笔
收集整理的這篇文章主要介紹了
如何使用bootstrap实现轮播图？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
大家好，我是雄雄，今天給大家分享的是如何使用bootstrap實現輪播圖，美觀大方且兼容性還好！
輪播圖就不做過多的介紹了，大家都知道，只是輪播的實現有多種方式，例如使用純js寫，費時費力，且還不適用于各種終端設備，但是bootstrap就不一樣了，只需寫一套代碼，無論是手機端還是ipad端，再或者是PC端，都可以正常使用。
那么接下來我們就來看看bootstrap是如何實現輪播圖的。
步驟：
準備輪播需要的圖片，大于等于兩張。
準備bootstrap的css和js以及jquery1.10+的js文件文件，這個網上一搜一大堆，也可以去官網下載。
將下載的css文件放入項目的css目錄內，js文件放如js目錄內，以及圖片放在img(專放圖片)的文件夾內。
在html中寫代碼，代碼如下：
<!DOCTYPE html>
<html><head><meta?charset="UTF-8"><title></title><meta?name="viewport"?content="width=device-width,user-scalable=no,initial-scale=1.0"?/><link?rel="stylesheet"?type="text/css"?href="css/bootstrap.css"/><script?src="js/jquery-1.12.4.js"?type="text/javascript"?charset="utf-8"></script><script?src="js/bootstrap.js"?type="text/javascript"?charset="utf-8"></script></head><body><div?id="myCarousel"?class="carousel"?data-ride="carousel"><!--圖片的容器--><div?class="carousel-inner"><div?class="item active"><a?href="index.html"><img?src="image/ylimg1.jpg"?/></a><div?class="carousel-caption"><h3>這是第一張圖片</h3></div></div><div?class="item"><img?src="image/ylimg2.jpg"?/><div?class="carousel-caption"><h3>這是第二張圖片</h3></div></div></div><!--圓圈指示符--><ol?class="carousel-indicators"><li?data-target="#myCarousel"?data-slide-to="0"?class="active"></li><li?data-target="#myCarousel"?data-slide-to="1"></li></ol><!--左右的按鈕--><a?href="#myCarousel"?class="left carousel-control"?data-slide="prev"><span?class="glyphicon glyphicon-chevron-left"></span></a><a?href="#myCarousel"?class="right carousel-control"?data-slide="next"><span?class="glyphicon glyphicon-chevron-right"></span></a></div></body>
</html>
運行結果如下所示：
總結
以上是生活随笔為你收集整理的如何使用bootstrap实现轮播图？的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
