Maison >interface Web >js tutoriel >Quels modèles de carrousel peuvent être utilisés dans bootstrap ?
Quels modèles de carrousel peuvent être utilisés dans bootstrap ?
- PHPzoriginal
- 2018-04-14 16:16:391394parcourir
Cette fois, je vais vous montrer quels modèles de carrousel peuvent être utilisés en bootstrap, et quelles sont les précautions d'utilisation des modèles de carrousel bootstrap. Voici des cas pratiques, jetons un coup d'œil.
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
<!DOCTYPE html>
<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>
Je pense que vous maîtrisez la méthode après avoir lu le cas. dans cet article, et plus encore. Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
Lecture recommandée : Tutoriel 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!