Introducere în Bootstrap 4 Cheatsheet
Foaia de înșelare Bootstrap 4 a încorporat o revizuire majoră de la Bootstrap 3. Multe modificări s-au întâmplat la majoritatea componentelor care includ tabele, formulare, meniuri derulante, grile, navale etc. perioade de dezvoltare chiar și atunci când mențineți calitatea și coerența aplicației pe site. Foaia de înșelare Bootstrap 4 funcționează pe toate browserele moderne de deasupra Internet Explorer 9.
Cizmă 4
Bootstrap 4 este cea mai nouă și mai avansată versiune a bootstrap-ului. Este cel mai popular cadru pentru HTML, CSS și JavaScript fiind utilizat pentru a dezvolta aplicații responsive și bazate pe mobil. Bootstrap 4 ca și versiunile anterioare este gratuit și open-source. Nu mai avem nevoie să re-scriem și să re-proiectăm totul de la zero la zero pentru diferitele seturi de dispozitive. De asemenea, nu trebuie să renunțăm la câteva ore, încercând să remediem totul și să ne asigurăm că arată și funcționează corect pe diferite browsere, platforme unice și dispozitive.
Comenzi și descriere de pe Bootstrap 4 Cheatsheet
Unele comenzi importante Bootstrap 4 și descrierea lor sunt prezentate mai jos: -
| comenzi | Descriere |
| Container fix | Un container fix are o lățime fixă. Pe măsură ce browserul este redimensionat, lățimea sa rămâne aceeași până când se găsește punctul de întrerupere. |
| Container de lichide | Un container fluid se întinde până la întreaga lățime a afișajului disponibil. Se extinde și se contractă fluid, ceea ce înseamnă că se schimbă pe măsură ce browserul este redimensionat. |
| .Col- | Este pentru dispozitivele mici, lățimea ecranului este mai mică de 576px |
| .Col-SM | Este pentru dispozitive mici - lățimea ecranului rămâne egală sau mai mare de 576px |
| .Col-MD- | Este pentru dispozitivele medii - lățimea ecranului rămâne egală sau mai mare de 768px |
| .Col-lg- | Este pentru dispozitivele mari - lățimea ecranului este egală sau mai mare de 992px |
| .Col-XL- | Este destinat dispozitivelor xlarge - lățimea ecranului este egală sau mai mare de 1200px |
- | h1 Dimensiunea portbagajului cu 2.5rem = 40px h2 Dimensiunea portbagajului cu 2rem = 32px h3 Dimensiunea portbagajului cu 1, 75rem = 28px h4 Dimensiunea portbagajului cu 1.5rem = 24px h5 Dimensiunea portbagajului cu 1, 25rem = 20px h6 Dimensiunea portbagajului cu 1rem = 16px |
| Acest element de etichetă HTML oferă o culoare galbenă de fundal cu unele căptușeli | |
| Acest element de etichetă HTML oferă un fundal cu margine punctată. | |
|
| Clasa de adăugare cu
este utilizat pentru citarea blocurilor de conținut din sursă care sunt din exterior. |
| .font-greutate-bold | Pentru text cu caractere aldine |
| .font-italic | Pentru text italic |
| .font-greutate-lumină | Pentru text cu greutate ușoară |
| .font-greutate normala | Pentru text normal |
| .conduce | Face un paragraf vizibil să iasă în evidență |
| .mic | Indică un text mai mic, adică reduce dimensiunea fontului la 85% din dimensiunea părintelui său. |
| .text stânga | Indică faptul că textul este aliniat la stânga. |
| .text - * - stânga | Indică faptul că textul este aliniat la stânga pe ecranele de toate dimensiunile |
| .text-centru | Indică textul aliniat centrului |
| .text - * - Centru | Indică text aliniat la centru pe ecranele de toate dimensiunile |
| .text-dreapta | Indică textul aliniat la dreapta |
| .text - * - dreapta | Indică text aliniat la dreapta pe ecranele de toate dimensiunile |
| .text-justifică | Indică textul justificat |
| .text-monospace | Are text monospațiat |
| .text-nowrap | Indică pentru niciun text de învelire |
| .text-literă mică | Indică textul cu majuscule |
| .text-majuscule | Indică textul cu majuscule |
| .text-valorifica | Indică pentru text cu majuscule |
| .initialism | Afișează textul în interiorul unui element de etichetă HTML într-un font de dimensiuni mai mici. Îndepărtează stilul de listă implicit disponibil și marginea stângă de pe elementele din listele cuiburi |
| .masa | Clasa adaugă stilul de bază la masă. |
| .table-dungi | Clasa adaugă dungi de zebră în masă. |
| .table-mărginită | Clasa adaugă chenare pe toate părțile unui tabel și celule. |
| .table-planare | Clasa adaugă un efect de trecere, adică culoare de fundal gri pe rândurile de tabel disponibile. |
| .table-întuneric | Clasa adaugă un fundal negru la un tabel. |
Sfaturi și trucuri gratuite pentru utilizarea Bootstrap 4 Cheat sheet: -
Câteva sfaturi și trucuri interesante pentru a hack rapid caracteristicile bootstrap 4 cheat sheet și pentru a crea o aplicație uimitoare pe mobil sunt menționate în această secțiune: -
- Cu utilizarea. col- (punct de întrerupere) -push- (număr) sau când folosiți. clasele col- (punct de întrerupere) -pull- (număr) la coloane, secvența coloanelor specificate poate fi modificată.
- Pentru a ascunde rapid și ușor un element de pe dispozitivele xs, există un. clasa ascunsă-x, aceasta poate fi folosită pentru a ascunde.
- . clasa ascunsă (punct de pauză) poate fi folosită și la restul punctelor de întrerupere și atunci când este combinată, se poate realiza un scop ascuns, așa cum s-a menționat mai sus. Ex: - clase .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap este dotat cu 5 stiluri de butoane disponibile în mod implicit, acestea fiind implicit, primar, succes și pericol. Când un buton trebuie să fie schimbat pentru a-și micșora raza de bord sau căptușirea, cel mai bun mod este de a realiza acest lucru este de a suprascrie .btn
- Pentru a dezactiva radiourile și casetele de selectare, trebuie să adăugați o clasă dezactivată la un element părinte .checkboxor to.radio. apoi adăugați atributul dezactivat la intrarea specifică
- Pentru a dezactiva butoanele, adăugați atributul dezactivat la butoanele de etichetă HTML
Sau același lucru se poate face prin adăugarea clasei dezactivate la butoane.
- Pentru a centra cu ușurință un element de bloc pe orizontală, adăugând o clasă de bloc-centru la acesta trebuie să fie făcut, ca în.
- Dacă se obține rapid conținutul de linie centrală sau se realizează elemente de blocare în linie din interiorul unui div, adăugați clasa .text center la elementul său parent.
- De asemenea, se pot încorpora cu ușurință videoclipuri YouTube folosind clasa care răspunde încorporarii Bootstrap, care este un ajutor, clase. Clasa embed-responsive-16by9 sau embed-responsive-4by3 trebuie să fie alese pe baza raportului de aspect al videoclipului
Bootstrap 4 Cheat sheet - concluzie
Deasupra bootstrap 4 cheat sheet oferă o imagine a ceea ce este posibil cu bootstrap 4. Dar există un ghid mai complet disponibil cu mii de alți parametri și etichete. Este evident că informațiile despre toate nu pot fi furnizate într-un singur articol, fie că un dezvoltator trebuie să-și amintească toate etichetele și clasele pentru a face dezvoltare. Cea mai bună și recomandată abordare este de a menține astfel de foi de înșelare la îndemână, iar utilizatorul ar trebui să se refere la astfel de foi de fiecare dată când apare o nevoie. Acest lucru va asigura că toate lucrările sunt făcute în momentul în care este nevoie și va îmbunătăți înțelegerea și cunoașterea utilizatorului despre bootstrap 4 pe o perioadă.
Articol recomandat
Acesta a fost un ghid pentru foaia Cheat Bootstrap 4 aici am discutat conținutul și comanda, precum și sfaturi și trucuri gratuite ale foii Bootstrap 4 Cheat, puteți să vă uitați și la articolul următor pentru a afla mai multe -
- Ches Sheet CSS
- Diferențele Bootstrap și Jquery
- Ghid simplu și util pentru a înșela fișă SQL
- Fisa Cheat Ultimate pentru limbajul de programare C ++ (Noțiuni de bază)