Uvod u Bootstrap 4 cheatsheet
Varalica Bootstrap 4 uključila je glavni remont iz Bootstrapa 3. Dosta se promjena dogodilo na većini komponenti koje uključuju tablice, obrasce, padajuće mreže, rešetke, navigacijske trake itd. Glavne prednosti okvira poput Bootstrap-a su u tome što mogu ubrzati vremena razvoja čak i kada se održava kvaliteta i dosljednost aplikacije na web mjestu. Bootstrap 4 varalica funkcionira na svim modernim preglednicima iznad Internet Explorera 9.
Početni kotač 4
Bootstrap 4 najnovija je i najnaprednija verzija dizalice. To je najpopularniji okvir za HTML, CSS i JavaScript koji se koristi za razvoj responzivnih i mobilnih aplikacija. Bootstrap 4 kao i ranije verzije je besplatan i s otvorenim kodom. Više ne trebamo ponovno pisati i ponovno dizajnirati sve od nule za različite skupove uređaja. Isto tako, ne trebamo odgađati nekoliko sati pokušavajući popraviti sve i osigurati da izgleda dobro i funkcionira na različitim preglednicima, jedinstvenim platformama i uređajima.
Naredbe i opis na Bootstrap 4 Cheatsheet-u
Neke važne naredbe Bootstrap 4, a njihov opis je dan u nastavku: -
| naredbe | Opis |
| Fiksni spremnik | Fiksni spremnik ima fiksnu širinu. Kad se promijeni veličina preglednika, njegova širina ostaje ista sve dok se ne nađe točka prijeloma. |
| Kontejner s tekućinom | Spremnik s tekućinom se proteže na cijelu širinu dostupnog prikaza. Prošire se i ugovara fluidno što znači da se mijenja kako se promijeni veličina preglednika. |
| .Col- | Nalazi se za ekstra male uređaje - širina zaslona je manja od 576px |
| .Col-sm- | Za male uređaje - širina zaslona ostaje jednaka ili veća od 576px |
| .Col-md- | Za srednje uređaje - širina zaslona ostaje jednaka ili veća od 768px |
| .Col-lg- | Za velike uređaje - širina zaslona jednaka je ili veća od 992px |
| .Col-XL | Za veće uređaje - širina zaslona jednaka je ili veća od 1200 px |
- | h1 Zaglavlje veličine bootstrap-a s 2, 5rem = 40px h2 Zaglavlje veličine bootstrap-a s 2rem = 32px h3 Zaglavlje veličine bootstrap-a s 1, 75rem = 28px h4 Zaglavlje veličine bootstrap-a s 1.5rem = 24px h5 Zaglavlje veličine bootstrap-a s 1, 25rem = 20px h6 Zaglavlje veličine bootstrap-a s 1rem = 16px |
| Ovaj element HTML oznake pruža žutu pozadinsku boju s ponekim paddingom | |
| Ovaj element HTML oznake pruža dno točkasto obrub. | |
|
| Klasa dodavanja sa
koristi se za citiranje blokova sadržaja iz izvora koji su izvana. |
| .font-težine podebljano | Za podebljani tekst |
| .font-kurzivu | Za ležeći tekst |
| .font težine svjetlosti | Za tekst male težine |
| .font težine normalne | Za normalan tekst |
| .voditi | Odjek čini vidljivo istaknutim |
| .mali | Označava manji tekst, odnosno smanjuje veličinu fonta na 85% veličine roditelja. |
| .text-lijevo | Označava da je tekst ulijevo poravnan. |
| .text - * - lijevo | Označava da je tekst poravnan ulijevo na svim zaslonima veličine |
| .text centar | Označava tekst poravnan u sredini |
| .text - * - centar | Označava tekst poravnan u sredini na svim zaslonima veličine |
| .text-desno | Označava za tekst usklađen udesno |
| .text - * - desno | Označava tekst poravnan udesno na svim ekranima veličine |
| .text-opravdati | Označava opravdan tekst |
| .text-monospace | Ima jednostarski tekst |
| .text-nowrap | Označava da nema izostavljenog teksta |
| .text-mala | Pokazuje za malo slovo teksta |
| .text-veliko | Pokazuje za velika slova |
| .text-iskoristiti | Označava velikim slovom teksta |
| .initialism | Prikazuje tekst unutar elementa HTML oznake fonta manjeg formata. Uklanja dostupni zadani stil popisa i lijevu marginu na stavkama stavki ugniježđenih popisa |
| .stol | Klasa dodaje osnovni stil stolu. |
| .table prugama | Razred dodaje stolu pruge zebre. |
| .table rubom | Klasa dodaje granice na svim stranama stola i ćelija. |
| .table-hover | Klasa dodaje efekt lebdenja, tj. Sivu boju pozadine na dostupnim redovima tablice. |
| .table-tamno | Razred dodaje crnu pozadinu tablici. |
Besplatni savjeti i trikovi upotrebe Bootstrap 4 varalice: -
U ovom su odjeljku spomenuti neki cool savjeti i trikovi za brzo hakiranje značajki varalice za pokretanje sustava 4 i stvaranje nevjerojatne aplikacije na mobilnom uređaju: -
- Uz upotrebu. col- (točka prekida) -push- (broj) ili pri korištenju. col- (breakpoint) -pull- (broj) klase na stupce, redoslijed navedenih stupaca može se mijenjati.
- Da biste brzo i jednostavno sakrili element samo na xs uređajima, postoji hidden-xs klase, ovo se može koristiti za skrivanje.
- , klasa skrivene (prekidne) točke može se koristiti i za ostale točke prijeloma, a kada se kombinira, može se postići skriveni opseg kao što je spomenuto gore. Primjer: - klase .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap dolazi s 5 zadanih dostupnih stilova tipki, a to su zadani, primarni, uspjeh i opasnost. Kada treba promijeniti gumb kako bi se smanjio njegov polumjer ili obrub, najbolji način je postići prebrisati .btn
- Da biste onemogućili radijske i potvrdne okvire, potrebno je dodati onemogućenu klasu roditeljskom .checkboxor to.radio elementu. zatim dodajte onemogućeni atribut specifičnom ulazu
- Da biste onemogućili gumbe, dodajte onemogućeni atribut gumbima HTML oznake
Ili se isto može učiniti pomoću dodavanja .disable klase tipkama.
- Za jednostavno centriranje blokovskog elementa vodoravno, dodavanje klase središnjeg bloka u njega treba biti izvedeno, kao u.
- Ako se želi postići središnji inline sadržaj ili se trebaju napraviti elementi in-block unutar diva, dodajte .text-center klasu u njegov nadređeni element.
- Jednostavno se mogu ugraditi YouTube videozapisi pomoću klase Bootstrap-a s ugrađivanjem koja je pomoćnik, časovi. Embed-respo-16by9 ili embed-respo-4by3 klasu treba odabrati na temelju omjera slike videozapisa
Bootstrap 4 Cheat sheet - zaključak
Iznad varalice bootstrap 4 pruža pogled na ono što je moguće uz pomoć dizalice 4. No, dostupan je i sveobuhvatniji vodič s tisućama drugih parametara i oznaka. Očito je da se podaci o svim ne mogu pružiti u jednom članku, niti programer treba pamtiti sve oznake i klase za razvoj. Najbolji i najpoželjniji pristup je takve listove držati pri ruci, a korisnik bi ih trebao uputiti kad god se ukaže potreba. Na taj način se osigurava da se sav posao obavlja u vrijeme potrebe i poboljšava se korisničko razumijevanje i znanje o početnoj traci 4 tijekom određenog razdoblja.
Preporučeni članak
Ovo je vodič za Bootstrap 4 Cheat sheet, ovdje smo razgovarali o sadržaju i naredbi, kao i besplatnim savjetima i trikovima Bootstrap 4 Cheat sheet-a. Također možete pogledati sljedeći članak kako biste saznali više -
- CSS Cheat Sheet
- Bootstrap vs Jquery razlike
- Jednostavan i koristan vodič za varanje listova SQL
- Ultimate cheat sheet za C ++ programski jezik (osnove)