Twitter Bootstrap

Z Wikipedie, otevřené encyklopedie
Skočit na: Navigace, Hledání

Twitter Bootstrap je velmi jednoduchý a volně dostupný soubor nástrojů pro vytváření moderního webu a webových aplikací.[1] Nabízí podporu nejrůznějších webových technologií HTML, CSS, JavaScript a mnoho prvků, které je možné snadno implementovat do své stránky. Pro použití Twitter Bootstrap 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 možné vložit pouze pomocí HTML a CSS.[2]

Historie[editovat | editovat zdroj]

Mark Otto a Jacob Thornton z Twitteru vyvinuli Twitter Bootstrap jako framework pro podporu konzistence interních nástrojů. Před vyvinutím Twitter Bootstrapu, byly ve společnosti používány různé knihovny pro vývoj rozhraní, což vedlo k nekonzistenci zdrojových kódů a vysokým nákladům na údržbu.

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.[3]

Výhody[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í

Souborová struktura[editovat | editovat zdroj]

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

Základní forma Twitter Bootstrapu jsou kompilované soubory, které můžete použít na kterémkoliv webovém projektu. Twitter 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.

Komponenty[editovat | editovat zdroj]

Dohromady poskytují komponenty a JavaScript pluginy následující elementy uživatelského prostředí:

  • Button groups – Skupiny tlačítek
  • Button dropdowns – Vysouvací tlačítka
  • Navigational tabs, pills, and lists – Záložky, pilulky a seznamy pro navigaci
  • Navbar
  • Labels – štítky
  • Badges – “odznáčky”
  • Page headers and hero unit – hlavičky stránky a “hero unit”
  • Thumbnails – náhledy
  • Alerts – výstrahy
  • Progress bars
  • Modals
  • Dropdowns – vysouvací menu
  • Tooltips
  • Popovers
  • Accordion
  • Carousel – posuvný slider
  • Typeahead

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>

Reference[editovat | editovat zdroj]

  1. WebSite21, 26.8.2012, [cit. 2013-05-30]. Dostupné online.  
  2. Twitter Bootstrap., [cit. 2013-05-30]. Dostupné online.  
  3. Wikipedie, [cit. 2013-05-30]. Dostupné online. (Angličtina) 

Externí odkazy[editovat | editovat zdroj]