Bootstrap4 Manual Básico

Bootstrap4 Janela Modais Bootstrap4 Formulário Personalizado

Bootstrap4 carrossel

O carrossel (também conhecido como slide ou slider de imagens) é um dos melhores métodos para exibir uma grande quantidade de conteúdo em um espaço pequeno no site. É uma representação dinâmica do conteúdo, onde, através da navegação em循环 de vários itens, os usuários podem ver ou acessar texto e imagens.

Um carrossel é um slideshow (endereço:https://pt.oldtoolbag.com/run/html/bootstrap-carousel-example.html)：

Como criar um carrossel

A seguir, um exemplo cria um efeito simples de rolagem de imagens:

exemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemplo 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>
　　/*　Faça a imagem 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-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>
　
　　<!--　imagens de rolagem　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　botões de troca de esquerda e direita　-->
　　<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>

Teste e veja ‹/›

adicionar descrições nas imagens de rolagem

em cada <div class="carousel-item"> Adicione <div> para definir o texto de descrição das imagens de rolagem:

exemplo

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemplo 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>
　　/*　Faça a imagem 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-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>
　
　　<!--　imagens de rolagem　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título da descrição da primeira imagem</h2>
　　　　　　　　<p>Texto de descrição!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título da descrição da segunda imagem</h2>
　　　　　　　　<p>Texto de descrição!/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://pt.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Título da descrição da terceira imagem</h2>
　　　　　　　　<p>Texto de descrição!/p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　botões de troca de esquerda e direita　-->
　　<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>

Teste e veja ‹/›

Descrição das classes usadas nos exemplos acima

Classe	Descrição
.carousel	Criar um carrossel
.carousel-indicators	Adicionar um indicador de carrossel, que são os pontos individuais na parte inferior do carrossel, que podem mostrar qual é a imagem atual durante o processo de carrossel.
.carousel-inner	Adicionar imagem a ser alternada
.carousel-item	Especificar o conteúdo de cada imagem
.carousel-control-prev	Adicionar botão à esquerda, ao clicar, retornará à imagem anterior.
.carousel-control-next	Adicionar botão à direita, ao clicar, alternará para a próxima imagem.
.carousel-control-prev-icon	com .carousel-control-prev usado juntos, configura o botão à esquerda
.carousel-control-next-icon	com .carousel-control-next usado juntos, configura o botão à direita
.slide	Transição e Efeitos de Animação de Imagem Alternada, Se você não precisar desses efeitos, você pode excluir essa classe.

Bootstrap4 Janela Modais Bootstrap4 Formulário Personalizado