Bootstrap alapok.

• a Bootstrap beillesztése egy oldalba
• a konténer szerepe és típusai
• a 12 oszlopos rács és a töréspontok
• a beépített színek és a tipográfia

A Bootstrap egy CSS- és egy JavaScript-fájlból áll. A legegyszerűbb, ha egy CDN-ről (tartalomkiszolgáló hálózatról) töltjük be: a CSS a <head>-be kerül, a JavaScript a <body> végére. A JavaScript csak az interaktív komponensekhez kell (lenyíló menü, összecsukható navigáció, modális ablak…). A viewport meta nélkül a telefon kicsinyített asztali nézetet mutatna, és a töréspontok nem működnének.

<!doctype html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Első Bootstrap-oldalam</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="stilus.css">   <!-- a saját stílus a Bootstrap UTÁN -->
</head>
<body>
  <div class="container">
    <h1>Helló, Bootstrap!</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

A konténer a tartalom „kerete”: vízszintesen középre teszi, belső margót ad neki, és korlátozza a szélességét. A .container minden törésponton más maximális szélességű (576 px alatt 100%), a .container-fluid mindig a teljes szélességet kitölti. Váltogasd a szélességet, és figyeld a két sáv közti különbséget.

A rács három szintből áll: konténer → sor (.row) → oszlopok (.col-*). Egy sor 12 egységnyi széles; a col-4 tehát a sor harmada, a col-6 a fele. Ha egy sorban az oszlopok összege meghaladja a 12-t, a maradék új sorba törik.

A középső tag a töréspont: a col-md-4 jelentése „768 px-től felfelé 4 egység, alatta 12” – kis képernyőn tehát egymás alá kerülnek az oszlopok. A példa mobilnézetben indul; váltsd át Tabletre!

• row sor
• col-md-4 768 px-től 4/12
• g-3 hézag az oszlopok között (vízszintesen és függőlegesen)

A Bootstrap nyolc szerepet nevez meg (primary, secondary, success, danger, warning, info, light, dark), és mindegyikhez van háttér- (bg-*) és szövegszín- (text-*) osztály. A text-bg-* osztály egyszerre adja a hátteret és hozzá a jól olvasható szövegszínt – így nem kell fejben tartani, melyik háttérhez kell fehér és melyikhez sötét betű.

A Bootstrap a címsoroknak és a bekezdéseknek egységes, jól olvasható alapstílust ad. Hasznos osztályok: lead (kiemelt bevezető bekezdés), text-body-secondary (halványabb szöveg; a régebbi neve text-muted), display-1…display-6 (nagyon nagy címek), valamint a <mark> és a <small> elem.

1. Készíts egy oldalt, amelyen telefonon egy, tableten kettő, laptopon négy oszlop van egymás mellett (col-12 col-md-6 col-lg-3). Ellenőrizd a böngésző fejlesztői eszközeinek eszköznézetével.
2. Rakj egymás alá egy container és egy container-fluid sávot, és mérd le a szélességüket három különböző ablakméretnél.
3. Készíts színes „címkekártyákat” a nyolc színszereppel, text-bg-* osztályokkal.
4. Építs tipográfiai hierarchiát egy cikkhez: display cím, lead bevezető, alcímek, bekezdések.

Bővítési ötletek

• Ágyazz egy sort egy oszlopba (beágyazott rács), és oszd tovább 12 részre.
• Próbáld ki a row-cols-2 row-cols-md-4 osztályt: ilyenkor a sor adja meg, hány oszlop legyen.