Bootstrap4 Grund教程

Bootstrap4 Modaldialog Bootstrap4 benutzerdefinierte Formulare

Bootstrap4 Diashow

Eine Diashow (auch bekannt als Diashow oder Bildschlitten) ist eine der besten Methoden, um eine große Menge an Inhalt in einem kleinen Bereich der Webseite anzuzeigen. Es ist eine dynamische Darstellung des Inhalts, bei der durch das Navigieren durch mehrere Elemente der Benutzer Texte und Bilder sehen oder zugreifen kann.

Eine Diashow ist eine wiederholende Präsentation (Adresse:https://de.oldtoolbag.com/run/html/bootstrap-carousel-example.html)：

Wie man eine Diashow erstellt

Nachfolgender Beispielcode erstellt eine einfache Bild-Diashow:

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</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>
　　/*　Das Bild vollständig anpassungsfähig machen　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　Indikatoren　-->
　　<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>
　
　　<!--　Bilder-Slider　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　Schaltflächen für Wechsel links/rechts　-->
　　<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>

Testen Sie es heraus ‹/›

Beschreibungen auf die Diashowbilder hinzufügen

In jedem <div class="carousel"-item"> Fügen Sie <div> hinzu, um den Beschreibungstext für die Bildergalerie zu setzen: :

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</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>
　　/*　Das Bild vollständig anpassungsfähig machen　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　Indikatoren　-->
　　<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>
　
　　<!--　Bilder-Slider　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Beschreibungstitel des ersten Bildes</h2>
　　　　　　　　<p>Beschreibender Text!</p>/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Beschreibungstitel des zweiten Bildes</h2>
　　　　　　　　<p>Beschreibender Text!</p>/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://de.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Beschreibungstitel des dritten Bildes</h2>
　　　　　　　　<p>Beschreibender Text!</p>/p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　Schaltflächen für Wechsel links/rechts　-->
　　<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>

Testen Sie es heraus ‹/›

Klassenbeschreibung in den obigen Beispielen verwendet

Klasse	Beschreibung
.carousel	Erstellen Sie eine Slideshow
.carousel-indicators	Fügen Sie eine Indikator für den Slideshow hinzu, das sind die kleinen Punkte unter der Slideshow, während des Slideshow-Prozesses kann gezeigt werden, welche Abbildung aktuell ist.
.carousel-inner	Fügen Sie das Bild hinzu, das gewechselt werden soll
.carousel-item	Bestimmen Sie den Inhalt jedes Bildes
.carousel-control-prev	Fügen Sie den linken Button hinzu, wenn Sie darauf klicken, kehrt es zum vorherigen Bild zurück.
.carousel-control-next	Fügen Sie den rechten Button hinzu, wenn Sie darauf klicken, wechselt es zum nächsten Bild.
.carousel-control-prev-icon	mit .carousel-control-prev zusammen mit .carousel verwenden, um den linken Button zu setzen
.carousel-control-next-icon	mit .carousel-control-next zusammen mit .carousel verwenden, um den rechten Button zu setzen
.slide	Wechseln Sie die Übergangs- und Animations Effekte der Bildwechsels, wenn Sie solche Effekte nicht benötigen, können Sie diese Klasse löschen.

Bootstrap4 Modaldialog Bootstrap4 benutzerdefinierte Formulare