Introduksjon til Bootstrap 4 Cheatsheet
Bootstrap 4 jukseark har innarbeidet en større overhaling fra Bootstrap 3. Det har skjedd mye forandringer for de fleste komponentene som inkluderer tabeller, skjemaer, nedtrekk, rister, navbars, etc. Store fordeler med rammer som Bootstrap er at de kan øke hastigheten utviklingstider selv når du opprettholder kvaliteten og konsistensen av applikasjonen på hele nettstedet. Bootstrap 4 jukseark fungerer på alle moderne nettlesere over internet explorer 9.
Bootstrap 4
Bootstrap 4 er den nyeste og mest avanserte versjonen av bootstrap. Det er det mest populære rammeverket for HTML, CSS og JavaScript som brukes til å utvikle responsive og mobilbaserte applikasjoner. Bootstrap 4 som tidligere versjoner er gratis og åpen kildekode. Vi trenger ikke lenger å skrive om og designe alt fra bakkenull for de forskjellige enhetene. Og heller ikke, vi trenger ikke midje i flere timer for å prøve å fikse alt og sikre at det ser ut og fungerer rett over forskjellige nettlesere, unike plattformer og enheter.
Kommandoer og beskrivelse på Bootstrap 4 Cheatsheet
Noen viktige Bootstrap 4-kommandoer og beskrivelsen deres er gitt nedenfor: -
| kommandoer | Beskrivelse |
| Fast beholder | En fast container har fast bredde. Når nettleserens størrelse endres, forblir bredden den samme til det blir funnet bruddpunkt. |
| Væskebeholder | En væskebeholder spenner til hele bredden av det tilgjengelige utsiktsområdet. Den utvides og trekker seg sammen flytende, noe som betyr at den endres når nettleseren endres. |
| .Col- | Det er for ekstra små enheter - skjermbredden er mindre enn 576 pk |
| .Col-SM- | Det er for små enheter - skjermbredden forblir lik eller større enn 576 px |
| .Col-MD- | Det er for mellomstore enheter - skjermbredden forblir lik eller større enn 768px |
| .Col-lg- | Det er for store enheter - skjermbredden blir lik eller større enn 992px |
| .Col-XL- | Det er for xlarge-enheter - skjermbredden er lik eller større enn 1200px |
- | h1 Størrelsesstørrelse med 2, 5rem = 40px h2 Størrelsesstørrelse med 2rem = 32px h3 Størrelsesstørrelse med 1, 75rem = 28px h4 Størrelse på bootstrap-størrelse med 1, 5rem = 24px h5 Størrelse på bootstrap-størrelse med 1, 25rem = 20px h6 Størrelse på bootstrap-størrelse med 1rem = 16px |
| Dette HTML-tagelementet gir en gul bakgrunnsfarge med litt polstring | |
| Dette HTML-tagelementet gir en stiplet kantlinje. | |
|
| Tilleggsklassen med
brukes til å sitere blokker med innhold fra kilden som er utenfra. |
| .font-vekt-bold | For fet tekst |
| .font-kursiv | For kursiv tekst |
| .font-vekt-light | For tekst i lett vekt |
| .font-vekt-normal | For normal tekst |
| .lede | Det gjør at et avsnitt synlig skiller seg ut |
| .liten | Den indikerer mindre tekst, dvs. at den reduserer skriftstørrelsen til 85% av størrelsen på foreldren. |
| .text-venstre | Det indikerer at teksten er til venstrejustert. |
| .text - * - venstre | Det indikerer at teksten er venstrejustert på alle størrelser |
| .text-senter | Det indikerer for midtjustert tekst |
| .text - * - sentrum | Det indikerer midtjustert tekst på alle størrelser |
| .text høyre | Det indikerer for rettjustert tekst |
| .text - * - høyre | Det indikerer rettjustert tekst på alle størrelser |
| .text-rettferdig | Det indikerer for berettiget tekst |
| .text-monospace | Det har en tekst med monospace |
| .text-NOWRAP | Det indikerer for ingen innpakningstekst |
| .text-små bokstaver | Det indikerer for tekst med små bokstaver |
| .text-store bokstaver | Det indikerer for store bokstaver |
| .text-kapital | Det indikerer for bokstavtekst |
| .initialism | Den viser teksten i et HTML-tagelement i en mindre størrelse skrift. Den fjerner tilgjengelig standard listestil og venstre marg på listeartikler som er nestede lister |
| .bord | Klassen legger til grunnleggende styling på bordet. |
| .table-stripete | Klassen legger sebra-striper til bordet. |
| .table-grenser | Klassen legger til grenser på alle sider av et bord og celler. |
| .table-hover | Klassen legger til en sveveeffekt, dvs. grå bakgrunnsfarge på tilgjengelige tabellrader. |
| .table-dark | Klassen legger til en svart bakgrunn på et bord. |
Gratis tips og triks for bruk av Bootstrap 4 Cheat ark: -
Noen kule tips og triks for raskt å hacke funksjonene i bootstrap 4 jukseark og lage en fantastisk app på mobil er nevnt i denne delen: -
- Med bruken. col- (breakpoint) -push- (nummer) eller når du bruker. col- (breakpoint) -pull- (number) klasser til kolonnene, sekvensen til de spesifiserte kolonnene kan endres.
- For å raskt og enkelt skjule et element fra kun på xs-enheter, er det en. skjult-xs klasse, kan dette brukes til å skjule.
- . skjult (breakpoint) klasse kan brukes til resten av breakpoints også, og når det kombineres, kan skjult omfang som nevnt ovenfor oppnås. Eks: - klasser. Skjult-LG, . Skjult-MD, . Skjult-sm.
- Bootstrap har fem standard tilgjengelige knappestiler. Disse er standard, primær, suksess og fare. Når en knapp må endres for å redusere grensradius eller polstring, er den beste måten å oppnå dette å overskrive .btn
- For å deaktivere radioer og avmerkingsbokser, må man legge til deaktivert klasse i et overordnet .sjekkboks eller til.radioelement. legg deretter til deaktivert attributt til den spesifikke inngangen
- Hvis du vil deaktivere knapper, legger du til deaktivert attributt til HTML-taggknappene
Eller det samme kan gjøres ved å legge til. Deaktivert klasse til knapper.
- For enkelt å sentrere et blokkeringselement horisontalt, må du legge til en midtblokkklasse til det, som i.
- Hvis det raskt skal oppnås midtinlineinnhold eller det skal gjøres inline-block-elementer i en div, legger du til .text-center-klasse til det overordnede elementet.
- Man kan også enkelt legge inn YouTube-videoer ved å bruke Bootstraps innebygde responsgruppe, som er en hjelper, klasser. embed-responsive-16by9 eller embed-responsive-4by3 klassen må velges basert på videoens sideforhold
Bootstrap 4 Cheat sheet - avslutning
Over bootstrap 4 jukseark gir et glimt av hva som er mulig med bootstrap 4. Men det er en mer omfattende guide tilgjengelig med tusenvis av andre parametere og koder. Det er åpenbart at informasjon om alle ikke kan gis i en enkelt artikkel, og heller ikke at en utvikler trenger å huske alle kodene og klassene for å utvikle. Den beste og mest anbefalte tilnærmingen er å holde slike jukseark hendige, og brukeren bør henvise til slike ark når det måtte oppstå behov. Dette skal sikre at all jobben blir utført på behovstidspunktet og skal forbedre brukerens forståelse og kunnskap om bootstrap 4 over en periode.
Anbefalt artikkel
Dette har vært en guide til Bootstrap 4 Cheat ark her. Vi har diskutert innhold og kommando samt gratis tips og triks fra Bootstrap 4 Cheat sheet. Du kan også se på følgende artikkel for å lære mer -
- Cheat Sheet CSS
- Bootstrap vs Jquery Differences
- Enkel og nyttig guide for å jukse ark SQL
- Ultimate Cheat sheet for C ++ Programmeringsspråk (Grunnleggende)