Bootstrap 5: Kezdje el

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Mi az a Bootstrap?

  • A Bootstrap egy ingyenes front-end keretrendszer a gyorsabb és egyszerűbb webfejlesztéshez

  • A Bootstrap HTML- és CSS-alapú tervezősablonokat tartalmaz tipográfiához, űrlapokhoz, gombokhoz, táblázatokhoz, navigációhoz, modálokhoz, képkörhintahoz és sok máshoz, valamint opcionális JavaScript-bővítményeket

  • A Bootstrap lehetőséget ad arra is, hogy könnyen reszponzív terveket készítsen

Mi az a reszponzív webdesign?

A reszponzív webdizájn az automatikusan igazodó webhelyek létrehozásáról szól hogy jól nézzenek ki minden eszközön, a kis telefonoktól a nagy asztali számítógépekig.

Bootstrap 5 példa

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Próbálja ki Ön is →

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

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap verziók

A Bootstrap 5 (2021-ben jelent meg) a Bootstrap legújabb verziója (megjelenés: 2013); új összetevőkkel, gyorsabb stíluslappal és nagyobb reakciókészséggel.

A Bootstrap 5 támogatja az összes főbb böngésző legújabb, stabil kiadásait és platformok. Az Internet Explorer 11 és régebbi verziói azonban nem támogatottak.

A fő különbség a Bootstrap 5 és a Bootstrap 3 és 4 között az A Bootstrap 5 a jQuery helyett vanilla JavaScript-re váltott.

Megjegyzés: A csapat továbbra is támogatja a Bootstrap 3-at és a Bootstrap 4-et a kritikus hibajavítások és a dokumentáció módosításai miatt, és továbbra is teljesen biztonságos a használatuk. Új funkciók azonban NEM kerülnek hozzáadásra őket.

Miért használja a Bootstrapet?

A Bootstrap előnyei:

  • Könnyen használható: Bárki, aki csak alapszintű HTML- és CSS-ismerettel rendelkezik, elkezdheti használni a Bootstrap-et

  • Reszponzív funkciók: A Bootstrap reszponzív CSS-je alkalmazkodik a telefonokhoz, táblagépekhez és asztali számítógépekhez

  • Mobile-first megközelítés: A Bootstrapben a mobil-első stílusok az alapvető keretrendszer részét képezik

  • Böngésző kompatibilitás: A Bootstrap 5 kompatibilis az összes modern böngészővel (Chrome, Firefox, Edge, Safari és Opera). Ne feledje, hogy ha támogatásra van szüksége az IE11 és régebbi verziókhoz, akkor ezt kell használnia akár BS4, akár BS3.

Hol lehet beszerezni a Bootstrap 5-öt?

Kétféleképpen kezdheti el a Bootstrap 5 használatát saját webhelyén.

Tudsz:

  • Tartalmazza a Bootstrap 5-öt egy CDN-ről

  • Töltse le a Bootstrap 5-öt a getbootstrap.com webhelyről

Bootstrap 5 CDN

Ha nem szeretné saját maga letölteni és üzemeltetni a Bootstrap 5-öt, akkor egy CDN-ről (Content Delivery Network) is felveheti.

A jsDelivr CDN-támogatást biztosít a Bootstrap CSS-hez és JavaScript-hez:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

A Bootstrap 5 CDN használatának egyik előnye:
Sok felhasználó már letöltötte Bootstrap 5 a jsDelivr-től látogatáskor egy másik webhely. Ennek eredményeként a gyorsítótárból töltődik be, amikor felkeresik webhelyét, ami gyorsabb betöltési időt eredményez. Ezenkívül a legtöbb CDN gondoskodik arról, hogy amint a felhasználó fájlt kér tőle, azt kiszolgálja a hozzájuk legközelebb eső szerverről, ami gyorsabb betöltési időt is eredményez.

JavaScript?
A Bootstrap 5 különböző célokra JavaScriptet használ összetevők (például modális, eszköztippek, felugró ablakok stb.). Ha azonban csak a A Bootstrap CSS része, nincs szükséged rájuk.

A Bootstrap 5 letöltése

Ha saját maga szeretné letölteni és tárolni a Bootstrap 5-öt, keresse fel a következőt: https://getbootstrap.com/, és kövesse az ott található utasításokat.

Hozd létre első weboldaladat a Bootstrap 5 segítségével

1. Adja hozzá a HTML5 doctypet

A Bootstrap 5 olyan HTML elemeket és CSS-tulajdonságokat használ, amelyek megkövetelik a HTML5 doctype.

Mindig adja meg a HTML5-dokumentumot az elején az oldal, a lang attribútum, valamint a megfelelő cím és karakterkészlet:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. A Bootstrap 5 mobil-elsőnek számít

A Bootstrap 5-öt úgy tervezték, hogy reagáljon a mobileszközökre. A mobil-első stílusok része az alapkeretnek.

A megfelelő megjelenítés és érintési nagyítás érdekében adja hozzá a következő címkét a <head> elem:

<meta name="viewport" content="width=device-width, initial-scale=1">

A width=device-width rész beállítja az oldal szélességét, hogy kövesse a képernyő szélességét (amely az eszköztől függően változhat).

Az initial-scale=1 rész beállítja a kezdeti nagyítási szintet az oldal első betöltésekor a böngésző által.

3. Konténerek

A Bootstrap 5-nek is szüksége van egy tartalmú elemre a webhely tartalmának burkolásához.

Két konténerosztály közül lehet választani:

  1. A .container osztály reszponzív fix szélességű tárolót biztosít

  2. A .container-fluid osztály egy teljes szélességű tárolót biztosít, amely a nézetablak teljes szélességére kiterjed.

.container
.container-fluid

Két alapvető Bootstrap 5 oldal

A következő példa egy alap Bootstrap 5 oldal kódját mutatja be (reszponzív, rögzített szélességű tárolóval):

Példa konténerre

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Próbálja ki Ön is →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

A következő példa egy alap Bootstrap 5 oldal kódját mutatja be (teljes szélességű tárolóval):

Tartályos folyadék példa

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Próbálja ki Ön is →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>