Bootstrap4 教程基础

Bootstrap4 diaporama

Un diaporama (également appelé diaporama ou glisser-déposer d'images) est l'une des meilleures méthodes pour afficher une grande quantité de contenu dans un petit espace sur une page web. C'est une représentation dynamique du contenu, où, en naviguant dans plusieurs éléments en boucle, l'utilisateur peut voir ou accéder au texte et aux images.

Un diaporama est une présentation circulaire de diapositives (adresse :https://fr.oldtoolbag.com/run/html/bootstrap-carousel-example.html) :

Comment créer un diaporama

Voici un exemple de création d'un effet de diaporama simple :

exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/<script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/<script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/<script>
　　<style>
　　/*　Rendre l'image pleinement responsive　*/
　　.carousel-inner img {
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</<style>
</<head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!--　indicateurs　-->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1></li>
　　　　<li data-target="#demo" data-slide-to="2></li>
　　</ul>
　
　　<!--　images de diaporama　-->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　boutons de bascule gauche et droit　-->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev"
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

测试看看 ‹/›

ajouter une description sur les images de la diaporama

dans chaque <div class="carousel"-item"> Ajoutez <div> pour définir le texte de description des images de diaporama :

exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">/<script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/<script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/<script>
　　<style>
　　/*　Rendre l'image pleinement responsive　*/
　　.carousel-inner img {
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</<style>
</<head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!--　indicateurs　-->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1></li>
　　　　<li data-target="#demo" data-slide-to="2></li>
　　</ul>
　
　　<!--　images de diaporama　-->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titre de description de la première image</h2>
　　　　　　　　<p>Texte de description !</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titre de description de la deuxième image</h2>
　　　　　　　　<p>Texte de description !</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://fr.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titre de description de la troisième image</h2>
　　　　　　　　<p>Texte de description !</p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　boutons de bascule gauche et droit　-->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev"
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

测试看看 ‹/›

以上示例中使用的类说明

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮
.slide	过渡和动画效果切换图片，如果你不需要这样的效果，可以删除这个类。

Bootstrap4 模态框 Bootstrap4 表单自定义