Uvod v Bootstrap komponente
Prvotno se je imenoval Twitterjev načrt, to sta razvila Mark Otto in Jacob Thronton na Twitterju. Bootstrap je brezplačen CSS okvir, ki daje odzivnost spletnim stranem. Z odzivnostjo pomeni, da se različni elementi DOM ustrezno spreminjajo v velikost zaslona s spremembo velikosti zaslona, ne da bi pri tem ogrozili eleganco spletne strani, kot bi se sicer zgodilo tradicionalno pri metodah CSS v piklih ali odstotkih.
Temu pravimo tudi okvir "CSS za mobilne naprave", saj je zasnovan tako, da ima postavitev Grid CSS z definiranjem vrstic in stolpcev. Ta okvir vsebuje tudi komponente JavaScript, skupaj z razredi CSS. Če želite uporabiti ta okvir, morate obvezno povezati jQuery in JavaScript Framework za Bootstrap skupaj z drugimi datotekami CSS Bootstrap. Te datoteke CSS so na voljo za prenos in tudi v obliki CDN-jev (Network Delivery Network).
Različne komponente zagonske trakove:
Bootstrap je v paketu z desetinami komponent, ki jih je mogoče znova uporabiti za zagotavljanje dobre uporabniške izkušnje in interakcije uporabnikov na spletni strani, kot so navigacijske vrstice, pojavna okna, spustni zasloni, ikone, gumbi, vnaprej oblikovani obrazci in možnosti določitve velikosti različnih elementov DOM.
1) Glifikoni - To so ikone v obliki pisave, ki so na voljo v programu Bootstrap. Število jih je približno 200. Te glifone najdete na https://glyphicons.com.
Kako ga uporabiti?
Obstajajo glifoni, ki označujejo skoraj vsa dejanja, kot so zoom, urejanje, opozorilo, datoteka, brisanje itd., In so definirana v posameznem razredu. Torej morate uporabiti osnovni razred in posamezni razred, v idealnem primeru v razponskem elementu in uporabiti te glifone.
Sintaksa:
2) Spustni seznami - To so meniji na seznamu s seznamom povezav. Ti so z dodatkom JS bolj dinamični in jih najdete na http: // getbootstrap / javascript / # dropdownns
Kako ga uporabiti?
Uporabiti morate razred .dropdown, saj ima razred elementa pod njim sezname elementov z razredom .dropdown-menu.
Sintaksa:
3) Skupine gumbov - s to komponento Bootstrap lahko združite niz gumbov skupaj v vrsti, ki mejijo drug na drugega.
Kako ga uporabiti?
Določite elemente delitve z razredom .btn in jih vstavite z gumbom s .btn razredom. Pravilno
Napačno
4) Spustni gumbi - Ta komponenta se uporablja za uporabo gumba za sprožitev spustnega menija.
Sintaksa:
5) Vnosne skupine - To razširi razred nadzora obrazca in doda besedilo ali gumbe na obeh straneh vnosnega polja vhodnega elementa. Za uporabo teh vhodnih skupin morate uporabiti razred .input group z razredom .input-group-addon.
Sintaksa:
@
6) Navbar - Te komponente služijo kot navigacijske glave za vaše spletno mesto. Zloženi so, da se navpično razširijo s preklopnim menijem hamburgerjev v napravah manjših velikosti zaslona in postanejo vodoravni, ko se širina zaslona poveča.
Sintaksa:
7) Jumbotron - To je zagonska komponenta, ki se lahko razširi na celoten zaslon (ali ogledno polje) in prikaže nekaj ključnih vsebin.
Sintaksa:
8) Opozorila - To je komponenta zagonske različice z vtičnikom jQuery, ki zagotavlja kontekstna povratna sporočila, odvisno od dejanja uporabnika. V osnovi se uporablja za prikaz opozorilnih sporočil.
Sintaksa: …
9) Vrstico napredka - Ta komponenta se uporablja za prikaz slike o povratnih informacijah o napredku dela ali akcije z vrstico napredka.
Synatx:
Primer:
10) Značke - To je komponenta, ki označi nekaj podobnega kot neprebrane predmete, tako da elementu DOM dodate razred .badge, po možnosti razpon.
Sintaksa:
Sporočila 3
11) Stranstvo - Ta komponenta daje vašemu spletnemu mestu večstransko stran s stranicami, tako da lahko vsebina
biti razdeljen na več strani in enostavna navigacija. Običajno je element DOM za neurejene sezname opredeljen s tem razredom .pagination.
Sintaksa:
Kako bo to pomagalo v vaši karieri?
Vsa podjetja se zdaj osredotočajo na interakcijo uporabnikov in uporabniško izkušnjo (UI / UX). Ker velika večina prebivalstva uporablja ročne naprave, kot so tablični računalniki in pametni telefoni, ki se zelo razlikujejo glede na ločljivost pikslov in velikost zaslona. Zato je zelo pomembno, da ima prednji dizajn dovolj odziven, da se prilagodi poljubnemu zaslonu, ne da bi pri tem ogrozil eleganco spletne strani.
Torej, če bi bili usposobljeni v Bootstrapu, bi vam v tehnični karieri dodali vrednost, podjetja pa bi se veselila, če vas bodo zaposlili s čedno plačo. In ker je brezplačen in odprtokoden, je veliko razsežnosti, ki jih lahko prispevate kot razvijalec in naredite še boljše od tega, kar je danes.
Zaključek-
Okvir Bootstrap je zelo priročno orodje za vključitev odzivnosti na spletne strani. Komponente, razložene v tem spletnem dnevniku, so nekatere zelo razširjene, s pomočjo katerih lahko napišete manj kode za več funkcionalnosti in dodate več elegance spletni strani, ki jo gradite.
Priporočeni članki
To je vodnik za Bootstrap Components. Tukaj razpravljamo tudi o uvodu in različnih sestavnih delih zagonske trakove ter njeni skladnji. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -
- Kako namestiti Bootstrap
- Kotni proti Bootstrapu
- Bootstrap tečaj usposabljanja
- Vprašanja o intervjuju za začetno uporabo
- Kako uporabljati postavitev zagonske črpalke?
- Najboljših 5 vrst podaljška z vzorčno kodo