Quest: Bootstrap – start

przez
PZAW

Przetestuj i przeanalizuj te dwa kody:

Akordeon:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Akordeon Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-5">

  <h2 class="mb-4">Akordeon w Bootstrap</h2>

  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
          Sekcja 1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          To jest zawartość sekcji pierwszej.
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
          Sekcja 2
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          To jest zawartość sekcji drugiej.
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
          Sekcja 3
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          To jest zawartość sekcji trzeciej.
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Zakładki:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zakładki w Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-5">

  <div class="container">
    <h2 class="mb-4">Przykład zakładek (Bootstrap Tabs)</h2>

    <!-- Pasek z zakładkami -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
          type="button" role="tab" aria-controls="home" aria-selected="true">
          Strona główna
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
          type="button" role="tab" aria-controls="profile" aria-selected="false">
          Profil
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
          type="button" role="tab" aria-controls="contact" aria-selected="false">
          Kontakt
        </button>
      </li>
    </ul>

    <!-- Zawartość zakładek -->
    <div class="tab-content border border-top-0 p-4 bg-light rounded-bottom" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <h4>Witamy!</h4>
        <p>To jest zawartość zakładki <b>Strona główna</b>. Tutaj możesz umieścić ogólne informacje.</p>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <h4>Twój profil</h4>
        <p>To jest zawartość zakładki <b>Profil</b>. Tutaj możesz wstawić dane użytkownika, ustawienia itp.</p>
      </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <h4>Kontakt</h4>
        <p>To jest zawartość zakładki <b>Kontakt</b>. Umieść tu formularz albo dane kontaktowe.</p>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Przegląd możliwości Bootstrapa – lista ważniejszych klas

Kolory (text, background, border)

  • Tekst (text-*)
    • text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-muted, text-white
  • Tło (bg-*)
    • bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white, bg-transparent
  • Obramowanie (border-*)
    • border, border-0, border-top, border-bottom, border-start, border-end
    • Kolory: border-primary, border-secondary, itd.

Odstępy (marginesy i padding)

  • Margines (m-*) i padding (p-*)
    Składnia: m{t|b|s|e|x|y}-{0-5} lub p...
    • m-0 = brak marginesu
    • m-3 = margines 1rem (skala 0–5)
    • mt-2 = margines górny
    • mb-4 = margines dolny
    • ms-3 = margines startowy (lewo w LTR)
    • me-3 = margines końcowy (prawo w LTR)
    • mx-2 = margines poziomy (lewo + prawo)
    • my-5 = margines pionowy (góra + dół)
      Analogicznie p-2, px-4, pt-1 itp.

Rozmiary

  • Szerokość: w-25, w-50, w-75, w-100, w-auto
  • Wysokość: h-25, h-50, h-75, h-100, h-auto
  • Pełne wymiary: mw-100 (max-width), mh-100 (max-height)

Układ (flex, grid)

  • Flexbox (d-flex)
    • d-flex, d-inline-flex
    • Kierunek: flex-row, flex-row-reverse, flex-column, flex-column-reverse
    • Wyrównanie w osi głównej: justify-content-start, justify-content-center, justify-content-end, justify-content-between, justify-content-around, justify-content-evenly
    • Wyrównanie w osi poprzecznej: align-items-start, align-items-center, align-items-end, align-items-stretch
    • Wyrównanie całych wierszy: align-content-start, align-content-center, align-content-end, align-content-between, align-content-around, align-content-stretch
  • Grid system
    • .container, .container-fluid
    • .row
    • .col, .col-6, .col-md-4, .col-lg-3 (responsywne kolumny)

Tekst

  • Wyrównanie: text-start, text-center, text-end
  • Transformacje: text-uppercase, text-lowercase, text-capitalize
  • Waga czcionki: fw-bold, fw-semibold, fw-normal, fw-light
  • Kursywa: fst-italic, fst-normal
  • Rozmiar: fs-1 do fs-6 (od największej do najmniejszej)

Przycisk (button)

  • Podstawowe style: btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link
  • Rozmiary: btn-sm, btn-lg
  • Blokowy: d-grid gap-2 + btn → pełna szerokość

Komponenty gotowe

  • Navbar: navbar, navbar-expand-lg, navbar-dark bg-dark, navbar-light bg-light
  • Cards: card, card-body, card-header, card-footer, card-title, card-text
  • Forms: form-control, form-check, form-check-input, form-check-label
  • Alerty: alert alert-primary (albo alert-success, alert-danger, itd.)
  • Badge: badge bg-primary
  • List group: list-group, list-group-item

Tagi: Brak tagów

Twój komentarz

Zapisz moje dane, adres e-mail i witrynę w przeglądarce aby wypełnić dane podczas pisania kolejnych komentarzy.