Introduktion till Bootstrap 4 Cheatsheet
Bootstrap 4 fuskark har införlivat en större översyn från Bootstrap 3. En hel del förändringar har hänt för de flesta av komponenterna som inkluderar tabeller, formulär, dropdowns, rutnät, navbars etc. Stora fördelar med ramar som Bootstrap är att de kan snabba upp utvecklingstider även när kvaliteten och konsistensen på applikationen bibehålls på hela webbplatsen. Bootstrap 4 fuskark fungerar på alla moderna webbläsare ovanför Internet Explorer 9.
Bootstrap 4
Bootstrap 4 är den senaste och mest avancerade versionen av bootstrap. Det är det mest populära ramverket för HTML, CSS och JavaScript som används för att utveckla responsiva och mobilbaserade applikationer. Bootstrap 4 som tidigare versioner är gratis och öppen källkod. Vi behöver inte längre skriva om och designa allt från marknoll för de olika enheterna. Och vi behöver inte midja flera timmar för att försöka fixa allt och se till att det ser ut och fungerar i olika webbläsare, unika plattformar och enheter.
Kommandon och beskrivning på Bootstrap 4 Cheatsheet
Några viktiga Bootstrap 4-kommandon och deras beskrivning ges nedan: -
| kommandon | Beskrivning |
| Fast behållare | En fast behållare har en fast bredd. När webbläsarens storlek ändras förblir bredden densamma tills dess brytpunkt hittas. |
| Vätskebehållare | En vätskebehållare sträcker sig över hela tillgängliga utsiktsbredd. Den expanderar och kontrakterar flytande vilket innebär att den ändras när webbläsaren ändras. |
| .Col- | Det är för extra små enheter - skärmbredd är mindre än 576px |
| .Col-SM- | Det är för små enheter - skärmbredden förblir lika med eller större än 576px |
| .Col-MD- | Det är för medelstora enheter - skärmbredden förblir lika med eller större än 768px |
| .Col-lg- | Det är för stora enheter - skärmbredden är lika med eller större än 992px |
| .Col-XL- | Det är för xlarge-enheter - skärmbredd är lika med eller större än 1200px |
- | h1 Storleksstorleksstorlek med 2, 5rem = 40px h2 Bootstrap-storlek med 2rem = 32px h3 Bootstrap-storlek med 1, 75rem = 28px h4 Bootstrap-storlek med 1, 5rem = 24px h5 Bootstrap-storlek med 1, 25rem = 20px h6 Bootstrap-storlek med 1rem = 16px |
| Detta HTML-tagelement ger en gul bakgrundsfärg med viss stoppning | |
| Detta HTML-tagelement ger en prickad kantbotten. | |
|
| Lägg till klassen med
används för att citera block av innehåll från källan som är utanför. |
| .font-vikt-bold | För fet text |
| .font-italic | För kursiv text |
| .font-vikt-ljus | För text med låg vikt |
| .font-vikt-normal | För Normal text |
| .leda | Det gör att ett stycke syns tydligt |
| .små | Det indikerar mindre text, dvs det minskar teckensnittsstorleken till 85% av storleken på dess överordnade. |
| .text-vänster | Det indikerar att texten är vänsterjusterad. |
| .text - * - vänster | Det indikerar att texten är vänsterjusterad på alla storlekar |
| .text-centrum | Det indikerar för mittinriktad text |
| .text - * - centrum | Det indikerar mittjusterad text på alla storlekar |
| .text-höger | Det indikerar för högerjusterad text |
| .text - * - höger | Det indikerar högerjusterad text på alla storlekar |
| .text-justify | Det indikerar för motiverad text |
| .text-monospace | Den har text med monopaced |
| .text-nowrap | Det indikerar för inget omslag |
| .text-gemener | Det indikerar för lägre text |
| .text-versaler | Det indikerar för stora texter |
| .text-kapitalisera | Det indikerar för aktiverad text |
| .initialism | Den visar texten i ett HTML-tagelement i ett mindre teckensnitt. Det tar bort tillgänglig listlista och vänstermarginal på listobjekt som är kapslade listor |
| .tabell | Klassen lägger till grundläggande styling till bordet. |
| .table-striped | Klassen lägger sebra-ränder till bordet. |
| .table-kantad | Klassen lägger till gränser på alla sidor av ett bord och celler. |
| .table-hover | Klassen lägger till en svävande effekt, dvs grå bakgrundsfärg på tillgängliga tabellrader. |
| .table-mörker | Klassen lägger till en svart bakgrund till ett bord. |
Gratis tips och tricks för att använda Bootstrap 4 Cheat sheet: -
Några häftiga tips och tricks för att snabbt hacka funktionerna i bootstrap 4 fuskark och skapa en fantastisk app på mobil nämns i det här avsnittet: -
- Med användningen. col- (breakpoint) -push- (nummer) eller vid användning. col- (breakpoint) -pull- (number) klasser till kolumnerna, sekvensen för de angivna kolumnerna kan ändras.
- För att snabbt och enkelt dölja ett element från endast xs-enheter finns det en. dold-xs-klassen, detta kan användas för att dölja.
- . dold- (brytpunkt) -klassen kan också användas för resten av brytpunkter och när de kombineras kan dold omfattning som nämnts ovan uppnås. Ex: - klasser .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap kommer med 5 tillgängliga standardstilar som är tillgängliga, dessa är standard, primär, framgång och fara. När en knapp måste bytas för att minska gränseradien eller stoppningen, är det bästa sättet att uppnå detta genom att skriva över .btn
- För att inaktivera radio och kryssrutor måste man lägga till funktionshindrad klass i ett överordnat .checkbox eller to.radio-element. lägg sedan till funktionshindrade attribut till den specifika ingången
- För att inaktivera knappar lägger du till inaktiverat attribut till HTML-taggknapparna
Eller detsamma kan göras via lägg till .aktiverad klass till knappar.
- För att enkelt kunna centrera ett blockelement horisontellt måste du lägga till en centerblockklass till det, som i.
- Om snabbt inline-innehåll ska uppnås eller inline-blockelement i en div ska göras, lägg till .text-center-klassen till dess överordnade element.
- Man kan också enkelt bädda in YouTube-videor med hjälp av Bootstraps inbäddskänsliga klass som är en hjälpare, klasser. embed-responsive-16by9 eller embed-responsive-4by3-klassen måste väljas baserat på videoens bildförhållande
Bootstrap 4 Fuskark - slutsats
Ovanför bootstrap 4 fuskark ger en glimt av vad som är möjligt med bootstrap 4. Men det finns en mer omfattande guide med tusentals andra parametrar och taggar. Det är uppenbart att information om alla inte kan tillhandahållas i en enda artikel, antingen behöver en utvecklare komma ihåg alla taggar och klasser för att göra utveckling. Det bästa och mest rekommenderade tillvägagångssättet är att hålla sådana fuskskivor till hands och användaren bör hänvisa till sådana ark närhelst ett behov uppstår. Detta ska säkerställa att allt jobb utförs vid behov och ska förbättra användarens förståelse och kunskap om bootstrap 4 under en period.
Rekommenderad artikel
Detta har varit en guide till Bootstrap 4 Cheat ark här. Vi har diskuterat innehåll och kommando samt gratis tips och tricks från Bootstrap 4 Cheat ark. Du kan också titta på följande artikel för att lära dig mer -
- Cheat Sheet CSS
- Bootstrap vs Jquery Differences
- Enkel och användbar guide för att fuska ark SQL
- Ultimate Cheat ark för C ++ programmeringsspråk (grunder)