Web programiranje → HTML, CSS i JavaScript → Bootstrap 5: mreža i pomoćne klase

Bootstrap 5: mreža i pomoćne klase

Šta je Bootstrap i kada ga koristiti

Bootstrap je napravljen od CSS-a – klasa d-flex nije ništa drugo nego display: flex. Zato je kurs prvo objasnio čist CSS (flexbox i grid, media upite), a Bootstrap je sada alat koji ubrzava rad. Aktuelna verzija je Bootstrap 5; za razliku od verzije 4, ne zahteva biblioteku jQuery.

Povezivanje: šablon stranice

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moj sajt</title>
  <!-- 1. Bootstrap CSS (sa CDN-a) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <!-- 2. moj CSS – POSLE Bootstrap-a, da bi mogao da ga promeni -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">
    <h1>Zdravo, Bootstrap!</h1>
  </div>
  <!-- 3. Bootstrap JavaScript (potreban za meni na telefonu, padajuće liste, prozore) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CDN (Content Delivery Network) je mreža servera sa koje pregledač preuzima biblioteku – ništa ne moraš da preuzimaš ručno. Ako sajt treba da radi bez interneta, fajlove možeš preuzeti sa getbootstrap.com i povezati ih lokalno. Tamo je i kompletna dokumentacija sa primerima za svaku klasu.

Mreža: container, row, col

Raspored u Bootstrap-u se pravi od tri nivoa: container (centriran okvir) → row (red) → col (kolone). Red ima 12 delova, a kolona kaže koliko ih zauzima:

<div class="container py-2">
  <div class="row g-2 text-center">
    <div class="col-12 col-md-6 col-lg-4"><div class="p-3 bg-primary text-white rounded">col-12 col-md-6 col-lg-4</div></div>
    <div class="col-12 col-md-6 col-lg-4"><div class="p-3 bg-success text-white rounded">col-12 col-md-6 col-lg-4</div></div>
    <div class="col-12 col-md-12 col-lg-4"><div class="p-3 bg-danger text-white rounded">col-12 col-md-12 col-lg-4</div></div>
  </div>
  <div class="row g-2 mt-1 text-center">
    <div class="col-8"><div class="p-2 bg-light border rounded">col-8</div></div>
    <div class="col-4"><div class="p-2 bg-light border rounded">col-4</div></div>
  </div>
</div>

Rezultat:

Čita se ovako: col-12 col-md-6 col-lg-4 = na telefonu cela širina (12/12), od tableta pola (6/12), od laptopa trećina (4/12). To je isti princip „prvo telefon“ iz lekcije o responzivnom dizajnu – samo bez pisanja media upita. Klasa g-2 na redu određuje razmak između kolona (gutter).

Pomoćne klase

<div class="container py-3">
  <p class="text-center fw-bold text-primary fs-4">text-center fw-bold text-primary fs-4</p>
  <div class="p-3 mb-3 bg-warning-subtle border border-warning rounded-3 shadow-sm">
    p-3 mb-3 bg-warning-subtle border rounded-3 shadow-sm
  </div>
  <div class="d-flex justify-content-between align-items-center p-2 bg-dark text-white rounded">
    <span>d-flex justify-content-between</span>
    <span class="badge bg-danger">NOVO</span>
  </div>
  <p class="mt-3 d-none d-md-block text-success">Ovaj red se vidi samo od 768px naviše (d-none d-md-block).</p>
  <p class="mt-3 d-md-none text-danger">Ovaj red se vidi samo na uskom ekranu (d-md-none).</p>
</div>

Rezultat:

Dugmad

<div class="p-3 d-flex flex-wrap gap-2">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn btn-outline-primary">Outline</button>
  <a class="btn btn-dark btn-lg" href="#">Link kao dugme</a>
  <button class="btn btn-secondary btn-sm" disabled>Isključeno</button>
</div>

Rezultat:

Klasa btn daje osnovni oblik, a druga klasa boju. Ista klasa radi i na <a> – link izgleda kao dugme.

Zadaci za vežbu

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

Proveri znanje