Modais, Carrossel, Tabs e Acordeões

• Modais: janelas flutuantes sobre a tela, ideais para formulários, avisos e interações rápidas.

• Carrossel: slides rotativos, muito utilizados para banners, destaques ou galerias.

• Tabs: abas que organizam conteúdos diferentes dentro de um mesmo espaço.

• Acordeões: blocos colapsáveis, ideais para FAQs, listas e conteúdos que podem ser expandidos e recolhidos.

---

Modais

Estrutura de um Modal

Copy<!-- Botão para abrir o modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#meuModal">
  Abrir Modal
</button>

<!-- Estrutura do Modal -->
<div class="modal fade" id="meuModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título do Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Conteúdo do modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

---

Tamanhos do Modal

• Modal grande:

CopyhtmlCopiarEditar<div class="modal-dialog modal-lg">...</div>

• Modal pequeno:

Copy<div class="modal-dialog modal-sm">...</div>

• Modal extra grande:

Copy<div class="modal-dialog modal-xl">...</div>

---

Carrossel

Estrutura Básica

Copy<div id="meuCarrossel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="imagem1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="imagem2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="imagem3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#meuCarrossel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#meuCarrossel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

---

Indicadores no Carrossel

Copy<div id="meuCarrossel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#meuCarrossel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#meuCarrossel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#meuCarrossel" data-bs-slide-to="2"></button>
  </div>
  <!-- Slides aqui -->
</div>

---

Tabs (Abas)

Estrutura de Tabs

Copy<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#aba1">Aba 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#aba2">Aba 2</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="aba1">
    Conteúdo da Aba 1.
  </div>
  <div class="tab-pane fade" id="aba2">
    Conteúdo da Aba 2.
  </div>
</div>

As tabs permitem alternar rapidamente entre diferentes conteúdos, mantendo o layout compacto.

---

Acordeões (Accordion)

Estrutura Completa

Copy<div class="accordion" id="meuAcordeao">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Seção 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#meuAcordeao">
      <div class="accordion-body">
        Conteúdo da seção 1.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Seção 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#meuAcordeao">
      <div class="accordion-body">
        Conteúdo da seção 2.
      </div>
    </div>
  </div>
</div>

---

Acordeão com Seções Independentes

Para que múltiplas seções possam ser abertas ao mesmo tempo, remova data-bs-parent="#meuAcordeao" de cada accordion-collapse.

---

Esses componentes trazem dinamismo e interatividade para qualquer interface, ajudando a organizar conteúdos, destacar informações e melhorar a experiência do usuário.