Bootstrap

Z Wikipedie, otevřené encyklopedie
(přesměrováno z Twitter Bootstrap)
Skočit na: Navigace, Hledání
Příklad webové stránky používající Bootstrap v Mozilla Firefox

Bootstrap je jednoduchá a volně stažitelná sada nástrojů pro tvorbu webu a webových aplikací.[1] Obsahuje návrhářské šablony založené na HTML a CSS, sloužící pro úpravu typografie, formulářů, tlačítek, navigace a dalších komponent rozhraní, stejně jako další volitelná rozšíření JavaScriptu. Pro použití Bootstrapu jsou nutné základní znalosti HTML a CSS, interaktivní prvky jako jsou tlačítka, boxy, menu a další kompletně nastavené a graficky zpracované elementy je totiž možné vložit pouze pomocí HTML a CSS.[2]

Původ[editovat | editovat zdroj]

Bootstrap vyvinul Mark Otto a Jacob Thornton na Twitteru jako framework podporující konzistenci mezi interními nástroji. Před Bootstrapem byla pro vývoj rozhraní využívána řada knihoven, což vedlo k nekonzistenci zdrojových kódů a velké náročnosti na údržbu. Developer Mark Otto podle Twitteru prohlásil: „Velmi malá skupina vývojářů společně se mnou měla za úkol navrhnout a vybudovat nový interní nástroj a viděla příležitost udělat něco více. Skrze tento proces jsme chtěli vytvořit něco o moc důležitějšího než další nástroj pro vnitřní využití. O měsíc později jsme skončili s první verzí Bootstrapu jako metodou k dokumentaci a sdílení běžných designových vzorů a přínosů ve společnosti.[3]

V srpnu 2011 byl vydán Twitter Bootstrap jako open source a v únoru 2012 se stal nejoblíbenějším developerským projektem na GitHubu.

Funkce[editovat | editovat zdroj]

Výhodou tohoto souboru nástrojů je snadné zpracování jakéhokoliv uživatelského rozhraní ve webové aplikaci a nerozhoduje, zda to je například uživatelské rozhraní v administraci back-endových nebo front-endových aplikací. Bootstrap je kompatibilní s poslední verzí všech hlavních prohlížečů a elegantně se přizpůsobuje použití na starších prohlížečích jako je Internet Explorer 8. Od verze 2.0 také podporuje responzivní design. To znamená, že se rozložení stránky dynamicky přizpůsobuje s ohledem na používané zařízení (stolní PC, tablet, mobilní telefon).

Bootstrap má otevřenou licenci a je dostupný na GitHubu. Vývojáři jsou povzbuzováni k účasti na projektu a vytváření jejich vlastního podílu na platformě. Nedávno členové komunity přeložili dokumentaci Bootstrapu do mnoha různých jazyků, včetně čínštiny, španělštiny a ruštiny. Česká verze prozatím chybí.

Struktura a funkce[editovat | editovat zdroj]

Bootstrap je modulární a sestává v zásadě ze série LESS stylopisů, které implementují různorodé komponenty toolkitu. Komponenty bootstrapu jsou zahrnuty ve stylopisu bootstrap.less. Vývojáři si mohou přizpůsobit soubor Bootstrap samostatně výběrem komponent, které chtějí použít pro svůj projekt. Nastavení jsou možná do určité míry skrze centrální konfigurační stylesheet. Hlubší změny jsou možné pomocí LESS deklarací. Užití jazyka stylopisu LESS umožňuje používání proměnných, funkcí, vnořených selektorů atd.

Základní forma Bootstrapu jsou kompilované soubory, které lze použít na kterémkoliv webovém projektu. Bootstrap poskytuje kompilované CSS a JS (bootstrap.*), stejně jako kompilované a minimalizované CSS a JS soubory (bootstrap.min.*). Obrázkové soubory jsou komprimované pomocí ImageOptim, což je Mac aplikace pro komprimování PNG souborů. Twitter Bootstrap je závislý na javascriptové knihovně jQuery.

