Bootstrap轮播插件使用代码

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

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

rush:xhtml;">

<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">

效果图:

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

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

插件插件轮播

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...