Na této stránce naleznete návod, jak vytvořit webovou stránku s využitím CSS frameworku Bootstrap. Tvořit budete úvodní stránku tohoto webu (pro lepší představu Vám může sloužit jako předloha). Výukový kurz je rozdělen do 10 kroků a zabývá se výhradně frameworkem Bootstrap. Jazyky HTML a CSS nejsou vysvětlované nebo jen pouze okrajově, jelikož jejich základní znalost je předpokladem pro účast v tomto kurzu.
Na začátku doporučuji prostudovat si základy Bootstrapu, následně pro Vás bude mnohem jednodušší pochopit jednotlivé části kurzu. Za stěžejní považuji naučit se pracovat s Grid systémem. Téměř u všech kroků je nutné vlastní dostylování jednotlivých komponent (bloků), což v návodu není popsáno, nicméně soubor s CSS styly je k dispozici v souborech ke stažení společně s jednotlivými vyřešenými kroky a celým webem.
Než se pustíte do úkolů, stáhněte si zdrojové materiály.
Nejprve je potřeba připravit základní strukturu našeho webu. Deklarujeme, že se jedná o HTML soubor, nastavíme jazyk stránky, kódování znaků, viewport a titulek.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titulek</title>
</head>
<body>
</body>
</html>
Zdroj: vlastní zpracování
Aby bylo možné Bootstrap používat, je nutné do projektu implementovat zkompilované a minifikované CSS soubory a JavaScriptové pluginy dané verze. Existuje několik možností, jakým způsobem Bootstrap do projektu implementovat. Můžete využít Bootstrap CDN, stáhnout zdrojové soubory, instalovat Bootstrap prostřednictvím správce balíčků popř. použít již předpřipravenou šablonu.
Aktuální verzi naleznete a stáhnete na stránkách Bootstrapu.
Níže je zobrazeno použití Bootstrap CDN. Tento kód vkládáme do hlavičky.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
Zdroj: vlastní zpracování dle (5)
Navigační menu je nedílnou složkou webové stránky. Navigace pomáhá uživateli zorientovat se v prostředí webu a usnadňuje mu pohyb mezi jednotlivými stránkami. Obvykle jsou do navigačního menu umisťovány nejnavštěvovanější stránky a jejich podstránky.
Součástí navigace bude logo zarovnané k levé straně webu a 4 položky menu. Pro zařízení velikosti large a větší, tj. od šířky obrazovky 992 pixelů, bude zobrazováno klasické horizontální jednoúrovňové menu. Jelikož na menších zařízeních se položky menu nemusí zobrazovat správně a zabírají značnou část prostoru, bude pro tato zařízení horizontální menu nahrazeno tlačítkem v pravém horním rohu (tzv. hamburger menu). Položky menu se poté budou zobrazovat vertikálně po kliknutí uživatele na tlačítko.
Pro navigační menu užijeme element nav k tomu určený. K němu přiřadíme třídy navbar (je vyžadován), navbar-expand-lg, (určuje hranici, ve které se menu mění na hamburger menu), bg-light (nastavuje barvu pozadí menu), static-top (nastavuje zajíždění menu při scrollování).
Dále vložíme elementem button tlačítko, které umožní zobrazovat dropdown menu na menších zařízeních. K elementu button přidáme třídu navbar-toggler (nastavuje chování tlačítka). Přes atributy data-toggle a data-target propojíme tlačítko s obsahem (dropdown menu), který se bude na kliknutí rozbalovat a skrývat. Pomocí nečíslovaného odrážkového seznamu vytvoříme jednotlivé položky menu. K elementu ul přidáme třídu navbar-nav (definujeme dropdown menu) a k elementům li přidáme třídu nav-item (položka dropdown menu). Menu je defaultně zobrazeno na celou šířku řádku. Menu je funkční a zbývá ho pouze dle potřeb dostylovat.
Níže je zobrazen zdrojový kód navigačního menu.
<nav class="navbar navbar-expand-lg bg-light static-top">
<a class="navbar-brand" href="index.html"><img class="logo" src="img/fes_logo.png"></a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="index.html">Webová prezentace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tvorba-webu.html">Tvorba webu krok za krokem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zaklady-bootstrapu.html">Teoretické základy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="soubory-ke-stazeni.html">Soubory ke stažení</a>
</li>
</ul>
</div>
</nav>
Zdroj: vlastní zpracování dle (6)
Další část stránky bude tvořit carousel. Carousel (slider) je Bootstrap komponenta, pomocí které je možné na webové stránce nechat v určitých intervalech rotovat nějaký obsah. Nejběžněji je používán k zobrazování obrázků, které překrývá text.
Carousel bude obsahovat čtyři pravidelně rotující snímky. V jejich středu bude zobrazen text s tlačítky, které budou odkazovat na další stránky webu. Na levé a pravé straně carouselu budou umístěny ovládací prvky (šipky) umožňující uživateli kontrolovat rotaci snímků. Na spodní straně budou umístěny indikátory, které zobrazují kolikátý obrázek v pořadí je v danou chvíli zobrazen.
Carouselu nastavíme jedinečné id, které bude sloužit k propojení na indikátory jednotlivých snímků. Přidáme mu třídu carousel (definuje, že se jedná o carousel) a slide (animace slidování). Třídami d-none a d-lg-flex nastavíme, že se bude carousel zobrazovat pouze na zařízeních od velikosti large. Atributem data-ride nastavíme, že animace započne ihned po načtení stránky. Atributem data-interval nastavíme, v jakých intervalech budou slidy rotovat.
Všechny slidy si obalíme elementem div s třídou carousel-inner. Jednotlivé slidy zabalíme do divu s třídou carousel-item. K jednomu ze slidů musíme přidat třídu active, aby byl carousel viditelný. Máme připravenou základní kostru a teď už si jen slidy naplníme obsahem.
Níže je zobrazen zdrojový kód carouselu s jedním snímkem.
<div id="carousel" class="carousel slide d-none d-lg-flex" data-ride="carousel" data-interval="10000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slider1.png">
<div class="carousel-caption">
<h1 class="display-2">Bootstrap 4</h1>
<h2 class="mb-4">Webová prezentace</h2>
<a href="tvorba-webu.html" class="text-decoration-none"> <button type="button"
class="btn btn-outline-light btn-lg mb-4 d-none d-xl-inline">Tvorba webu krok za krokem</button></a>
<a href="zaklady-bootstrapu.html" class="text-decoration-none"> <button type="button"
class="btn btn-primary btn-lg d-none d-xl-inline">Teoretické základy</button></a>
<a href="soubory-ke-stazeni.html" class="text-decoration-none"><button type="button"
class="btn btn-primary btn-lg ml-3 d-none d-xl-inline">Soubory ke stažení</button></a>
</div>
</div>
</div>
</div>
Zdroj: vlastní zpracování dle (7)
Dále si nastavíme kontrolní tlačítka carouselu. K vytvoření indikátorů na spodní straně carouselu si vložíme nečíslovaný odrážkový seznam dle počtu slidů. K elementům li napárujeme atributem data-target id carouselu. Atributem data-slide-to nastavíme, na jaký slide se přesuneme po kliknutí na daný indikátor.
Šipky po stranách carouselu, které nám posouvají slidy dopředu nebo zpět vytvoříme jako hypertextové odkazy, ke kterým přidáme třídy carousel-control-prev (levá) a carousel-control-next (pravá), které společně s třídami carousel-control-prev-icon a carousel-control-next-icon vytvoří tlačítko. Atribut href nastavíme dle id carouselu. Atributem data-slide nastavíme směr, kterým se budou po kliknutí na šipky slidy posouvat.
Carousel je připraven, stačí dostylovat.
Níže je zobrazen zdrojový kód kontrolních tlačítek carouselu.
<ul class="carousel-indicators d-none d-xl-flex">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"> </li>
<li data-target="#slider" data-slide-to="3"> </li>
</ul>
<a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Zdroj: vlastní zpracování dle (7).
Jumbotron je komponenta, ve které se nacházejí informace významnějšího charakteru. Uvnitř může být umístěn téměř jakýkoliv obsah (nadpisy, odstavce, tlačítka, obrázky apod.). Jumbotron se povětšinou zobrazuje jako šedý box se zaoblenými rohy.
Úkolem bude vytvořit jumbotron se zeleným pozadím, který nebude roztažen na celou šířku řádku.
Jumbotron zabalíme do elementu div, kterému přiřadíme třídu jumbotron. Třída mt-4 nastavuje horní margin, třída lead zvýrazňuje textový obsah jumbotronu a třída text-justify zarovnává text do bloku. Následně dostylujeme vlastními styly.
Níže je zobrazen zdrojový kód jumbotronu.
<div class="container-fluid">
<div class="jumbotron mt-4">
<div class="lead text-justify">
<p>Web slouží jako doplňující studijní materiál pro studenty
předmětu Technologie Internetu I FES Univerzity Pardubice. Naleznete zde základní informace o
frameworku Bootstrap 4 a návod, se kterým můžete vytvořit vlastní web. V Souborech ke stažení si
můžete stáhnout materiály potřebné k tvorbě tohoto webu. Úvodní stránka webové prezentace je
zároveň konečným materiálem, který budeme na základě
vytvořeného návodu 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“. </p>
</div>
</div>
</div>
Zdroj: vlastní zpracování dle (8).
Profilové karty jsou účinným způsobem, jak na webových stránkách představit určité osoby. Využité mohou být například na kontaktních stránkách, kde je možné tímto způsobem zobrazovat celé týmy lidí. Zpravidla profilová karta obsahuje profilové foto, jméno a příjmení, popis osoby a případně kontaktní údaje (e-mailovou adresu, telefonní číslo, odkaz na webovou stránku, odkazy na sociální sítě apod.).
Úkolem bude vytvořit 4 profilové karty. Každá profilová karta bude obsahovat v její horní polovině fotografii, pod fotografií bude jméno osoby a krátký popis osoby. Pod popisem se bude nacházet tlačítko, které povede na podrobnější profil.
Karty si obalíme elementem div, kterému přiřadíme třídu card. Dále vložíme obrázek osoby a přidáme k němu třídu card-img-top, čímž jej umístíme do horní poloviny karty. Další obsah karty si obalíme do elementu div a přidáme mu třídu card-body. Dále přidáme nadpis s třídou card-title a text s třídou card-text. Nakonec přidáme tlačítko s třídami btn (definuje tlačítko), btn-primary (vzhled tlačítka), btn-lg (velikost tlačítka) a font-weight-bold (tučný text).
Níže je zobrazen zdrojový kód profilové karty.
<div class="container-fluid mb-4">
<div class="row">
<div class="col-md-6 col-xl-3 mb-4">
<div class="card">
<a href="#"><img class="card-img-top" src="img/profile_photo2.jpg"></a>
<div class="card-body">
<h4 class="card-title">Karolína Nováková</h4>
<p class="card-text">Karolína je 23letá kadeřnice. Mezi její záliby patří sport, ráda
běhá, plave a jezdí na kole.</p>
<a href="#" class="btn btn-primary btn-lg font-weight-bold">Zobrazit profil</a>
</div>
</div>
</div>
</div>
</div>
Zdroj: vlastní zpracování dle (9).
Ikonky sociálních sítí slouží ke vkládání odkazů na sociální sítě a jsou nedílnou součástí každého moderního webu. Kliknutím na sociální ikonku je uživatel webové stránky přesměrován na danou sociální síť, kde může nalézt další důležité informace, eventuálně se může stát pouze fanouškem sociální sítě a začít ji sledovat. Při vkládání odkazu k tlačítku je vhodné nastavit, aby byl návštěvník webové stránky přesměrován do nového okna webového prohlížeče a nedošlo tak k jeho plnému opuštění webu. Ikonky pro sociální sítě jsou nejčastěji vkládány do hlavičky nebo do patičky webu.
Úkolem bude vytvořit 5 ikonek pro sociální sítě Instagram, Facebook, Twitter, Skype a YouTube. Ikonky jsou zdarma stahovány z webové stránky fontawesome.com. Je ale nutné se na stránce zaregistrovat, čímž získáte link, který vložíte do hlavičky.
<head>
<script src="https://kit.fontawesome.com/50d15c635f.js" crossorigin="anonymous"></script>
</head>
Nastavíme si řádek a sloupečky. Sociální ikonky poté vytvoříme jako hypertextové odkazy viz zdrojový kód níže.
<div class="container-fluid mb-5">
<div class="row text-center">
<div class="col-12">
<h2 class="display-4 pb-4">Ikonky pro sociální sítě</h2>
</div>
<div class="col-12 social">
<a href="https://www.instagram.com" target="_blank"> <i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com" target="_blank"> <i class="fab fa-facebook"></i></a>
<a href="https://twitter.com" target="_blank"> <i class="fab fa-twitter"></i></a>
<a href="https://www.skype.com" target="_blank"> <i class="fab fa-skype"></i></a>
<a href="https://www.youtube.com" target="_blank"> <i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
Zdroj: vlastní zpracování
Úkolem bude vytvořit kontaktní formulář skládající se z osmi textových polí, jednoho radio přepínače se třemi výběrovými možnostmi, jednoho selectu s pěti výběrovými možnostmi a jedné textové oblasti určené uživateli k napsání jeho zprávy. Součástí formuláře bude tlačítko odesílající formulář a checkbox, ve kterém uživatel dává souhlas se zpracováním osobních údajů.
Formulář je tvořen elementem form, kterému přidáme id s hodnotou "needs-validation" (validuje povinná formulářová pole). Třída form-row má podobnou funkci jako třída row, jediný rozdílem je, že dělá ještě menší odsazení mezi sloupci. Ovládacím prvkům přidáváme třídu form-control, čímž nastavíme stoprocentní šířku prvků. Skupinám prvků dáváme třídu form-group. Atributem required značíme povinná pole.
Níže je zobrazena část zdrojového kódu formuláře
<form class="container bg-light py-5 mb-5 px-5" id="needs-validation">
<div class="form-row">
<div class="col-12">
<h2 class="display-4 pb-4 text-center">Kontaktní formulář</h2>
</div>
<div class="col-md-6 col-sm-12 mb-3">
<label>Jméno</label>
<input type="text" class="form-control" placeholder=" Zadejte své jméno" required="required">
</div>
<div class="col-md-6 col-sm-12 mb-3">
<label>Pohlaví</label> <br>
<label class="form-check-label px-3 "><input class="form-check-input" type="radio" name="optradio" checked>Muž</label>
<label class="form-check-label px-3"><input class="form-check-input" type="radio" name="optradio">Žena</label>
</div>
<div class="col-md-6 col-sm-12 mb-3">
<label>Kolik je Vám let?</label>
<select class="form-control">
<option selected>Vyberte z nabídky</option>
<option>0 - 19 let</option>
</select>
</div>
<div class="col-12 mb-5">
<label>Text zprávy</label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="form-check col-8 pl-5">
<label class="form-check-label"><input type="checkbox" class="form-check-input" required>Souhlasím se zpracováním osobních údajů.</label>
</div>
<div class="text-right col-4">
<button type="submit" class="btn btn-dark btn-lg">Odeslat</button>
</div>
</div>
</form>
Zdroj: vlastní zpracování dle (10).
Do patičky se obvykle umisťují veškeré potřebné odkazy na různé stránky, odkazy na sociální sítě, malé formuláře a kontaktní údaje na vlastníka webu či společnost (název společnosti, e-mail, telefon, adresa apod.). Dále se do patičky může vložit copyright, který upozorňuje na autorská práva.
Patička bude rozdělená na dvě části. První část rozdělená do 3 sloupců bude obsahovat kontaktní údaje, odkazy na nejdůležitější stránky a Google mapu s nastavenou adresou Fakulty ekonomicko-správní Univerzity Pardubice. Druhou část patičky bude tvořit copyright.
Patičku vytvoříme v elementu footer. Uvnitř se bude nacházet element div, kterému přidáme třídy row (povinný obal pro sloupce), container (nastavuje šířku řádku) a mx-auto (horizontální vycentrování obsahu). Mapa je vložena přes element iframe.
Níže je zobrazen zdrojový kód patičky.
<footer>
<div class="row container mx-auto">
<div class="col-sm-6 col-md-4">
<h4 class="pt-5 pb-3">Kontakt</h4>
<p> <i class="fas fa-home mr-3"></i>Studentská 95, 532 10 Pardubice 2</p>
<p> <i class="fas fa-envelope mr-3"></i> <a href="mailto:dekanat.fes@upce.cz">dekanat.fes@upce.cz</a></p>
<p> <i class="fas fa-phone mr-3"></i> <a href="tel: +420 466 036 111">+420 466 036 111</a></p>
<p> <i class="fas fa-print mr-3"></i> <a href="tel: +420 466 036 560">+420 466 036 560</a></p>
</div>
<div class="col-sm-6 col-md-4 ">
<h4 class="pt-5 pb-3">Nejčastěji hledáte</h4>
<ul>
<li class="pb-3"> <a href="index.html">Webová prezentace</a></li>
<li class="pb-3"> <a href="tvorba-webu.html">Tvorba webu krok za krokem</a></li>
<li class="pb-3"> <a href="zaklady-bootstrapu.html">Teoretické základy</a></li>
<li> <a href="soubory-ke-stazeni.html">Soubory ke stažení</a></li>
</ul>
</div>
<!--Google mapa-->
<div class="col-md-4 pb-4">
<h4 class="pt-5 pb-3">Mapa</h4>
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2562.035652361871!2d15.767211215885188!3d50.048163424150154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dccc33b38a13d%3A0x1a11560fb4c7d5e8!2sUniverzita%20Pardubice!5e0!3m2!1scs!2scz!4v1595947539308!5m2!1scs!2scz"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--Copyright-->
<hr class="light">
<div class="col-12 mb-3 copyright text-center">© 2020 UPCE FES | Vytvořil Stanislav Huňáček</div>
</div>
</footer>
Zdroj: vlastní zpracování
Vytvořte zbylý obsah dle úvodní stránky, který Vám ještě chybí. Jedná se zejména o práci s grid systémem.
1) LEŽÁKOVÁ, Melánie. Možnosti využití CSS frameworků při návrhu moderního webu [online]. Zlín, 2020
[cit. 2020-11-06]. Bakalářská práce. Univerzita Tomáše Bati
ve Zlíně, Fakulta aplikované informatiky. Vedoucí práce Ing. Radek Vala, Ph.D.
Dostupné z:
https://theses.cz/id/nb20k2.
2) OTTO, Mark. Bootstrap in a List Apart No. 342. Markdotto.com [online]. California: Mark Dotto,
17.1.2012 [cit. 2020-11-04].
Dostupné z:
https://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/
3) Usage statistics and market share of Bootstrap for websites, 2020. W3Techs: Web Technology Surveys
[online]. 4. 11. 2020 [cit. 2020-11-04].
Dostupné z:
https://w3techs.com/technologies/details/js-bootstrap
4) Approach. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-06].
Dostupné
z: https://getbootstrap.com/docs/4.5/extend/approach/
5) Bootstrap · The most popular HTML, CSS, and JS library in the world. [online]. [cit.
2020-05-17].
Dostupné z: https://getbootstrap.com/
6) Navbar. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-08].
Dostupné z: https://getbootstrap.com/docs/4.0/components/navbar/
7) Carousel. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-08].
Dostupné z: https://getbootstrap.com/docs/4.0/components/carousel/
8) Jumbotron. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-08].
Dostupné z: https://getbootstrap.com/docs/4.0/components/jumbotron/
9) Cards. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-08].
Dostupné z:
https://getbootstrap.com/docs/4.0/components/card/
10) Forms. Bootstrap: Build fast, responsive sites with Bootstrap [online]. [cit. 2020-11-08].
Dostupné z: https://getbootstrap.com/docs/4.0/components/forms/
Obrázky byly staženy z volně dostupné fotobanky pixabay.com. Obrázky jsou zdarma pro komerční použití, bez autorských práv a není třeba u nich uvádět zdroj. Níže uvádím seznam obrázků s odkazem na původní zdroj.