Bootstrap輪播插件簡(jiǎn)單使用方法介紹

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

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

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

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

效果圖：

bootstrap.min.js.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—輪播導(dǎo)航 -->
  <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>
  <!—輪播項(xiàng)目 -->
  <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>
 
  <!—輪播導(dǎo)航 -->
 
  <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圖片輪播效果

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入探究V8引擎的底層原理
V8引擎是一款由Google開(kāi)發(fā)的JavaScript引擎，V8引擎采用了眾多的優(yōu)化措施，使得其在性能上得到了極大的提升，能夠高效地執(zhí)行JavaScript代碼，本文將和大家一起探討一下V8引擎底層原理，探究其優(yōu)異性能之謎
2023-06-06
JavaScript中setInterval()用法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中setInterval()用法的相關(guān)資料,setInterval()方法可按照指定的周期(以毫秒計(jì))來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
JavaScript實(shí)現(xiàn)Excel表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Excel表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)圖片粘貼上傳到服務(wù)器并展示的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問(wèn)題
這篇文章主要介紹了JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2015-12-12
layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
淺析JS刷新框架中的其他頁(yè)面 && JS刷新窗口方法匯總
本篇文章是對(duì)JS刷新框架中的其他頁(yè)面以及JS刷新窗口的方法進(jìn)行了匯總介紹，需要的朋友可以參考下
2013-07-07
js中編碼函數(shù)：escape,encodeURI與encodeURIComponent詳解
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個(gè)常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，這篇文章詳細(xì)的給大家介紹了js中編碼函數(shù)：escape,encodeURI與encodeURIComponent的相關(guān)資料，需要的朋友可以參考下。
2017-03-03
js中eval方法詳解之eval方法的初級(jí)應(yīng)用
js中eval()函數(shù)可計(jì)算某個(gè)字符串,下面這篇文章主要給大家介紹了關(guān)于js中eval方法詳解之eval方法的初級(jí)應(yīng)用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
JavaScript隨機(jī)生成顏色的方法
這篇文章主要介紹了JavaScript隨機(jī)生成顏色的方法的相關(guān)資料,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10