Web programiranje → HTML, CSS i JavaScript → Bootstrap 5: meni, kartice, forme i prozori

Bootstrap 5: meni, kartice, forme i prozori

Navigacioni meni (navbar)

<nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="#">Logo Kreator</a>
    <!-- dugme koje se vidi samo na uskom ekranu -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#glavniMeni"
            aria-controls="glavniMeni" aria-expanded="false" aria-label="Otvori meni">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="glavniMeni">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Naslovna</a></li>
        <li class="nav-item"><a class="nav-link" href="#">O nama</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Primeri</a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Poslovni</a></li>
            <li><a class="dropdown-item" href="#">Edukacija</a></li>
            <li><a class="dropdown-item" href="#">Sport</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Rezultat:

Suzi prozor: meni se pretvara u dugme sa tri crte. To radi Bootstrap-ov JavaScript (bootstrap.bundle.min.js) – bez njega se meni ne otvara. Atributi aria-* pomažu čitačima ekrana.

Kartice

<div class="container py-3">
  <div class="row g-3">
    <div class="col-12 col-sm-6">
      <div class="card h-100 shadow-sm">
        <img src="https://picsum.photos/id/180/400/200" class="card-img-top" alt="Laptop na stolu">
        <div class="card-body">
          <h5 class="card-title">Kurs HTML</h5>
          <p class="card-text">Od prve stranice do formi.</p>
          <a href="#" class="btn btn-primary">Počni</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6">
      <div class="card h-100 border-success">
        <div class="card-header bg-success text-white">Preporuka</div>
        <div class="card-body">
          <h5 class="card-title">Bootstrap</h5>
          <p class="card-text">Kartica bez slike, sa zaglavljem i zelenim okvirom.</p>
        </div>
        <div class="card-footer text-body-secondary">6 lekcija</div>
      </div>
    </div>
  </div>
</div>

Rezultat:

Kartica (card) ima delove card-img-top, card-header, card-body, card-title, card-text i card-footer. Klasa h-100 izjednačava visinu kartica u istom redu.

Forme

<form class="container py-3" style="max-width: 420px">
  <div class="mb-3">
    <label for="ime" class="form-label">Naziv logoa</label>
    <input type="text" class="form-control" id="ime" placeholder="npr. Sekcija Pupin" required>
    <div class="form-text">Do 20 znakova.</div>
  </div>
  <div class="mb-3">
    <label for="vrsta" class="form-label">Vrsta</label>
    <select class="form-select" id="vrsta">
      <option>Poslovni</option><option>Edukacija</option><option>Sport</option>
    </select>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="slogan">
    <label class="form-check-label" for="slogan">Dodaj slogan</label>
  </div>
  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="email" class="form-control" placeholder="email">
    <button class="btn btn-danger" type="submit">Kreiraj</button>
  </div>
</form>

Rezultat:

Obaveštenja, oznake i prozor (modal)

<div class="container py-3">
  <div class="alert alert-success" role="alert">Logo je sačuvan! <span class="badge bg-success-subtle text-success-emphasis">3 logoa</span></div>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    Ovo obaveštenje može da se zatvori.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zatvori"></button>
  </div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pomoc">Otvori pomoć</button>

  <div class="modal fade" id="pomoc" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Kako se pravi logo?</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zatvori"></button>
        </div>
        <div class="modal-body">Upiši naziv, izaberi boju i oblik, pa preuzmi sliku.</div>
        <div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">U redu</button></div>
      </div>
    </div>
  </div>
</div>

Rezultat:

Komponente se „uključuju“ atributima data-bs-toggle, data-bs-target i data-bs-dismiss – JavaScript ne moraš pisati sam/a. Ostale komponente (karusel slika, harmonika, kartice sa tabovima, tooltip…) imaju gotove primere u dokumentaciji.

Prilagođavanje: tvoje boje i tvoj stil

Bootstrap 5.3 koristi CSS promenljive, pa se mnogo toga menja u tvom main.css bez diranja Bootstrap fajlova:

<style>
  /* moj CSS – posle Bootstrap-a */
  .btn-brend {
    --bs-btn-bg: #dd0022;              /* pozadina */
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #b0001b;        /* kada je miš iznad */
    --bs-btn-hover-color: #fff;
    --bs-btn-border-color: #dd0022;
    --bs-btn-hover-border-color: #b0001b;
    border-radius: 999px;
  }
  .naslov-brend { font-family: Georgia, serif; color: #dd0022; }
</style>
<div class="container py-3">
  <h2 class="naslov-brend">Logo Kreator</h2>
  <button class="btn btn-brend px-4">Moje dugme</button>
  <button class="btn btn-primary">Obično dugme</button>
</div>

Rezultat:

Ceo sajt dobija tamnu temu jednim atributom: <html lang="sr" data-bs-theme="dark">.

Bootstrap 4 → Bootstrap 5: šta se promenilo

Na internetu (i u starijim lekcijama) često se nalaze primeri za Bootstrap 4. Najvažnije razlike:

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

Proveri znanje