Použitie Bootstrap kontajnera poskytne používateľovi silné základné miesto. A to, čo naozaj pôsobí, je široká škála komponentov, ktoré sa dajú do stránky pridať. Pretože Bootstrap už má zabudované CSS a javascript, sú vyvinuté komponenty a funkčné. Samozrejme, používateľ ich môže ďalej upravovať tak, aby prispôsobili stránky podľa vašich predstáv.

Princíp siete

Táto sada nástrojov na vytváranie webových stránok a webových aplikácií je založená na správnom rozložení komponentov na zobrazenie na rôznych obrazovkách. Systém mriežky Bootstrap kontajnera pozostáva z kontajnerov, riadkov a stĺpcov, ktoré sa používajú na konkrétne rozloženie lokality. Bootstrap kontajnery sa používajú na určenie šírky rozloženia. Prvky sa pridávajú do kontajnerov a ovplyvňujú ich šírku. Je to prvok s triedou = "kontajner" a ovplyvňuje všetky prvky v ňom.


Kontajnery majú 15 pixlov, ktoré zjemňujú pohľad od konca stránky. Linky a stĺpce sa pridávajú do kontajnerov s pevnou veľkosťou predvolenej šírky kontajnera Bootstrap, ktorá sa líši v závislosti od veľkosti prehliadača. Šírka zariadenia je uvedená v nasledujúcej tabuľke:

Pozri šírku zariadenia



Šírka nádoby


Auto



768px - 991 px


750 px
)
992px - 119px



970 px

1200 px and higher
1170 px

Pravidlá siete:

Stĺpce by mali byťpriamy dieťa element linky.

​​

Linky sa používajú iba na ukladanie stĺpcov a nič iné.

Linky by sa mali umiestniť do kontajnera.

Tieto pravidlá sú veľmi dôležité. Linky a stĺpce vždy pracujú spoločne a používateľ by nemal používať jeden bez druhého.


Najprv sa to môže zdať komplikované, ale je to naozaj jednoduché, stačí pochopiť, ako Grid funguje. Ak používatelia nechcú, aby sa kontajnery menili v pevnej šírke, môžete namiesto triedy = "kontajner" použiť triedu = "kontajner-kvapalina". To spôsobí, že kontajnery sa vždy zhodujú s kontajnerom Bootstrap na celú šírku obrazovky a zmenia veľkosť pevnej šírky. Systém mriežky umožňuje až 12 stĺpcov na stránku. Môžu byť použité samostatne alebo zoskupené. Ak chcete zoskupiť stĺpce dohromady, musíte vytvoriť riadok, pre ktorý pridajte div s triedou = "riadok", ktorý obsahuje kód stĺpca.

Nastavenie intervalu

Aby ste mali elegantný tvar, musíte najprv pochopiť, ako Bootstrap nastavuje interval. Pre všetky formy musíte umiestniť štítok a riadiaci prvok do triedy = "form-group". Ovládacie prvky a štítky v štýle intervalov. Musia byť nutne v ich vlastnej triede. Trieda riadenia formulárov nastaví šírku kontajnera Bootstrap na 100%, núti ho pokryť šírku formulára a zmeniť jeho veľkosť pomocou okna. Táto vlastnosť sa používa na zadávanie a výber ovládacích prvkov. Zvolená kontrola bude teda naformátovaná s onriadenie formulára a bude vyzerať ako voľba s triedou riadenia formulára alebo bez nej a riadenie vstupu bude naformátované pridaním kontrolného formulára.

Ovládacie prvky

Ovládacie prvky, ako sú textové polia, začiarkavacie políčka, sú časti, ktoré možno ľahko pridať do formulára. Prihlásiť sa sú polia, v ktorých používateľ môže vložiť text. Toto je základný princíp pre zadanie Bootstrap kontajnera pomocou atribútu HTML5 textu. Typ oznamuje vzhľad vstupu. Náplň definuje text, ktorý sa zobrazí vo vstupnom poli. Tieto typy možno deklarovať pridaním na vstup. Ak chcete pridať e-mail, zmeňte ho na typ = "email". Je potrebné mať na pamäti, že musíte povoliť vstupný typ tak, aby bol riadok správne naformátovaný. Ovládanie oblasti textu je oblasť, ktorá vám umožňuje použiť veľké množstvo textu, napríklad pre sekciu komentárov. Keď pridáte textovú oblasť, môžete ju upraviť tak, že vyhlasujete, koľko riadkov chcete zachytiť. Keďže kontajner Bootstrap je postavený na riadkoch a stĺpcoch, môžete zvýšiť alebo znížiť počet riadkov zmenšenú alebo zmenšenú. Začiarkavacie políčka umožňujú používateľom vybrať niekoľko možností. Štandardne sú začiarkavacie polia zobrazené zvisle. Môžete však zmeniť začiarkavacie políčka zobraziť horizontálne zmenou typu type = "checkbox-inline". Inline fonty sú konfigurované inak ako základné. Vo vstavanom prvku vlajky je trieda priradená = "checkbox-inline". Ak sa však pozriete na základný kontrolný kód, môžete vidieťže trieda = "zaškrtávacie políčko" je deklarované v prvku, nie v prvku.
Spínač je podobný značke. Súčasne môže byť vybraný len jeden spínač, zatiaľ čo samotné vlajky môžu mať niekoľko výberov. Podobne ako pri príznakoch sa vertikálne prepínače zobrazujú ako predvolené, hoci môžete tiež zmeniť kód na zobrazenie a vodorovne.

