Bootstrap alapok

Mi az a Bootstrap?


A Bootstrap egy nyílt forráskódú, ingyenes kliens oldali keretrendszer. Számos előre elkészített felhasználói felület "darabkát" tartalmaz, úgymint navigációs menük, táblázatok, gombok, űrlapok, stb. (un. komponensek), amelyek segítségével gyorsabban, átláthatóbban és hatékonyabban készíthetők weboldalak. A komponensek jellemzően egy HTML kódrészletből és a hozzá tartozó CSS stílus formázásból állnak, de egyes komponenseknek lehet javaScript része is.

A Bootstrap számos ok miatt népszerű. A legtöbb böngészőben megfelelően működik. Lehetővé teszi, hogy érzékeny/reszponzív weboldalakat hozzunk létre. Reszponzív (responsive) weboldal azt jelenti, hogy a HTML5 weblap a különböző eszközökön (mobiltelefon, táblagép, asztali számítógép) optimálisan jelenik meg (egyszerű olvashatóság, könnyű navigálhatóság), azaz a képernyő (böngésző ablak) szélességére reagáló, rugalmasan változó grafikai megjelenésű a weblap.

Lényege a kétdimenziós rács struktúra (sorok és oszlopok), amelyet a weboldal tartalmának elrendezésére használnak.



Bootstrap verziók


A Twitter Inc. belső fejlesztésű rendszereként indult, 2011-ben nyilvánosan is elérhetővé tették.

A weboldalon használt bootstrap verzió: 5.1.x. Meggyőződhetünk erről, ha megnyomjunk a Ctrl+U-t, megkeressük a forrásprogramban fenn a "bootstrap.min.css" vagy lenn a "bootstrap.bundle.min.js" fált, és rákattintunk valamelyikükre.

A jelenleg (2022.08.07.) legújabb az 5.2.0-as verzió 2020-ben jelent meg.

Itt az összes verzió, s innen bármelyik letölthető (fenn - Download).



Támogatott böngészők


A Bootstrap 5 támogatja az összes legfontosabb böngésző és platform legújabb, stabil kiadásait.

  • Chrome >= 60 (tehát a Chrome 59 feletti verzióit támogatja)
  • Firefox >= 60
  • Firefox ESR
  • Safari >= 12
  • IOS >= 12
  • Explorert nem támogatja (a Bootstrap 4 még igen)

A legegyszerűbb HTML

(Bootstrap 5.2.0-val)

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
      <h1>Hello, world!</h1>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
  </html>

Íme a "látvány" - min1.html


Kicsit bonyolultabb HTML

(Bootstrap 5.2.0-val)

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">
      <div class="row">

        <div class="col bg-primary">
          <h1>Első oszlop</h1>
        </div>

        <div class="col bg-info">
          <h1>Második oszlop</h1>
        </div>

      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

Íme a "látvány" - min2.html (Ctrl+U billentyűkombinációval is látható lesz a HTML forrás!)


Bootstrap összefoglalva:

  • Nyílt forrású felhasználói felület keretrendszer (Twitter 2011- , github)
  • HTML, CSS minták a különböző elemekre
  • Könnyű reszponzív felületet készíteni
  • Mobilt elsőként (Mobile - First) elvet helyezi előtérbe
  • A legtöbb böngészőben megfelelően működik