Bootstrap輪播插件簡單使用方法介紹

更新時間：2016年06月21日 14:51:07 作者：-夏昊-

這篇文章主要為大家詳細介紹了Bootstrap輪播插件簡單使用方法，介紹了使用bootstrap輪播插件的作用，感興趣的小伙伴們可以參考一下

本文細致的為大家分享了Bootstrap輪播插件簡單實例，供大家參考，具體內(nèi)容如下

使用Bootstrap的輪播插件可以向站點添加滑塊，內(nèi)容可以是圖像，內(nèi)嵌框架，視頻或其它任何內(nèi)容，使用輪播插件需要引入

效果圖：

bootstrap.min.js.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—輪播導航 -->
  <ol class="carousel-indicators">
 
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 
  <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
  </ol>
  <!—輪播項目 -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="~/images/Chrysanthemum.jpg" />
   <div class="carousel-caption"> 
   ffffffff
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Desert.jpg" />
 
   <div class="carousel-caption">
 
   xxxxxxxxxxxxxxxx
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Lighthouse.jpg" /> 
   <div class="carousel-caption"> 
   mmmmmmmmmmmm 
   </div>
  </div>
  </div>
 
  <!—輪播導航 -->
 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
  <span class="glyphicon glyphicon-chevron-left"></span>
 
  <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
  <span class="glyphicon glyphicon-chevron-right"></span>
   <span class="sr-only">Next</span>
 
  </a> 
 </div>

小編再為大家推薦一篇文章：全面解析Bootstrap圖片輪播效果

如果大家還想深入學習，可以點擊這里進行學習，再為大家附一個精彩的專題：Bootstrap學習教程

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript全局變量封裝模塊實現(xiàn)代碼
javascript全局變量封裝模塊的應用，本文將詳細介紹，需要了解更多的朋友可以參考下
2012-11-11
JS實現(xiàn)動態(tài)加載樣式和腳本
在前端開發(fā)的過程中,不可避免的需要根據(jù)前置條件動態(tài)加載樣式和腳本文件,本文小編就來簡單為大家介紹一下實現(xiàn)一下動態(tài)加載樣式和腳本文件的方法吧
2023-09-09
momentjs使用詳細說明
這篇文章主要介紹了momentjs詳細使用說明,使用 Moment.js 可以輕松地獲取上周、上月和前三個月的起始和結(jié)束時間，在示例中，我們傳入了 '2023-07-15'，并將返回的日期信息存儲在 dateInfo 變量中，然后將其打印到控制臺上，需要的朋友可以參考下
2023-07-07
24行JavaScript代碼實現(xiàn)Redux的方法實例
這篇文章主要給大家介紹了關(guān)于如何利用24行JavaScript代碼實現(xiàn)Redux的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-11-11
bootstrap Table的使用方法總結(jié)
這篇文章主要為大家詳細介紹了bootstrap Table的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
詳解Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用
許多應用程序中都會有日志模塊，用于記錄系統(tǒng)在運行過程中的一些關(guān)鍵信息，以便于對系統(tǒng)的運行狀況進行跟蹤。這篇文章給大家主要介紹了在Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用,需要的朋友可以參考借鑒，下面來一起看看吧。
2016-12-12
javascript實現(xiàn)多級聯(lián)動下拉菜單的方法
這篇文章主要介紹了javascript實現(xiàn)多級聯(lián)動下拉菜單的方法,通過javascript自定義函數(shù)實現(xiàn)對多級聯(lián)動下拉菜單的操作,是非常實用的技巧,需要的朋友可以參考下
2015-02-02
es6中l(wèi)et和const的使用方法詳解
這篇文章主要介紹了es6中l(wèi)et和const的使用方法,結(jié)合實例形式詳細分析了es6中l(wèi)et和const的基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下
2020-02-02
NodeJS的Promise的用法解析
下面小編就為大家?guī)硪黄狽odeJS的Promise的用法解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-05-05
JavaScript中發(fā)出HTTP請求最常用的方法
JavaScript具有很好的模塊和方法來發(fā)送可用于從服務器端資源發(fā)送或接收數(shù)據(jù)的HTTP請求。這篇文章主要介紹了JavaScript中發(fā)出HTTP請求最常用的方法,需要的朋友可以參考下
2018-07-07