Bootstrap4 Tutoriales básicos

Bootstrap4 Cuadro de diálogo Bootstrap4 Formulario personalizado

Bootstrap4 Carrusel

Un carrusel (también conocido como presentación de diapositivas o deslizador de imágenes) es una de las mejores maneras de mostrar una gran cantidad de contenido en un espacio pequeño en una página web. Es una representación dinámica del contenido, donde, navegando por varios elementos en bucle, se puede permitir que los usuarios vean o accedan a texto e imágenes.

Un carrusel es una presentación de diapositivas en bucle (dirección:https://es.oldtoolbag.com/run/html/bootstrap-carousel-example.html)：

Cómo crear un carrusel

El siguiente ejemplo crea un efecto de carrusel de imágenes simple :

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title> Ejemplo de 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>
　　/*　Hacer la imagen completamente responsiva　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</<style>
</<head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　indicadores　-->
　　<ul　class="carousel-indicadores">
　　　　<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>
　
　　<!--　imágenes de carrusel　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　botones de cambio de izquierda y derecha　-->
　　<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>

Ver la prueba ‹/›

se añade una descripción a las imágenes del carrusel

en cada <div class="carousel-item"> Añade <div> para establecer el texto de descripción de las imágenes del carrusel:

ejemplo

<!DOCTYPE　html>
<html>
<head>
　　<title> Ejemplo de 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>
　　/*　Hacer la imagen completamente responsiva　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</<style>
</<head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　indicadores　-->
　　<ul　class="carousel-indicadores">
　　　　<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>
　
　　<!--　imágenes de carrusel　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título de descripción de la primera imagen</h2>
　　　　　　　　<p>Texto de descripción!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título de descripción de la segunda imagen</h2>
　　　　　　　　<p>Texto de descripción!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://es.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título de descripción de la tercera imagen</h2>
　　　　　　　　<p>Texto de descripción!/p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　botones de cambio de izquierda y derecha　-->
　　<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>

Ver la prueba ‹/›

Descripción de las clases utilizadas en los ejemplos anteriores

Clase	Descripción
.carousel	Crear un carrusel
.carousel-indicators	Añadir un indicador de carrusel, que son los puntos individuales debajo del carrusel, que pueden mostrar cuál es la imagen actual durante el proceso de carrusel.
.carousel-inner	Añadir la imagen que se debe cambiar
.carousel-item	Especificar el contenido de cada imagen
.carousel-control-prev	Añadir un botón izquierdo, al hacer clic se regresarán a la imagen anterior.
.carousel-control-next	Añadir un botón derecho, al hacer clic se cambiará a la siguiente imagen.
.carousel-control-prev-icon	junto con .carousel-control-prev utilizado junto con, configure el botón izquierdo
.carousel-control-next-icon	junto con .carousel-control-next utilizado junto con, configure el botón derecho
.slide	Transiciones y efectos de animación al cambiar de imagen, si no necesita tales efectos, puede eliminar esta clase.

Bootstrap4 Cuadro de diálogo Bootstrap4 Formulario personalizado