Bootstrap 5: Začněte

Obsah

    Zobrazit obsah

Co je Bootstrap?

  • Bootstrap je bezplatný front-end framework pro rychlejší a snadnější vývoj webu

  • Bootstrap obsahuje šablony návrhu založené na HTML a CSS pro typografii, formuláře, tlačítka, tabulky, navigaci, modály, karusely obrázků a mnoho dalších, stejně jako volitelné pluginy JavaScript

  • Bootstrap vám také dává možnost snadno vytvářet responzivní návrhy

Co je responzivní web design?

Responzivní web design je o vytváření webových stránek, které se automaticky přizpůsobují aby vypadaly dobře na všech zařízeních, od malých telefonů po velké stolní počítače.

Bootstrap 5 Příklad

<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>

Zkuste to sami →

<!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 verze

Bootstrap 5 (vydán v roce 2021) je nejnovější verzí Bootstrapu (vydáno 2013); s novými komponentami, rychlejší šablonou stylů a lepší odezvou.

Bootstrap 5 podporuje nejnovější stabilní verze všech hlavních prohlížečů a platformy. Internet Explorer 11 a nižší však nejsou podporovány.

Hlavní rozdíly mezi Bootstrap 5 a Bootstrap 3 & 4 jsou v tom Bootstrap 5 přešel na vanilkový JavaScript místo jQuery.

Poznámka: Bootstrap 3 a Bootstrap 4 jsou týmem stále podporovány pro kritické opravy chyb a změny dokumentace, a je naprosto bezpečné je nadále používat. Nové funkce však NEBUDOU přidávány jim.

Proč používat Bootstrap?

Výhody Bootstrapu:

  • Snadné použití: Bootstrap může začít používat kdokoli, kdo má jen základní znalosti HTML a CSS

  • Responzivní funkce: Responzivní CSS Bootstrapu se přizpůsobí telefonům, tabletům a počítačům

  • Přístup zaměřený na mobily: V Bootstrapu jsou styly zaměřené na mobily součástí základního rámce

  • Kompatibilita prohlížeče: Bootstrap 5 je kompatibilní se všemi moderními prohlížeči (Chrome, Firefox, Edge, Safari a Opera). Upozorňujeme, že pokud potřebujete podporu pro IE11 a nižší, musíte ji použít buď BS4 nebo BS3.

Kde získat Bootstrap 5?

Existují dva způsoby, jak začít používat Bootstrap 5 na svém vlastním webu.

Můžeš:

  • Zahrnout Bootstrap 5 z CDN

  • Stáhněte si Bootstrap 5 z getbootstrap.com

Bootstrap 5 CDN

Pokud si sami nechcete stahovat a hostovat Bootstrap 5, můžete jej zahrnout z CDN (Content Delivery Network).

jsDelivr poskytuje podporu CDN pro CSS a JavaScript Bootstrapu:

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>

Jedna z výhod používání Bootstrap 5 CDN:
Mnoho uživatelů si již stáhlo Bootstrap 5 od jsDelivr při návštěvě jiný web. V důsledku toho bude načten z mezipaměti, když navštíví váš web, což vede k rychlejšímu načítání. Většina sítí CDN také zajistí, že jakmile si od nich uživatel vyžádá soubor, bude mu doručen ze serveru, který je jim nejblíže, což také vede k rychlejšímu načítání.

JavaScript?
Bootstrap 5 používá JavaScript pro různé účely komponenty (jako modály, popisky, vyskakovací okna atd.). Pokud však použijete pouze CSS součástí Bootstrapu, nepotřebujete je.

Stažení Bootstrap 5

Pokud si chcete stáhnout a hostit Bootstrap 5 sami, přejděte na https://getbootstrap.com/, a postupujte podle tam uvedených pokynů.

Vytvořte svou první webovou stránku pomocí Bootstrapu 5

1. Přidejte dokument HTML5

Bootstrap 5 používá prvky HTML a vlastnosti CSS, které vyžadují dokument HTML5.

Na začátek vždy uveďte dokument HTML5 stránku spolu s atributem lang a správným názvem a znakovou sadou:

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

2. Bootstrap 5 je především mobilní

Bootstrap 5 je navržen tak, aby reagoval na mobilní zařízení. Mobilní styly jsou součástí základního rámce.

Chcete-li zajistit správné vykreslování a přiblížení dotykem, přidejte do pole následující značku Prvek <head>:

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

Část width=device-width nastavuje šířku stránky tak, aby odpovídala šířce obrazovky zařízení (které se bude lišit v závislosti na zařízení).

Část initial-scale=1 nastavuje počáteční úroveň přiblížení při prvním načtení stránky pomocí prohlížeče.

3. Kontejnery

Bootstrap 5 také vyžaduje obsahující prvek pro zabalení obsahu webu.

Na výběr jsou dvě třídy kontejnerů:

  1. Třída .container poskytuje responzivní kontejner s pevnou šířkou

  2. Třída .container-fluid poskytuje kontejner v plné šířce, který pokrývá celou šířku zobrazované oblasti

.container
.container-fluid

Dvě základní 5 stránek bootstrapu

Následující příklad ukazuje kód pro základní stránku Bootstrap 5 (s responzivním kontejnerem s pevnou šířkou):

Příklad kontejneru

<!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>

Zkuste to sami →

<!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>

Následující příklad ukazuje kód pro základní stránku Bootstrap 5 (s kontejnerem v plné šířce):

Příklad nádoby kapaliny

<!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>

Zkuste to sami →

<!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>