bootstrap的錄播圖如何制作？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

我們提供的服務有：成都網站制作、做網站、微信公眾號開發、網站優化、網站認證、龍鳳ssl等。為上千家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的龍鳳網站制作公司

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>

輪播圖片上添加描述

在每個 <div class="carousel-item"> 內添加 <div class="carousel-caption"> 來設置輪播圖片的描述文本：

<div class="carousel-item">
  <img src="https://img.php.cn/upload/article/000/000/040/5d3e569459bb7121.jpg">
  <div class="carousel-caption">
    <h4>第一張圖片描述標題</h4>
    <p>描述文字!</p>
  </div></div>

以上實例使用的類說明

類	描述
.carousel	創建一個輪播
.carousel-indicators	為輪播添加一個指示符，就是輪播圖底下的一個個小點，輪播的過程可以顯示目前是第幾張圖。
.carousel-inner	添加要切換的圖片
.carousel-item	指定每個圖片的內容
.carousel-control-prev	添加左側的按鈕，點擊會返回上一張。
.carousel-control-next	添加右側按鈕，點擊會切換到下一張。
.carousel-control-prev-icon	與 .carousel-control-prev 一起使用，設置左側的按鈕
.carousel-control-next-icon	與 .carousel-control-next 一起使用，設置右側的按鈕
.slide	切換圖片的過渡和動畫效果，如果你不需要這樣的效果，可以刪除這個類。

感謝各位的閱讀！看完上述內容，你們對bootstrap的錄播圖如何制作大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創新互聯行業資訊頻道。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁名稱：bootstrap的錄播圖如何制作-創新互聯
本文鏈接：http://m.newbst.com/article12/dissdc.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、網站建設、App設計、網站制作、域名注冊、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