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

字號:


    本文細致的為大家分享了Bootstrap輪播插件簡單實例,供大家參考,具體內(nèi)容如下
    使用Bootstrap的輪播插件可以向站點添加滑塊,內(nèi)容可以是圖像,內(nèi)嵌框架,視頻或其它任何內(nèi)容,使用輪播插件需要引入
    bootstrap.min.js. 
    <div id="carousel-example-generic" data-ride="carousel">
      <!—輪播導(dǎo)航 -->
      <ol>
      <li data-target="#carousel-example-generic" data-slide-to="0"></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 role="listbox">
      <div>
       <img src="~/images/Chrysanthemum.jpg" />
       <div> 
       ffffffff
       </div> 
      </div>
       <div>
       <img src="~/images/Desert.jpg" />
       <div>
       xxxxxxxxxxxxxxxx
       </div> 
      </div>
       <div>
       <img src="~/images/Lighthouse.jpg" /> 
       <div> 
       mmmmmmmmmmmm 
       </div>
      </div>
      </div>
      <!—輪播導(dǎo)航 -->
      <a href="#carousel-example-generic" role="button" data-slide="prev">
      <span></span>
      <span>Previous</span> 
      </a> 
      <a href="#carousel-example-generic" role="button" data-slide="next"> 
      <span></span>
       <span>Next</span>
      </a> 
     </div>
    以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助