KMI/WEBA Webové aplikace: Seminář 01

Knihovna Bootstrap

Knihovna Bootstrap slouží pro rychlé vytváření responsivního webového front-endu založeném na jednoduchém design systému. Hodí se zejména pro tvorbu uživatelského rozhraní (UI) s rozsáhlejší funkcionalitou (například administrační rozhraní nebo jednoduché aplikace), ale je možné ji využít i pro tvorbu běžné webové stránky. Univerzálnost knihovny je vykoupena její velikostí.

Základní struktura

Knihovna obsahuje CSS kód definující vizualizaci a JS kód, který zabezpečuje základní funkcionalitu. Součástí je i externí knihovna Popper, která je využívána u pokročilejších UI prvků (například dropdown) a Bootstrap Icons obsahující základní ikonografiku. Všechny části je možné používat samostatně. CSS a JS kód se dále dělí na menší celky. Podrobně je struktura knihovny ukázána v oficiální dokumentaci.

Obecně je výhodné používat pouze potřebné části. Proto je knihovnu možné sestavit podle potřeby. Pro jednoduchost budeme používat výchozí (celou) knihovnu.

Instalace

Knihovnu je možné nainstalovat pomocí balíčkovacích nástrojů. Například.

npm install bootstrap@5.3.1

Následně je možné ji vložit do stránky z lokálního umístění nebo z CDN. Následující kód ukazuje vložení z CDN.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">

Obecně je lepší používat knihovnu z lokálního umístění.

Práce s knihovnou

Knihovna obsahuje již definované třídy upravující vzhled a chování mnoha běžných komponent a také prostředky pro snadnou tvorbu layoutu stránky. Knihovna Bootstrap využívá 12ti sloupcový layout.

<div class="container-fluid"> <!-- kontejner přes celou šířku -->
  <div class="row"> <!-- řádek -->
    <div class="col-4"> <!-- 4/12 -->
      Column
    </div>
    <div class="col-8"> <!-- 8/12 -->
      Column
    </div>
  </div>
</div>

Šířky sloupců se upravují automaticky dle velikosti viewportu. Navíc je možné adresovat konkrétní breakpointy pomocí definovaných tříd.

Jedním z nejnovějších vylepšení knihovny jsou utility, které umožňují snadněji vytvářet vlastní komponenty bez nutnosti psaní CSS kódu. Například.

<div class="d-flex p-3 border">
  <div class="border p-2 m-2 flex-fill">Lorem
  <div class="border p-2 m-2 flex-fill">ipsum
  <div class="border p-2 m-2 flex-fill">dolor
</div>

Výše uvedený kód vytvoří tři boxy pozicované pomocí flexboxu. Každý box má nastaven padding, margin a border.

Častou začátečnickou chybou je stažení knihovny a následné přepisování existujícího CSS. Knihovnu je možné snadno přizpůsobit pomocí preprocesoru Sass a CSS proměnných.

Sestavení knihovny

Pro sestavení budeme potřebovat zdrojové kódy knihovny a nástroj npm. Ve složce, kde je umístěn soubor package.json, provedeme instalaci potřebných nástrojů.

npm install

Nejprve provedeme modifikace knihovny. Předpokládejme, že budeme chtít změnit výchozí kulaté rohy na ostré rohy. Základní konfigurace se nachází v souboru scss/_variables.scss. Vypnutí kulatých rohů je možné provést změnou proměnné $enable-rounded. V souboru scss/bootstrap.scss je možné upřesnit, jaké části knihovny budou ve finálním sestavení zahrnuty. Následně provedeme sestavení.

npm run dist

Sestavená knihovna je ve složce dist/css.

Kam dál?

Knihovna Bootstrap není jedinou knihovnou. Existuje celá řada dalších podobných řešení, například: Pure CSS nebo Materialize. Další možností je implementace vlastního či zakoupení existujícího design systému. Ultimátní je v tomto ohledu knihovna Metronic. Dodejme, že na knihovně Bootstrap je vystavěna celá řada existujících (obvykle placených) řešení.

Zadání