O Bootstrap possui uma biblioteca extensa de componentes disponíveis gratuitamente, contando com diferentes opções de ícones, painéis, caixas de texto e cores em links, para atender a inúmeros estilos.

Como não é necessário criar layouts do zero, o desenvolvimento de projetos web é realizado de maneira mais rápida, o que aumenta a produtividade.

Além disso, o Bootstrap é facilmente adaptável a diferentes tamanhos de tela, seja ela um celular, um tablet ou um computador, oferecendo ao usuário uma melhor experiência ao navegar no site.

Objetivos da aula

• Descrever o container de Cards
• Discutir a implementação com Modal
• Explicar o componente Carousel
• Aplicar Forms
• Definir Layouts com base em outros

Carrossel

O Carousel é um importante componente do Bootstrap que funciona como uma apresentação de slides, na qual os elementos são exibidos um de cada vez, como em um carrossel. O exemplo a seguir mostra como criar um carrossel básico com indicadores e controles:

<div id=“demo” class=“carousel slide” data-bs-ride=“carousel”>
	<div class=“carousel-indicators”>
		<button type=“button” data-bs-target=“#demo” data-bs-slide-to=“0” class=“active”></button>
		<button type=“button” data-bs-target=“#demo” data-bs-slide-to=“1”></button>
		<button type=“button” data-bs-target=“#demo” data-bs-slide-to=“2”></button>
	</div>
	<div class=“carousel-inner”>
		<div class=“carousel-item active”>
			<img src=“la.jpg” alt=“Los Angeles” class=“d-block w-100”>
		</div>
		<div class=“carousel-item”>
			<img src=“chicago.jpg” alt=“Chicago” class=“d-block w-100”>
		</div>
		<div class=“carousel-item”>
			<img src=“ny.jpg” alt=“New York” class=“d-block w-100”>
		</div>
	</div>
	<button class=“carousel-control-prev” type=“button” data-bs-target=“#demo” data-bs-slide=“prev”>
		<span class=“carousel-control-prev-icon”></span>
	</button>
	<button class=“carousel-control-next” type=“button” data-bs-target=“#demo” data-bs-slide=“next”>
		<span class=“carousel-control-next-icon”></span>
	</button>
</div>

Cada classe é responsável por formatar um elemento

• .carousel: Cria um carrossel
• .carousel-indicators: Adiciona indicadores para o carrossel. Estes são os pequenos pontos na parte inferior de cada slide (que indicam quantos slides existem no carrossel e qual slide o usuário está visualizando no momento)
• .carousel-inner: Adiciona os slides ao carrossel
• .carousel-item: Especifica o conteúdo de cada slide
• .carousel-control-prev: Adiciona um botão esquerdo (anterior) ao carrossel, que permite ao usuário voltar entre os slides
• .carousel-control-next: Adiciona um botão direito (próximo) ao carrossel, que permite ao usuário avançar entre os slides
• .carousel-control-prev-icon: Usado junto com .carousel-control-prev para criar um botão “anterior”