Funkcie bootstrapu

V tomto druhom článku zo série poďme sa zaoberať funkciami Bootstrap. Ide o kompletnú knižnicu zdrojov pre návrh webových stránok a aplikácií, vrátane šablón a prvkov pre formuláre, písma a ponuky, medzi inými.

V predchádzajúci článok tvrdili sme, že sú chvíle, keď správcovia obsahu nie sú tou najlepšou voľbou písanie kódu pre web od začiatku je tou správnou alternatívou. To však neznamená, že musíme znovu vynájsť koleso. Používanie rámcov, ako je Bootstrap, výrazne skracuje čas návrhu a uľahčuje získavanie výsledkov.

Funkcie bootstrapu

Aby sme pochopili funkcie Bootstrapu, musíme pochopiť zmena paradigmy v dizajne webových stránok.

keď sa objavili webové stránky sa jednoducho museli prispôsobiť rôznym veľkostiam monitorov. Postupom času sa však mobilné telefóny a tablety čoraz viac stávajú preferovanými prostriedkami prístupu používateľov. výzvou bolo prispôsobiť stránky rôznym obrazovkám bez toho, aby používateľ musel obsah zväčšovať, zmenšovať alebo presúvať, aby ho mohol vidieť.

V zásade boli prijaté tieto prístupy:

• Responzívny dizajn: Dizajn je rovnaký, ale automaticky prispôsobený veľkosti obrazovky. Tento prístup má určité problémy, napríklad že používateľ môže byť nútený priblížiť si určité časti stránky, aby ich videl.
• Progresívny postup: Začína sa tým, že sa stránka navrhne pre zariadenie s menším počtom zdrojov (zvyčajne mobilný telefón, pretože má menšiu obrazovku, prehliadač s menšou kompatibilitou pre pokročilé funkcie a na pripojenie sa často vyžaduje použitie dátového plánu). Po dokončení sa na základe tohto dizajnu pridajú funkcie na získanie verzie pre tablety, notebooky a stolné počítače.
• Postupná degradácia: Je to opačná cesta. Najprv sa vytvorí stránka pre počítače a funkcie sa odstránia, kým sa nezíska verzia vhodná pre mobilné zariadenia.

Keďže je vždy jednoduchšie pridať ako odobrať, progresívny pokrok je trend, ktorý sa podarilo presadiť. B.ootstrap napríklad používa prístup „najskôr mobil“., to znamená, že základom dizajnu je vždy verzia, ktorá sa bude zobrazovať na najmenšej veľkosti obrazovky, a potom sa stanovia úpravy, ktoré sa budú robiť pri prechode na veľkosti, ktoré nasledujú.

Ďalšia výhoda používania Bootstrapu súvisí so skutočnosťou Google pri vyhľadávaní uprednostňuje stránky vhodné pre mobilné zariadenia.

Ďalším konceptom, ktorý musíme vziať do úvahy, je rozdiel medzi dizajnom frontendu a backendu. Predný dizajn sa stará o všetko, čo používateľ vidí, a o všetko, s čím interaguje. Backend zoskupuje, čo sa robí na serveri. Príkladom prvého je webový formulár. Zobrazenie série možností je zobrazené ako rozbaľovacia ponuka je dizajn frontendu, že vybraná možnosť je odoslaná poštou alebo pridaná do databázy je dizajn backendu.

Bootstrap je rámec, ktorý kombinuje prvky štýlu CSS a programovania Javascript na riadenie vykresľovania a poskytuje interaktivitu všetkým komponentom stránky vyvinutej v HTML5.

Medzi veci, ktoré môžeme ovládať pomocou Bootstrapu, patria:

• prístupnosť: Komponenty, ako sú ponuky alebo dialógové okná, sú kompatibilné s čítačkami obrazovky alebo vhodné na používanie osobami so zníženou pohyblivosťou.
• Tlačidlá: Vrátane taktov, štýlov, stavov a zoskupení.
• Formuláre:  Vrátane vykresľovania, typov ovládacích prvkov a overenia vstupu.
• Obraznosť: Ovláda pôvod, zarovnanie a veľkosť obrazovky vložených obrázkov.
• Navigačné prvky: Napríklad skryté bočné panely alebo vertikálne alebo horizontálne ponuky v závislosti od zariadenia.
• Typografia: Ovládajte, ako sa zobrazujú rôzne časti textu.
• Rozloženie: Úprava vykresľovania obsahu v závislosti od zariadenia

V ďalšom článku uvidíme niekoľko praktických príkladov jeho použitia.