Tento web slouží jako doplňující studijní materiál pro studenty předmětu Technologie Internetu I Fakulty ekonomicko-správní Univerzity Pardubice. Součástí webu jsou Teoretické základy o frameworku Bootstrap a návod, dle kterého si zvládnete vytvořit vlastní web. Stránka se soubory ke stažení obsahuje zdrojové a konečné materiály. Úvodní stránka webové prezentace je zároveň projektem, který budete dle výukového kurzu tvořit. Tato webová prezentace je výstupem bakalářské práce „Vytvoření responzivního webového designu s využitím frameworku Bootstrap“.
Bootstrap (někdy též nazýván Twitter Bootstrap) je nejpopulárnější HTML, CSS a JavaScript framework na světě. Od roku 2011 je Bootstrap open-source.
„Framework je možné definovat jako sadu nástrojů, modulů a také knihoven, které mohou být uvnitř implementovány. Práce s využitím frameworku se liší tím, že tyto sady slouží k tomu, aby usnadnily celkový vývoj finální aplikace nebo jiného projektu. Vývoj těchto aplikačních rámců šetří čas vývojářům a kodérům jak při samotném zakládání nového projektu, tak i v průběhu vývoje jejich projektů, a to díky tomu, že opakovaně využívají sady nástrojů neboli kódů, které už někdo naprogramoval, a není nutné celým tím procesem procházet znovu.“ (1)
Bootstrap v roce 2010 vytvořila malá skupinka vývojářů, v jejímž čele byli Mark Otto a Jacob Thornton. Původně Bootstrap sloužil pouze jako interní nástroj, tehdy pod názvem Twitter Blueprint, který řešil problémy nekonzistentnosti mezi jednotlivými aplikacemi a usnadňoval vývojářům práci s údržbou jednotlivých projektů. (2)
Hlavní využití nachází při vytváření nebo návrhu designu mobile-first responzivních webových stránek. Bootstrap obsahuje sadu nástrojů, mimo jiné ucelené předem připravené komponenty, které lze na webu libovolně používat, Sass mixiny a proměnné, responzivní grid systém a JavaScriptové pluginy. Dle statistik W3Techs je v roce 2020 využíván na 21,3 % webů. (3)
Poslední verze HTML, HTML5.
Poslední verze Bootstrapu, Bootstrap 4.5.3.
Poslední verze CSS, CSS3.
Při používání Bootstrapu by měl mít vývojář povědomí o určitých zásadách a technikách, na kterých je framework postaven. Komponenty jsou vytvářeny, aby byly responzivní na všech zařízeních.
Komponentám by měla být přidána jedna hlavní třída, která obsahuje základní a běžně neměnné vlastnosti. V případě potřeby nastavit jinou variantu komponenty (barva pozadí, barva ohraničení apod.) by měla být použita modifikační třída.
Vzhledem k rychlosti a přístupnosti webu co nejširší vrstvě uživatelů je doporučeno upřednostňovat jazyky HTML a CSS před JavaScriptem v každé možné situaci. Je doporučeno využívat nástroje urychlující psaní stylů a omezující potřebu psaní vlastních CSS stylů (preprocesor Sass).
K vytvoření layoutu je využíván dvanáctisloupcový grid systém. Grid systém je tvořen přiřazenými třídami k párovým elementům div. Všechny sloupce (mřížky) musí být zabaleny do řádku s třídou .row. Dále je nutné přiřadit třídu k jednotlivým mřížkám. Struktura zapsání takové třídy je .col-{zařízení}-{počet sloupců}.
Počet sloupců může nabývat hodnot od 1 do 12, například mřížka s třídou .col-3 bude zabírat 25 % (100/12*3) šířky řádku. (4)
Karolína je 23letá kadeřnice. Mezi její záliby patří sport, ráda běhá, plave a jezdí na kole.
Zobrazit profil
Ondřej je 25letý projektový manažer. Mezi jeho záliby patří hudba, cestování a Netfilx.
Zobrazit profil
Markéta je 27letá umělkyně. Mezi její záliby patří návštěva muzeí, divadel, kin a zoo.
Zobrazit profil
Tomáš je 55letý ředitel banky. Rád tráví čas na své chalupě s rodinou a se svým psem.
Zobrazit profil
