Maison > Article > interface Web > Comment utiliser le modèle de carrousel bootstrap (exemple de code)
Comment utiliser le modèle de carrousel bootstrap (exemple de code)
- PHPzoriginal
- 2018-01-18 13:24:512130parcourir
Cet article présente principalement comment utiliser le modèle de carrousel bootstrap, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.
L'exemple de cet article partage le code spécifique pour l'affichage du modèle de carrousel bootstrap pour votre référence. Le contenu spécifique est le suivant
[Recommandations vidéo associées : Tutoriel Bootstrap 】
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
<style type="text/css">
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
</style>
</head>
<body>
<!-- 轮播 -->
<p id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<p class="carousel-inner">
<p class="item active">
<img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="2F1-130516091446402.jpg" alt="2 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="-110910214P238.jpg" alt="3 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
</p>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>Recommandations associées :
js implémente un carrousel fluide d'images au début et à la fin
Comment implémenter l'effet carrousel d'images Bootstrap
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!