bootstrap轮播组件 bootstrap轮播组件|Bootstrap教程

本文概述

Boostrap轮播示例
Bootstrap轮播示例：向幻灯片添加字幕

Bootstrap轮播是一种灵活的响应方式，用于向网页添加滑块。它反应灵敏且足够灵活，可以容纳图像，iframe，视频或你要添加的任何其他类型的内容。
【bootstrap轮播组件】轮播插件：
轮播插件是一个用于在元素之间循环的组件，例如轮播。如果要单独添加插件功能，则必须使用carousel.js文件或一次全部使用（使用“ bootstrap.js”或“ bootstrap.min.js”）。
Boostrap轮播示例让我们以一个轮播示例为例，看看如何创建一个基本的轮播。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Carousel< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 80%; margin: auto; } < /style>< body>< div class="container"> < h1>Carousel Example< /h1>< div id="myCarousel" class="carousel slide" data-ride="carousel"> < !-- Indicators --> < ol class="carousel-indicators"> < li data-target="#myCarousel" data-slide-to="0" class="active">< /li> < li data-target="#myCarousel" data-slide-to="1">< /li> < li data-target="#myCarousel" data-slide-to="2">< /li> < /ol>< !-- Wrapper for slides --> < div class="carousel-inner" role="listbox"> < div class="item active"> < img src="http://www.srcmini.com/images/jokes1.jpg" alt="jokes 1" > < /div>< div class="item"> < img src="http://www.srcmini.com/images/jokes2.jpg" alt="jokes 2" > < /div>< div class="item"> < img src="http://www.srcmini.com/images/jokes3.jpg" alt="jokes 3" > < /div> < /div>< !-- Left and right controls --> < a class="left carousel-control" href="http://www.srcmini.com/#myCarousel" role="button" data-slide="prev"> < span class="glyphicon glyphicon-chevron-left" aria-hidden="true">< /span> < span class="sr-only">Previous< /span> < /a> < a class="right carousel-control" href="http://www.srcmini.com/#myCarousel" role="button" data-slide="next"> < span class="glyphicon glyphicon-chevron-right" aria-hidden="true">< /span> < span class="sr-only">Next< /span> < /a> < /div>< !-- corousel end -->< /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155S55153-4.jpg">< /script> < /body> < /html>

Bootstrap轮播示例：向幻灯片添加字幕如果要向幻灯片添加字幕，则必须在每个< div class =“ item”> 中添加< div class =“ carousel-caption”> 。

< !DOCTYPE html> < html lang="en"> < head> < title>Job< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> < /head> < style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 80%; margin: auto; } < /style> < body>< div class="container"> < h1>Carousel Example< /h1>< div id="myCarousel" class="carousel slide" data-ride="carousel"> < !-- Indicators --> < ol class="carousel-indicators"> < li data-target="#myCarousel" data-slide-to="0" class="active">< /li> < li data-target="#myCarousel" data-slide-to="1">< /li> < li data-target="#myCarousel" data-slide-to="2">< /li> < /ol>< !-- Wrapper for slides --> < div class="carousel-inner" role="listbox"> < div class="item active"> < img src="http://www.srcmini.com/images/jokes1.jpg" alt="jokes 1" > < h3>Santa-Banta< /h3> < p>Read Santa-Banta jokes at srcmini.< /p> < /div>< div class="item"> < img src="http://www.srcmini.com/images/jokes2.jpg" alt="jokes 2" > < h3>Santa-Banta< /h3> < p>Read Santa-Banta jokes at srcmini.< /p> < /div>< div class="item"> < img src="http://www.srcmini.com/images/jokes3.jpg" alt="jokes 3" > < h3>Santa-Banta< /h3> < p>Read Santa-Banta jokes at srcmini.< /p> < /div> < /div>< !-- Left and right controls --> < a class="left carousel-control" href="http://www.srcmini.com/#myCarousel" role="button" data-slide="prev"> < span class="glyphicon glyphicon-chevron-left" aria-hidden="true">< /span> < span class="sr-only">Previous< /span> < /a> < a class="right carousel-control" href="http://www.srcmini.com/#myCarousel" role="button" data-slide="next"> < span class="glyphicon glyphicon-chevron-right" aria-hidden="true">< /span> < span class="sr-only">Next< /span> < /a> < /div>< !-- corousel end -->< /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155S55153-4.jpg">< /script> < /body> < /html>