Introduktion til Bootstrap 4 Cheatsheet
Bootstrap 4 snyderi har indarbejdet en større eftersyn fra Bootstrap 3. Der er sket mange ændringer for de fleste af de komponenter, der inkluderer tabeller, former, dropdowns, gitter, navbars osv. Store fordele ved rammer som Bootstrap er, at de kan fremskynde udviklingstider, selv når kvaliteten og konsistensen af applikationen opretholdes på tværs af webstedet. Bootstrap 4 snyderark fungerer på alle moderne browsere over Internet Explorer 9.
Bootstrap 4
Bootstrap 4 er den nyeste og mest avancerede version af bootstrap. Det er den mest populære ramme for HTML, CSS og JavaScript, der bruges til at udvikle responsive og mobilbaserede applikationer. Bootstrap 4 ligesom tidligere versioner er gratis og open source. Vi behøver ikke længere at omskrive og omdesigne alt fra jordnul til de forskellige apparater. Og vi behøver ikke at talje flere timer med at prøve at ordne alt og sikre, at det ser ud og fungerer på tværs af forskellige browsere, unikke platforme og enheder.
Kommandoer og beskrivelse på Bootstrap 4 Cheatsheet
Nogle vigtige Bootstrap 4-kommandoer og deres beskrivelse findes nedenfor: -
| kommandoer | Beskrivelse |
| Fast container | En fast beholder har en fast bredde. Når størrelsen på browseren ændres, forbliver dens bredde den samme, indtil dens brudpoint findes. |
| Flydende beholder | En væskebeholder spænder til den fulde bredde af det tilgængelige visningsport. Det udvides og kontraheres flydende, hvilket betyder, at det ændrer sig, når browseren ændres til størrelse. |
| .Col- | Det er til ekstra små enheder - skærmbredde er mindre end 576px |
| .Col-SM | Det er til små enheder - skærmbredde forbliver lig med eller større end 576px |
| .Col-MD- | Det er til mellemstore enheder - skærmbredde forbliver lig med eller større end 768px |
| .Col-Lg- | Det er til store enheder - skærmbredden er lig med eller større end 992px |
| .Col-XL- | Det er til xlarge-enheder - skærmbredde er lig med eller større end 1200px |
- | h1 Størrelses overskrift med 2, 5rem = 40px h2 Størrelses overskrift med 2rem = 32px h3 Størrelsesstørrelse med 1, 75rem = 28px h4 Størrelses overskrift med 1, 5rem = 24px h5 Størrelse på bootstrap-størrelse med 1, 25rem = 20px h6 Størrelses overskrift med 1rem = 16px |
| Dette HTML-tagelement giver en gul baggrundsfarve med noget polstring | |
| Dette HTML-tagelement giver en prikket kantbund. | |
|
| Tilføj klassen med
bruges til at citere blokke med indhold fra kilden, der er udenfor. |
| .font-vægt-fed | Til fed tekst |
| .font-italic | Til kursiv tekst |
| .font-vægt-lys | For letvægts tekst |
| .font-vægt-normal | For Normal tekst |
| .at føre | Det gør, at et afsnit synligt skiller sig ud |
| .lille | Det angiver mindre tekst, dvs. den reducerer skrifttypestørrelsen til 85% af størrelsen på dets overordnede. |
| .text-venstre | Det angiver, at teksten er til venstrejusteret. |
| .text - * - venstre | Det angiver, at teksten er venstrejusteret på alle størrelsesskærme |
| .text-center | Det angiver for centrum-justeret tekst |
| .text - * - center | Det indikerer center-justeret tekst på alle størrelsesskærme |
| .text-højre | Det angiver for højrejusteret tekst |
| .text - * - højre | Det angiver højrejusteret tekst på alle størrelsesskærme |
| .text-retfærdiggøre | Det angiver for berettiget tekst |
| .text-monospace | Det har en tekst med monospacitet |
| .text-nowrap | Det angiver ingen indpakningstekst |
| .text-små bogstaver | Det angiver tekst med mindre cases |
| .text-store bogstaver | Det angiver for store bogstaver |
| .text-kapitalisere | Det angiver for aktiveret tekst |
| .initialism | Det viser teksten inde i et HTML-tagelement i en skrifttype i mindre størrelse. Det fjerner tilgængelig standardlistestil og venstre margen på listeposter, der er indlejrede lister |
| .bord | Klassen tilføjer grundlæggende styling til bordet. |
| .table-stribet | Klassen tilføjer zebra-striber til bordet. |
| .table-omkranset | Klassen tilføjer grænser på alle sider af et bord og celler. |
| .table-hover | Klassen tilføjer en sveveeffekt, dvs. grå baggrundsfarve på tilgængelige bordrader. |
| .table-mørke | Klassen tilføjer en sort baggrund til et bord. |
Gratis tip og tricks ved brug af Bootstrap 4 snyderi: -
Nogle seje tip og tricks til hurtigt at hacke funktionerne i bootstrap 4 snyderi og skabe en fantastisk app på mobil er nævnt i dette afsnit: -
- Med brugen. col- (breakpoint) -push- (nummer) eller ved brug. col- (breakpoint) -pull- (number) klasser til kolonnerne, sekvensen for de specificerede kolonner kan ændres.
- For hurtigt og nemt at skjule et element fra kun på xs-enheder, er der en. skjult-xs klasse, dette kan bruges til at skjule.
- . skjult- (breakpoint) -klasse kan også bruges til resten af breakpoints, og når det kombineres, kan skjult omfang som nævnt ovenfor opnås. Eks: - klasser. Skjult-LG, . Skjult-MD, . Skjult-sm.
- Bootstrap leveres med 5 tilgængelige standard knapperformater. Disse er standard, primær, succes og fare. Når en knap skal ændres for at reducere sin grænseradius eller polstring, er den bedste måde at opnå dette ved at overskrive .btn
- For at deaktivere radioer og afkrydsningsfelter skal man tilføje deaktiveret klasse til et overordnet .checkbox eller to.radio-element. tilføj derefter deaktiveret attribut til det specifikke input
- For at deaktivere knapper skal du tilføje deaktiveret attribut til HTML-tagknapperne
Eller det samme kan gøres via tilføj .deaktiveret klasse til knapper.
- For let at centrere et blokelement horisontalt, skal det tilføjes en centerblokklasse, som i.
- Hvis der hurtigt skal opnås center inline-indhold, eller der skal udføres inline-block-elementer i en div, skal du tilføje .text-center-klasse til dets overordnede element.
- Man kan også nemt integrere YouTube-videoer ved hjælp af Bootstraps indlejringsklasse, som er en hjælper, klasser. embed-responsive-16by9 eller embed-responsive-4by3 klasse skal vælges baseret på videoens billedformat
Bootstrap 4 Cheat ark - konklusion
Ovenfor bootstrap 4 snyderark giver et glimt af, hvad der er muligt med bootstrap 4. Men der er en mere omfattende guide tilgængelig med tusinder af andre parametre og tags. Det er åbenlyst, at oplysninger om alle ikke kan leveres i en enkelt artikel, enten behøver en udvikler at huske alle tags og klasser for at kunne udvikle sig. Den bedste og mest anbefalede fremgangsmåde er at holde sådanne snyder ark handy, og brugeren bør henvise til sådanne ark, når der opstår et behov. Dette skal sikre, at alt jobbet udføres på behovstidspunktet og skal forbedre brugerens forståelse og viden om bootstrap 4 over en periode.
Anbefalet artikel
Dette har været en guide til Bootstrap 4 Cheat ark her, vi har diskuteret indhold og kommando samt gratis tip og tricks fra Bootstrap 4 Cheat ark. Du kan også se på følgende artikel for at lære mere -
- Cheat Sheet CSS
- Bootstrap vs Jquery Differences
- Enkel og nyttig vejledning til at snyde ark SQL
- Ultimate snyderi til C ++ programmeringssprog (grundlæggende)