Úvod do komponentov Bootstrap
Pôvodne sa to nazývalo Twitter Twitter. Tento vývoj vyvinuli Mark Otto a Jacob Thronton na Twitteri. Bootstrap je bezplatný rámec CSS, ktorý dodáva webovým stránkam citlivosť. Vďaka reakcii to znamená, že rôzne prvky DOM sa menia podľa toho, ako sa mení veľkosť obrazovky, bez toho, aby bola narušená elegancia webovej stránky, pretože by sa to inak stalo tradične pomocou metód CSS v pixloch alebo percentách.
Nazýva sa to aj rámec CSS typu Mobile-first, pretože je navrhnutý tak, aby mal rozloženie CSS Grid definovaním riadkov a stĺpcov. Tento rámec obsahuje aj komponenty jazyka JavaScript spolu s triedami CSS. Aby ste mohli využívať tento rámec, musíte povinne prepojiť jQuery a JavaScript Framework pre Bootstrap spolu s ostatnými súbormi Bootstrap CSS. Tieto súbory CSS sú k dispozícii na stiahnutie, ako aj vo forme CDN (Network Delivery Network).
Rôzne komponenty bootovacieho systému:
Bootstrap je dodávaný s desiatkami komponentov, ktoré je možné opakovane použiť na zaistenie dobrého užívateľského komfortu a používateľských interakcií na webovej stránke, ako sú navigačné panely, kontextové okná, rozbaľovacie zoznamy, ikony, tlačidlá, vopred navrhnuté formuláre a tiež možnosti veľkosti pre rôzne prvky DOM.
1) Glyphicons - Jedná sa o ikony formátované písmo, ktoré sú k dispozícii v Bootstrap. Ich počet je asi 200. Tieto glyfikóny nájdete na adrese https://glyphicons.com.
Ako sa to používa?
Existujú glyfikóny, ktoré označujú takmer všetky akcie, ako napríklad zväčšenie, úprava, varovanie, súbor, odstránenie atď. A sú definované v samostatnej triede. Takže musíte použiť základnú triedu a individuálnu triedu, ideálne v prvku rozpätia a používať tieto glyfikóny.
syntaxe:
2) Rozbaľovacie zoznamy - Toto sú zoznamy prepínaných zoznamov so zoznamom odkazov. Tieto sú dynamickejšie doplnkom JS a nájdete ich na http: // getbootstrap / javascript / # dropdowns
Ako sa to používa?
Musíte použiť triedu .dropdown, pretože trieda prvku obsahuje položky zoznamu pod ňou .dropdown-menu triedy.
syntaxe:
3) Skupiny tlačidiel - S týmto komponentom Bootstrap môžete zoskupiť skupinu tlačidiel do série vedľa seba.
Ako sa to používa?
Definujte prvky delenia pomocou triedy .btn-group a vnorte tieto prvky pomocou tlačidla s triedou .btn. korektné
zle
4) Rozbaľovacie zoznamy tlačidiel - Táto súčasť sa používa na použitie gombíkového prvku na spustenie rozbaľovacej ponuky.
syntaxe:
5) Skupiny vstupu - rozširuje triedu riadenia formulárov a pridáva text alebo tlačidlá na oboch stranách vstupného poľa vstupného prvku. Aby ste mohli používať tieto vstupné skupiny, musíte použiť triedu .input-group s triedou .input-group-addon.
syntaxe:
@
6) Navbar - tieto komponenty slúžia ako navigačné hlavičky pre vaše webové stránky. Zbalia sa, aby sa zvislo roztiahli pomocou prepínacej ponuky hamburgerov v zariadeniach s menšou veľkosťou obrazovky a pri zväčšovaní šírky obrazovky sa stávajú vodorovnými.
syntaxe:
7) Jumbotron - Jedná sa o bootstrap komponent, ktorý sa môže rozšíriť po celej obrazovke (alebo výreze) a zobraziť tak nejaký kľúčový obsah.
syntaxe:
8) Upozornenia - Toto je komponent Bootstrap s doplnkom jQuery, ktorý poskytuje kontextové správy so spätnou väzbou v závislosti od akcie používateľa. V zásade sa používa na zobrazenie výstražných správ.
Syntax: …
9) Indikátory priebehu - táto zložka sa používa na poskytovanie vizuálnych údajov o spätnej väzbe na postup práce alebo akcie pomocou ukazovateľa priebehu.
Synatx:
Príklad:
10) Odznaky - Toto je komponent na zvýraznenie niečoho ako neprečítané položky pridaním triedy .badge do prvku DOM, pokiaľ možno do rozsahu.
syntaxe:
Správy 3
11) Paginácia - táto súčasť poskytuje stránkam stránkovanie na viacerých stránkach tak, aby obsah mohol
byť rozdelený do viacerých stránok a pohodlne sa pohybovať. Element DOM pre neusporiadané zoznamy sa obvykle definuje pomocou tejto triedy .paginácie.
syntaxe:
Ako to pomôže vo vašej kariére?
Všetky podniky sa teraz zameriavajú na interakciu a skúsenosti používateľov (UI / UX). Pretože drvivá väčšina populácie používa vreckové zariadenia, ako sú tablety a smartfóny, ktoré sa značne líšia z hľadiska rozlíšenia pixelov a veľkosti obrazovky. Preto je skutočne dôležité mať predný dizajn, ktorý je dostatočne citlivý na to, aby sa prispôsobil akémukoľvek druhu obrazovky bez toho, aby ohrozil eleganciu webovej stránky.
Takže skúsenosť v spoločnosti Bootstrap by pre vás znamenala pridanú hodnotu v technickej kariére a spoločnosti by sa tešili, že vás nájdu peknou výplatou. A pretože je to bezplatný a otvorený zdroj, existuje veľa možností, ako prispievať ako vývojár a urobiť ho ešte lepším ako je dnes.
Conclusion-
Rámec Bootstrap je veľmi užitočným nástrojom na reagovanie na webové stránky. Komponenty vysvetlené v tomto blogu sú niektoré z najčastejšie používaných, ktoré vám pomôžu napísať menej kódu pre väčšiu funkčnosť a dodajú webovej stránke, ktorú vytvárate, väčšiu eleganciu.
Odporúčané články
Toto bol sprievodca komponentmi Bootstrap. Tu diskutujeme aj úvod a rôzne komponenty bootstrapu spolu s jeho syntaxou. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
- Ako nainštalovať Bootstrap
- Uhlové vs Bootstrap
- Tréningový kurz Bootstrap
- Otázky týkajúce sa rozhovoru pri zavádzaní systému Bootstrap
- Ako používať rozloženie zavádzacieho systému?
- Top 5 typov podprsenky s ukážkovým kódom