Druhy nakladacích formulárov

Existuje niekoľko typov foriem: základný, vstavaný a horizontálny. Každý z nich sa odlišuje svojou vlastnou cestou. Vstavané majú komponenty nazývané ovládacie prvky, vertikálne zoradené. Pre horizontálne tvary sú ovládacie prvky konfigurované horizontálne. Hlavná forma pochádza z globálneho štýlu rozloženia. Ak chcete vytvoriť základný formulár, stačí vytvoriť formulár v jazyku HTML s prvkom

a potom pridať ovládacie prvky Bootstrap do značiek

. Ďalšie dva typy formulárov používajú triedy na ich rozlíšenie. Ak trieda nie je zadaná, predvolený formulár zodpovedá základnej. Ak chcete vytvoriť vstavaný formulár, musíte pridať prvok class = "form-inline"

. Automaticky nastaví ovládače tvaru vertikálne. Rovnako ako vo forme inline, horizontálna forma sa získava pridaním triedy = "forma-horizontálna" k prvku. Automaticky nastaví ovládacie prvky horizontálne.

Nastavenie riadkov a stĺpcov

Riadky pokrývajú šírku bootstrapu kontajnera. Majú zápornú 15-pixelovú zásobu na konci, nainštalovanú kontajnerom. To je spôsobené tým, že každá z nich má svoj vlastný 15 pixelovktorý nahrádza značku kontajnera. Stĺpce zarovnané vedľa seba budú mať 15-násobnú hranu, čo vedie k 30-pixelovému okraju medzi dvomi stĺpcami.

Linky majú registráciu -15 px, ktorá zruší pridaním 15 px kontajnera. Obsah v stĺpci bude závisieť od poľa 15 pixelov stĺpca. Stĺpce majú registráciu 15 pixelov. Stĺpce vedľa seba budú mať 15 pixelov, čím sa vytvorí vyrovnávacia pamäť 30 px. Nahraďte predponu a číslo stĺpca s prevládajúcou veľkosťou a počtom stĺpcov. Predpony určujú, ktorému zariadeniu je priradený stĺpec Bootstrap 4 a výška kontajnera. Napríklad xs je určený pre malé obrazovky, ako sú telefóny.

Prefix







xs
)

Keď je stĺpec zadaný s prefixom pre menšie zariadenie, zobrazí sa na väčších zariadeniach podobným spôsobom. Inými slovami, stĺpec, ktorý je definovaný ako sm, bude fungovať pre zariadenia s veľkosťou tabliet alebo viac. Výhody použitia stĺpcov:

Vytvorte horizontálne úseky z výrezu.

Môžu mať rôzne šírky.

Môže sa líšiť v šírke pri rôznych šírkach obrazovky.

Možnosť stohovania vodorovne zľava doprava, potom vertikálne hore a dole.

Môže zmeniť pozíciu (usporiadanie) bratov a sestier v tom istom riadku.

Majú rovnakú výšku ako ostatní bratia a sestry v jednej línii.

Môže "rásť" alebo "stlačiť" na šírku.

Môže sa automaticky "zabaliť" alebo"Vypustite" vertikálne podľa potreby alebo na rôznych šírkach obrazovky.

Môže obsahovať viac riadkov & amp; Stĺpce hniezdenia.

Aktualizácia štruktúry css

Po mnohých rokoch čakania bol Bootstrap 4 prepustený v januári 2018. Bootstrap bola prvou rozšírenou štruktúrou css. Nová verzia programu je založená na tomto úspešnom základe a má mnoho vylepšení, ktoré uľahčujú používanie mriežok. Bootstrap 4 je OG vhodných usporiadaní. Nový konfiguračný súbor angular.json má úplne inú štruktúru ako pôvodný angular-cli.json.
Pokiaľ má používateľ v úmysle zamerať sa na používanie mriežky na vytvorenie flexibilných rozvrhnutí v aplikáciách s uhlom, potrebuje iba balíky bootstrap-grid a bootstrap-reboot. Súbory Bootstrap kontajnera CSS môžete pridať priamo do vlastnosti "štýly" angular.json. Importovanie mriežky do hlavného súboru style.scss má pred importom do súboru angular.json jednu dôležitú výhodu. Umožňuje upraviť ľubovoľnú premennú používanú štýlmi Bootstrap. V praxi môže byť užitočné vytvoriť súbor styles-variables.scss vedľa štýlu styles.scss v priečinku src s citlivými zarážkovými bodmi definovanými v predvolenom nastavení v Bootstrap. Použitie štýlu-variables.scss umožňuje prepísať predvolenú mriežku a implementovať vlastné štýly. Preto ho môžete importovať do prvého riadka - styles.scss, ktorý bude použitý s programom Bootstrap, ale aj v každom inom súbore štýlov komponentov pre konzistentnú implementáciu selektívnej odpovede.

Pokyny pre začiatočníkov