Od verze 2.0 obsahuje konfigurace Bootstrapu v dokumentaci také speciální volbu „Customize“. Navíc vývojáři mohou volit formu požadovaných součástí a jejich nastavení, pokud je třeba. Následně vygenerovaný balík již obsahuje před-vytvořený CSS stylopis. Gridový systém a responzivní design je standardně s 1170px širokým gridovým layoutem. Případně může vývojář použít šířku layoutu řízenou proměnnou. Pro oba případy má toolkit čtyři variace vytváření různých rozlišení a typů zařízení: mobilní telefony, portrét a krajina, tablety a PC s nízkým a vysoký rozlišením. Každá varianta reguluje s šířkou sloupců.

Po stažení a rozbalení souboru naleznete tuto strukturu:

 bootstrap/
 ├── css/
 │   ├── bootstrap.css
 │   ├── bootstrap.min.css
 ├── js/
 │   ├── bootstrap.js
 │   ├── bootstrap.min.js
 └── img/
     ├── glyphicons-halflings.png
     └── glyphicons-halflings-white.png

Stylopis CSS[editovat | editovat zdroj]

Bootstrap poskytuje sadu stylopisů, které poskytují základní definice stylů pro všechny klíčové části HTML. Ty poskytují jednotný, moderní vzhled pro formátování textu, tabulek a formulářových prvků.

Znovu využitelné komponenty[editovat | editovat zdroj]

Vedle obvyklých HTML prvků, bootstrap obsahuje další běžně využívané prvky uživatelského rozhraní. To zahrnuje tlačítka s pokročilými možnostmi nastavení a funkcemi (např. seskupování tlačítek nebo tlačítka s drop-down menu, vytváření navigačních listů, horizontální, či vertikální záložky, navigace, drobečková navigace, stránkování, atd.), štítky, pokročilé možnosti typografie, generování náhledů, varovná oznámení a panel průběhu.

JavaScriptové komponenty[editovat | editovat zdroj]

Bootstrap je dostupný s několika JavaScriptovými komponenty ve formě jQuery plug-inů. Ty poskytují rozšiřující možnosti uživatelského rozhraní jako dialogové boxy, tooltipy, atd. Také rozširují funkcionalitu dosavadních prvků uživatelského rozhraní, to nahrnuje např. funkci auto-doplňování pro vstupní formulářová pole. Ve verzi 2.0 jsou podporovány následující plug-iny JavaScriptu:

  • Modal (modální dialogová okna/layovery),
  • Dropdown (rozbalovací políčka s nabídkou),
  • Scrollspy (ukazatel nadpisu, k němuž je aktuálně posunutá stránka),
  • Tab (přepínatelné prvky, z nichž je zobrazen právě jeden),
  • Tooltip (bublinková nápověda),
  • Popover (otevírací okna),
  • Alert (výstražné nebo informativní boxy),
  • Button (tlačítka),
  • Collapse (efekt pro smrsknutí obsahu elementu),
  • Carousel („přepínač obrázků“)
  • Typeahead (našeptávač).

Příklad[editovat | editovat zdroj]

Běžná HTML šablona:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap vzor</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <h1>Ahoj, světe!</h1>
  </body>
</html>


Pokud chceme ze šablony vytvořit Bootstrap ready šablonu, stačí vložit vhodné JS a CSS soubory:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap vzor</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Ahoj, světe!</h1>
  </body>
</html>

Použití[editovat | editovat zdroj]

K využití Bootstrapu na svojí stránce musí vývojáři stáhnout CSS stylopis Bootstrapu a nalinkovat do hlavičky HTML souboru. (Také je možno kompilovaný formát CSS souboru ze stažených LESS stylopisů.) Pro využití JavaScriptových komponentů je nutné je v HTML dokumentu definovat až po knihovně jQuery.

Odkazy[editovat | editovat zdroj]

Reference[editovat | editovat zdroj]

V tomto článku byl použit překlad textu z článku Bootstrap (front-end framework) na anglické Wikipedii.

  1. Bootstrap tutorial [online]. W3school, [cit. 2014-11-11]. Dostupné online.  
  2. Bootstrap [online]. Bootstrap, [cit. 2013-05-30]. Dostupné online.  
  3. Bootstrap in A List Apart #342 [online]. Mark Otto, 2012-01-17, [cit. 2012-03-05]. Dostupné online.  

Související stránky[editovat | editovat zdroj]

Externí odkazy[editovat | editovat zdroj]