Bootstrap轮播插件使用代码

前端之家收集整理的这篇文章主要介绍了Bootstrap轮播插件使用代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap不仅提供了整套的样式,还提供了一系列插件,帮助开发者构建更受欢迎的网站。

Bootstrap的轮播插件用起来很简单,代码如下。

<html lang="en">

<Meta charset="utf-8">

Bootstrap,from Twitter

<Meta name="viewport" content="width=device-width,initial-scale=1.0">

<Meta name="description" content="">

<Meta name="author" content="">

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active">

<li data-target="#myCarousel" data-slide-to="1">

<li data-target="#myCarousel" data-slide-to="2">

<div class="carousel-inner">

<div class="item active">

<img src="Demo_lunbo1.jpg" alt="">

<div class="carousel-caption">

八月十五回家拍摄

八月十五回家时正赶上下雨,雨后的天空挂上了彩虹

<div class="item">

<img src="Demo_lunbo2.jpg" alt="">

<div class="carousel-caption">

眼睛里的景色更迷人

照片中的彩虹总不如眼睛看到的美。

<div class="item">

<img src="Demo_lunbo3.jpg" alt="">

<div class="carousel-caption">

雨后的黄昏

美好的东西总是短暂的,一会天就黑了。

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹

<a class="carousel-control right" href="#myCarousel" data-slide="next">›

<script src="bootstrap/js/jquery.js">

<script src="bootstrap/js/bootstrap.js">

效果图:

如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

插件插件插件轮播

猜你在找的Bootstrap相关文章