Bootstrap學(xué)習(xí)筆記輪播（Carousel）插件

2019-11-19 17:05:22

字體：大中小

供稿：網(wǎng)友

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。如果您想要單獨(dú)引用該插件的功能，那么您需要引用 carousel.js,或者bootstrap.js 或壓縮版的 bootstrap.min.js。

<!DOCTYPE html> <html>  <head>  <title>Bootstrap 輪播（Carousel）插件</title>  <meta charset="utf-8">  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  <link rel="stylesheet" href="css/carousel.css" rel="external nofollow" >  <script src="js/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script>  </head>  <body>  <!-- Carousel  ================================================== -->  <div id="myCarousel" class="carousel slide" data-ride="carousel">  <!-- Indicators -->  <ol class="carousel-indicators">  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  <li data-target="#myCarousel" data-slide-to="1"></li>  <li data-target="#myCarousel" data-slide-to="2"></li>  </ol>  <div class="carousel-inner" role="listbox">  <div class="item active">  <img class="first-slide" src="http://localhost:8020/BootStrap/img/slide1.png" alt="First slide">  <div class="container">  <div class="carousel-caption">  <h1>Example headline.</h1>  <p>  Note: If you're viewing this page via a <code>   file://</code>  URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.  </p>  <p>  <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Sign up today</a>  </p>  </div>  </div>  </div>  <div class="item">  <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">  <div class="container">  <div class="carousel-caption">  <h1>Another example headline.</h1>  <p>  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.  </p>  <p>  <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Learn more</a>  </p>  </div>  </div>  </div>  <div class="item">  <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">  <div class="container">  <div class="carousel-caption">  <h1>One more for good measure.</h1>  <p>  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.  </p>  <p>  <a class="btn btn-lg btn-primary" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">Browse gallery</a>  </p>  </div>  </div>  </div>  </div>  <!--左前進(jìn)右后退-->  <a class="left carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev">  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#myCarousel" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  <span class="sr-only">Next</span>  </a>  </div>  <!-- /.carousel -->  </body> </html>

注意：

<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">

data格式的Url最直接的好處是，這些Url原本會(huì)引起一個(gè)新的網(wǎng)絡(luò)訪問，因?yàn)槟抢锸且粋€(gè)網(wǎng)頁(yè)的地址，現(xiàn)在不會(huì)有新的網(wǎng)絡(luò)訪問了，因?yàn)楝F(xiàn)在這里是網(wǎng)頁(yè)的內(nèi)容。這樣做，會(huì)減少服務(wù)器的負(fù)載，當(dāng)然同時(shí)也增加了當(dāng)前網(wǎng)頁(yè)的大小。所以對(duì)“小”數(shù)據(jù)特別有好處。

效果圖