Sadržaj
Bootstrap Ima dvije velike čvrste baze koje nam daju standardnu polaznu osnovu za različita rješenja web dizajna koja trebamo ili želimo učiniti, a to su Mreža i osnovni CSS, s ova dva alata možemo izgraditi veliku središnju bazu gdje možemo postavite ga na odmor sve različite elemente koji čine naše sučelje.Kao i sve baze, one same po sebi ne odrađuju ostatak konstrukcije, da bi se postigao veći stupanj sofisticiranosti i detalja potrebno je koristiti dodatne komponente koje se nalaze na našoj bazi i naravno na njihovu moć utječe čvrstoća. potonjeg.
U slučaju Bootstrap Imamo nekoliko komponenti koje nam pomažu da povećamo detalje naših dizajna, komponente koje se kreću od ikona, ploča, pa čak i zaglavlja. Elementi koji nam pomažu razlikovati i istaknuti našu aplikaciju od drugih.
Komponente u Bootstrap Mogu se koristiti na našim stranicama neovisno o ostatku, odnosno možemo generirati onoliko komponenti koliko nam je potrebno u jednom dokumentu, a da one nisu u sukobu s drugima.
Dodatno, osnovni stil prema zadanim postavkama već je unaprijed definiran, tako da možemo brzo i bez puno napora izgraditi našu aplikaciju, gdje na kraju možemo prilagoditi cijelu aplikaciju promjenom osnovnog stila za vlastite stilove.
Komponente mogu biti od CSS, JavaScript ili oboje, pa neki osim Osnovni CSS zahtijevat će knjižnice trećih strana kao što su jQuery, ovo se može činiti pomalo neugodnim, no stvarnost je da je implementacija toliko jednostavna da nećemo ni shvatiti da koristimo više stvari od onoga što je zadano Bootstrap.
Jedna od prvih komponenti koju moramo razumjeti su ikone, budući da pomoću ovih malih dijelova slike možemo natjerati korisnika da razumije funkcionalnost bilo kojeg dijela našeg dizajna, dakle kad vidimo ikonu velike x znamo da je to povezano sa zatvaranjem trenutnog odjeljka ili u slučaju da vidimo ikonu u obliku + znat ćemo da treba nešto dodati.
GlifikoniU Bootstrap postoji knjižnica ikona Glifikoni, vrlo popularan u web dizajnu i koji nam nudi praktički ikonu za svaku radnju koju možemo izvesti na web stranici, to nam ulaže mnogo posla jer ne moramo razmišljati o tome da tražimo nekoga za dizajn grafičkih komada koji služe ove svrhe.
Na sljedećoj slici možemo vidjeti ikone koje imamo izravno na web stranici Bootstrap:
POVEĆAJTE
Upotreba ovih ikona je vrlo jednostavna, samo moramo dodati razred glifikon do elementa HTML a zatim dodajte klasu odgovarajuće ikone s dostupnog popisa. Ikone se obično dodaju stavkama poput ili budući da na ovaj način pazimo da budu samo vizualni, dobivajući na taj način najbolji mogući rezultat. Pogledajmo onda u sljedećem kodu primjer kako se koristi ova komponenta u HTML.
Korištenje Glifikona u BootstrapuU ovaj smo kôd jednostavno smjestili dodatke iz naših knjižnica Bootstrap odgovarajući, dodajući jQuery kao knjižnica treće strane, a zatim dodajte knjižnicu js od Bootstrap, važno je održavati ovaj redoslijed budući da je js knjižnica Bootstrap potreba za jQuery a ako je uključen onda će nam dati pogrešku u implementaciji.
Uplatite
Pošta
Korisnici
Koš za smeće
Odjavi se
Zatim smo unutar našeg stvorili neke odjeljke u koje smo dodali GlifikoniZa naše potrebe, postavljanje ikona unutar oznake bilo je dovoljno. Ako izvršimo u svom pregledniku, dobit ćemo sljedeći rezultat:
Druga važna komponenta su navigacijske kartice, koje nam omogućuju organiziranje našeg sadržaja na istoj stranici, čime se izbjegava trošenje puno prostora i na taj način olakšava život korisniku jer ne moraju učiti veliki broj odjeljaka u našoj web aplikaciji.
Za korištenje ovih kartica potrebna nam je pomoć razreda nav, ovo što radi je uklanjanje zadanog stila HTML elemenata i njegovi sinovi , čime se olakšava uporaba i naknadna prilagodba našem dizajnu. Da bismo to koristili, jednostavno moramo dodati klase nav Y nav-tabovi na element i time ćemo dobiti odgovarajući rezultat.
Pogledajmo sljedeći kod gdje implementiramo ovo rješenje, kao i prethodni primjer moramo uključiti datoteke bootstrap.css, bootstrap-theme.css, bootstrap.js Y jquery.js, pogledajmo naš kod:
Korištenje Glifikona u Bootstrapu
- Sigurnost
- Zapisi
- Sadržaj
POVEĆAJTE
Padajući izbornikKomponenta Bootstrap tko se time bavi zove se Padajući izbornik i kao i prethodna komponenta primjenjuje se u elementu međutim, njegova je konstrukcija malo složenija, iako ne ide dalje od HTML stila rada.
Prvo moramo imati element koji je zaglavlje padajućeg izbornika, zatim moramo imati koji će sadržavati mogućnosti za prikaz. U tu ćemo svrhu preformulisati prethodni primjer kako bismo dodali padajući izbornik na kartici sadržaja, čime možemo bolje razumjeti naš primjer.
Da rezimiramo samo prikazat ćemo samo sadržaj datoteke jer će zaglavlje biti isto. Pogledajmo onda kôd za funkciju padajućeg izbornika:
- Sigurnost
- Zapisi
- Sadržaj
- Videozapisi
- Slike
- Audio
POVEĆAJTE
