首頁 > web前端 > Bootstrap教程 > bootstrap輪播圖不用網可以嗎

bootstrap輪播圖不用網可以嗎

angryTom
發布: 2019-07-29 10:18:35
原創
2412 人瀏覽過

bootstrap輪播圖不用網可以嗎

如果你想了解更多關於bootstrap的知識,可以點選:Bootstrap教學

有人問bootstrap輪播圖不用網可以嗎?如果你是本地開發,這個是當然可以的,因為輪播圖使用的是js和css來實現的。我們只需要把bootstrap的開發包下下來,再在我們需要的檔案中去引用它的js和css檔案就行了。下面位大家介紹一下,bootstrap的錄影圖怎麼製作。

輪播是一個循環的投影片:

如何建立輪播

以下實例建立了一個簡單的圖片輪播效果:

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56afa458d274.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/040/5d3e56a3e68b7503.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 </div>
登入後複製

輪播圖片上新增描述

在每個 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板