Základná osnova ako funguje Bootstrap na www stránkach
(Na odskúšanie funkčnosti (na PC a monitore) treba meniť šírku okna prehliadača,
aktuálnu šírku vidíte vpravo hore v zelenej "bubline" - obnovuje sa automaticky pri každej zmene okna)
Informácie som čerpal z tohoto videa (obsah kódu som si mierne upravil pre svoje potreby):
https://www.youtube.com/watch?v=UXV9NzXnD2c
čo je Bootstrap sa dozviete napríklad na tejto stránke
https://www.w3schools.com/bootstrap/bootstrap_ver.asp
Samotný html kód (aby bolo jasne viditeľné čo sa kde píše) je vidno po skopírovaní celého tohto odkazu (alebo
stlačením CTRL+U na PC):
view-source:http://danielgago.sk/Bootstrap_zaklad.html
Verzia Bootstrap - 3.4.1.
Bootstrap nie je iba tu prezentované rozloženie elementov na stránke, je toho omnoho viac, v podstate celý základný dizajn elementov a prvkov na stránke. Ale tu prezentujem iba prácu s kontajnermi - a teda layout/rozloženie stránky!!
Bootstrap berie do úvahy tieto 4 rozlíšenia (v zátvorke je informácia pre asi aké zariadenia sa s tým ráta):
xs - extra small 0-767 pixelov (mobily)
sm - small 768 - 991 pixelov (tablety)
md - medium 992 - 1199 pixelov (obrazovka PC)
lg - large 1200 a viac pixelov (obrazovka s väčším rozlíšením)
Z toho vyplýva že responzivita webu je pomocou neho úplná hračka... "Media Queries" nie je vôbec potreba použiť.
Aj tento blok je kontajner bootstrapp-u - class="jumbotron" - veľký nadpis.
A aby sa spravili okraje na stránke tak je to celé obalené v class="container". Aj to je funkcia Bootstrap-u.
+ som pridal k tomu obalu "container" border po stranách, aby bolo vidno kde končí.
Základné rozdelenie má 12 stĺpcov a tu nižšie je pár príkladov ako sa s tým potom dá pracovať.
Vytvárajú sa "kontajnery" (A aj keď ich je na prvý pohľad do kódu dajako veľa, tak v konečnom dôsledku to samotné
programovanie vcelku zjednodušuje... Odpadá množstvo príkazov pre štýly jednotlivých sekcií, a hlavne sa aj ľahko
robia zmeny.).
Celé toto sa dá dosiahnuť aj pomocou CSS štýlovania, ale robiť to pomocou Bootstrap-u je násobne jednoduchšie.
Môže to mať ale obmedzenia (čo sa ale pri základných stránkach nepredpokladá). V Každom prípade poznať CSS je
stále potreba.
Tento bude vždy na celú šírku stránky, a asi je aj jedno pre aké konkrétne rozlíšenie je to nastavené (tu je md,
ale skúšal som aj xs, aj sm a výsledok bol rovanký)!
12 stĺpcov široký "col-md-12"
Tieto majú nastavenia pre všetky 4 šírky a podľa toho sa ich počet na šírku mení!
Vojdú buď 4, alebo 3, alebo 2, alebo 1 na šírku.
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
3 stĺpce široký (v lg) 4 stĺpce široký (v md) 6 stĺpcov (v sm) a 12 (v xs)
"col-lg-3 col-md-4 col-sm-6 col-xs-12"
A ešte ukážka odsadenia od začiatku - dve varianty (jedna to odsadenie pri malom rozlíšení zruší):
dvoj blog ktorý pod sm potom zmizne, ale pri xs sa objaví na celú šírku
"col-md-2 hidden-sm col-xs-12"
9 stĺpcov široký + offset 1 (lebo pred ním je ešte 2 stĺpcový element) ( nastavené v
md)
"col-md-9 col-xs-12 col-md-offset-1"
takže pod md sa ofsett zruší...
aby sa potom pri xs korektne zobrazoval spolu s tým nad ním tak pri xs musí dostať šírku 12!!!