Uvod u Bootstrap komponente
Izvorno nazvan kao nacrt na Twitteru, ovo su razvili Mark Otto i Jacob Thronton na Twitteru. Bootstrap je besplatni CSS okvir koji daje reakciju web stranicama. Odazivanjem, to znači da se različiti DOM elementi mijenjaju u skladu s promjenom veličine zaslona bez narušavanja elegancije web stranice kao što bi se inače tradicionalno događalo s CSS metodama za pikselo ili postotak.
To se također naziva i "mobilni prvi" CSS okvir jer je dizajniran za CSS Grid izgled definiranjem redova i stupaca. Ovaj okvir također sadrži JavaScript komponente zajedno sa CSS klasama. Kako biste koristili ovaj okvir, obavezno trebate povezati jQuery i JavaScript Framework za Bootstrap zajedno s ostalim Bootstrap CSS datotekama. Te CSS datoteke dostupne su za preuzimanje, kao i u obliku CDN-ova (Network Delivery Network).
Različite komponente bootstrap:
Bootstrap se isporučuje s desecima komponenti koje se mogu ponovo upotrijebiti za pružanje dobrog korisničkog iskustva i interakcije korisnika na web stranici poput navigacijskih traka, skočnih prozora, padajućih padajućih ikona, gumba, unaprijed dizajniranih obrazaca i mogućnosti određivanja veličine različitih DOM elemenata.
1) Glifikoni - ovo su ikone formatirane fonta koje su dostupne u programu Bootstrap. Njih je oko 200. Te glifone možete pronaći na https://glyphicons.com.
Kako ga koristiti?
Postoje glifoni koji označavaju gotovo sve radnje poput zumiranja, uređivanja, upozorenja, datoteke, brisanja itd., A definirane su u pojedinačnoj klasi. Dakle, trebate koristiti osnovnu klasu i individualnu klasu, idealno u rasponskom elementu i koristiti ove glifone.
Sintaksa:
2) Dropdownns - Ovo su popisni izbornici na popisu veza. Ovi dodaci su dinamičniji dodavanjem JS i mogu se pronaći na http: // getbootstrap / javascript / # dropdownns
Kako ga koristiti?
Morate koristiti klasu .dropdown jer klasa elementa sadrži stavke popisa pod sobom s izbornikom klase .dropdown.
Sintaksa:
3) Grupe gumba - Pomoću ove komponente Bootstrap možete grupirati skup gumba zajedno u nizu jedan pored drugog.
Kako ga koristiti?
Definirajte elemente podjele s .btn-group classom i gnijezdite te elemente gumbom s .btn klasom. ispravan
pogrešno
4) padajuće tipke - ova komponenta koristi se za korištenje gumba za aktiviranje padajućeg izbornika.
Sintaksa:
5) Unosne grupe - Ovo proširuje klasu kontrole oblika i dodaje tekst ili tipke na obje strane unosnog polja ulaznog elementa. Da biste mogli koristiti ove grupe unosa, trebate koristiti .input skupinu klase s .input-group-addon-razredom.
Sintaksa:
@
6) Navbar - Ove komponente služe kao zaglavlje za navigaciju vaše web stranice. Oni se sakupljaju kako bi se vertikalno proširili pomoću preklopnog izbornika hamburgera na uređajima manjih veličina zaslona i postali vodoravni kako se širina zaslona povećava.
Sintaksa:
7) Jumbotron - ovo je komponenta za pokretanje uređaja koja se može proširiti preko cijelog zaslona (ili prikaz) kako bi se prikazao neki ključni sadržaj.
Sintaksa:
8) Upozorenja - ovo je Bootstrap komponenta s jQuery dodatkom koji pruža kontekstualne povratne poruke ovisno o radnji korisnika. U osnovi se koristi za prikazivanje poruka upozorenja.
Sintaksa: …
9) Trake napretka - Ova se komponenta koristi da pruži vizualne podatke o povratnim informacijama o napretku rada ili akcije pomoću trake napretka.
Synatx:
Primjer:
10) Značke - Ovo je komponenta koja označava nešto poput nepročitanih stavki dodavanjem klase .badge u DOM element, po mogućnosti raspon.
Sintaksa:
Poruke 3
11) Paginacija - Ova komponenta daje vašoj web stranici više stranica sa stranicama tako da sadržaj može
biti podijeljen na više stranica i lako se kretati. Obično se element DOM za neuređene popise definira ovom vrstom .paginacije.
Sintaksa:
Kako će vam ovo pomoći u karijeri?
Sve tvrtke sada su usredotočene na interakciju s korisnicima i korisničko iskustvo (UI / UX). Jer velika većina stanovništva koristi ručne uređaje poput tableta i pametnih telefona koji se uvelike razlikuju s obzirom na njihovu rezoluciju piksela i veličinu zaslona. Zbog toga je vrlo važno imati prednji dizajn koji je dovoljno osjetljiv da se prilagodi bilo kojoj vrsti zaslona, a da ne ugrozi eleganciju web stranice.
Dakle, stručnost u Bootstrap-u dodala bi vam vrijednost u tehničkoj karijeri, a tvrtke bi se veselile što će vas zaposliti uz zgodnu plaću. Budući da je besplatan i s otvorenim kodom, ima puno opsega koji možete doprinijeti kao programeru i učiniti ga još boljim od onoga što je danas.
Zaključak-
Okvir za pokretanje bootstrap-a vrlo je zgodan alat za unošenje reakcija na web stranice. Komponente objašnjene na ovom blogu neke su od vrlo široko korištenih onih koje vam pomažu da napišete manje koda radi veće funkcionalnosti i dodate više elegancije web stranici koju gradite.
Preporučeni članci
Ovo je bio vodič za Bootstrap Components. Ovdje također raspravljamo o uvodu i različitim komponentama početnog pokretanja, zajedno sa njegovom sintaksom. Možete i proći naše druge predložene članke da biste saznali više -
- Kako instalirati Bootstrap
- Kutni vs Bootstrap
- Bootstrap Training Training
- Pitanja o intervjuu za pokretanje
- Kako koristiti Izgled pokretanja?
- Top 5 vrsta boostrapa s uzorkom koda