? px

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 budú vždy vedľa seba! Majú definovanú šírku 6 aj pri najmenšom rozlíšení.
6 stĺpcov široký - nastavené aj v xs
"col-xs-6"
6 stĺpcov široký - nastavené aj v xs
"col-xs-6"
Tieto sa pri zmenšení rozlíšenia pod 992 pixelov dajú pod seba! Lebo šírku 6 majú iba po "md".
6 stĺpcov široký - nenastavené v sm a xs "col-md-6"
6 stĺpcov široký - nenastavené v sm a xs "col-md-6"
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ší):
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!!!
9 stĺpcov široký + offset 3 (nastavené aj v xs)
takže offset bude vždy 3!
"col-xs-9 col-xs-offset-3"
len 10 stĺpcov široký (nastavené v lg)
(aby bolo vidno ako sa to správa keď nie je na celú šírku a vedľa neho je voľno)
(tak až nad lg je to na 10, pod lg na celú šírku...)
col 10 a offset 1 zabezpečí v podstate zobrazenie na stred... Podobne tak iné kombinácie 8/2, či 6/3
"col-lg-10 col-lg-offset-1"
len 10 stĺpcov široký (nastavené v md)
(aby bolo vidno ako sa to správa keď nie je na celú šírku a vedľa neho je voľno)
(tak nad md je to na 10, pod md na celú šírku...)
"col-md-10 col-md-offset-1"
len 10 stĺpcov široký (nastavené v sm)
(aby bolo vidno ako sa to správa keď nie je na celú šírku a vedľa neho je voľno)
(tak nad sm je to na 10, pod sm na celú šírku...)
"col-sm-10 col-sm-offset-1"
len 10 stĺpcov široký (nastavené v xs)
(aby bolo vidno ako sa to správa keď nie je na celú šírku a vedľa neho je voľno)
(tak aj v xs je to na 10, čiže nikdy na celú šírku!...)
"col-xs-10 col-xs-offset-1"
kombinované nastavenia (pre lg, md, sm)
(vždy na stred a vždy cca rovnako široký kontajner)
(čím vyššie rozlíšenie, tým pomerovo užší kontjaner)
"col-md-4 col-sm-6 col-xs-8 col-md-offset-4 col-sm-offset-3 col-xs-offset-2"