Inleiding tot Bootstrap 4 Cheatsheet
Het cheat sheet van Bootstrap 4 heeft een ingrijpende herziening van Bootstrap 3 ondergaan. Er zijn veel veranderingen gebeurd met de meeste componenten, waaronder tabellen, formulieren, dropdowns, rasters, navigatiebalken, enz. Grote voordelen van frameworks zoals Bootstrap zijn dat ze kunnen versnellen ontwikkeltijden, zelfs wanneer de kwaliteit en consistentie van de applicatie op de site worden gehandhaafd. Bootstrap 4 cheat sheet werkt op alle moderne browsers boven internet explorer 9.
Bootstrap 4
Bootstrap 4 is de nieuwste en meest geavanceerde versie van bootstrap. Het is het meest populaire framework voor HTML, CSS en JavaScript dat wordt gebruikt om responsieve en mobiel gebaseerde applicaties te ontwikkelen. Bootstrap 4 is net als eerdere versies gratis en open-source. We hoeven niet langer alles opnieuw te schrijven en opnieuw te ontwerpen, van ground zero voor de verschillende sets apparaten. En we hoeven ook niet enkele uren te hechten om alles te repareren en ervoor te zorgen dat het er in verschillende browsers, unieke platforms en apparaten uitziet en werkt.
Opdrachten en beschrijving op Bootstrap 4 Cheatsheet
Enkele belangrijke Bootstrap 4-opdrachten en hun beschrijving vindt u hieronder: -
| commando's | Beschrijving |
| Vaste container | Een vaste container heeft een vaste breedte. Terwijl het formaat van de browser wordt gewijzigd, blijft de breedte hetzelfde totdat het breekpunt wordt gevonden. |
| Vloeistofcontainer | Een vloeistofcontainer overspant de volledige breedte van de beschikbare viewport. Het expandeert en trekt vloeiend samen, wat betekent dat het verandert naarmate de browser wordt aangepast. |
| .Col- | Het is voor extra kleine apparaten - schermbreedte is minder dan 576 px |
| .Col-sm | Het is voor kleine apparaten - de schermbreedte blijft gelijk aan of groter dan 576 px |
| .Col-MD- | Het is voor middelgrote apparaten - schermbreedte blijft gelijk aan of groter dan 768 px |
| .Col-LG- | Het is voor grote apparaten - de schermbreedte is gelijk aan of groter dan 992 px |
| .Col-XL- | Het is voor xlarge apparaten - schermbreedte is gelijk aan of groter dan 1200 px |
- | h1 Bootstrap-maat kop met 2.5rem = 40px h2 Kop van bootstrapgrootte met 2rem = 32px h3 Kop van bootstrap met 1.75rem = 28px h4 Kop van bootstrap-grootte met 1, 5 rem = 24 px h5 Kop met bootstrap-grootte met 1, 25 rem = 20 px h6 Kop van bootstrapgrootte met 1rem = 16px |
| Dit HTML-tag-element biedt een gele achtergrondkleur met wat opvulling | |
| Dit HTML-tag-element biedt een gestippelde rand onderaan. | |
|
| De klasse toevoegen met
wordt gebruikt voor het citeren van blokken inhoud van bron die van buiten zijn. |
| .font-gewicht-bold | Voor vetgedrukte tekst |
| .font-cursief | Voor cursieve tekst |
| .font-gewicht-light | Voor lichtgewicht tekst |
| .font gewicht normaal | Voor normale tekst |
| .lood | Het laat een alinea zichtbaar opvallen |
| .klein | Het geeft kleinere tekst aan, dwz dat het de lettergrootte verkleint tot 85% van de grootte van de ouder. |
| .text links | Het geeft aan dat de tekst links is uitgelijnd. |
| .text - * - links | Het geeft aan dat de tekst links op alle schermen wordt uitgelijnd |
| .text-center | Het geeft aan voor in het midden uitgelijnde tekst |
| .text - * - center | Het geeft in het midden uitgelijnde tekst aan op alle schermen |
| .text-rechts | Het geeft aan voor rechts uitgelijnde tekst |
| .text - * - rechts | Het geeft rechts uitgelijnde tekst aan op alle schermen |
| .text-rechtvaardigen | Het geeft aan voor gerechtvaardigde tekst |
| .text-monospace | Het heeft Monospaced-tekst |
| .text-nowrap | Het geeft aan dat er geen wrap-tekst is |
| .text-kleine letters | Het geeft aan voor tekst in kleine letters |
| .text-hoofdletter | Het geeft aan voor hoofdletters |
| .text-kapitaliseren | Het geeft aan voor tekst met een hoofdletter |
| .initialism | Het toont de tekst in een HTML-tag-element in een kleiner lettertype. Het verwijdert de beschikbare standaardlijststijl en linkermarge op geneste lijsten van lijstitems |
| .tafel | De klasse voegt een basisstijl toe aan de tafel. |
| .table-gestreepte | De klas voegt zebrastrepen toe aan de tafel. |
| .table-omzoomd | De klasse voegt randen toe aan alle kanten van een tabel en cellen. |
| .table-hover | De klasse voegt een zweefeffect toe, dwz grijze achtergrondkleur op beschikbare tabelrijen. |
| .table-dark | De klasse voegt een zwarte achtergrond aan een tabel toe. |
Gratis tips en trucs voor het gebruik van Bootstrap 4 Cheatsheet: -
Enkele coole tips en trucs om snel de functies van bootstrap 4 cheatsheet te hacken en een geweldige app voor mobiel te maken, worden in dit gedeelte genoemd: -
- Met het gebruik. col- (breekpunt) -push- (nummer) of bij gebruik. col- (breekpunt) -pull- (nummer) klassen voor de kolommen, kan de volgorde van de opgegeven kolommen worden gewijzigd.
- Om een element snel en eenvoudig alleen op xs-apparaten te verbergen, is er een. verborgen-xs-klasse, dit kan worden gebruikt om te verbergen.
- . De klasse verborgen (breekpunt) kan ook worden gebruikt voor de rest van de breekpunten en in combinatie kan een verborgen bereik worden bereikt zoals hierboven vermeld. Bijvoorbeeld: - klassen .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap wordt geleverd met 5 standaard beschikbare knopstijlen, dit zijn standaard, primair, succes en gevaar. Wanneer een knop moet worden gewijzigd om de randradius of opvulling te verkleinen, kunt u dit het beste doen door .btn te overschrijven
- Om radio's en selectievakjes uit te schakelen, moet men de uitgeschakelde klasse toevoegen aan een ouder .checkboxor to.radio-element. voeg vervolgens een uitgeschakeld kenmerk toe aan de specifieke invoer
- Als u knoppen wilt uitschakelen, voegt u uitgeschakeld kenmerk toe aan de HTML-tagknoppen
Of hetzelfde kan gedaan worden via de klasse .disabled toevoegen aan knoppen.
- Om een blokelement eenvoudig horizontaal te centreren, moet er een middelste blokklasse aan worden toegevoegd, zoals in.
- Als snel inline-inhoud in het midden moet worden bereikt of inline-blokelementen binnen een div moeten worden gedaan, voeg dan .text-center-klasse toe aan het bovenliggende element.
- Je kunt ook eenvoudig YouTube-video's insluiten met behulp van Bootstrap's insluit-responsieve klasse, een hulp, klassen. De klasse embed-responsive-16by9 of embed-responsive-4by3 moet worden gekozen op basis van de beeldverhouding van de video
Bootstrap 4 Cheat sheet - conclusie
Boven bootstrap 4 cheat sheet geeft een glimp van wat mogelijk is met de bootstrap 4. Maar er is een uitgebreidere gids beschikbaar met duizenden andere parameters en tags. Het is duidelijk dat informatie over alles niet in een enkel artikel kan worden verstrekt, ofwel moet een ontwikkelaar alle tags en klassen onthouden om te kunnen ontwikkelen. De beste en meest aanbevolen aanpak is om dergelijke spiekbriefjes bij de hand te houden en de gebruiker moet naar dergelijke bladen verwijzen wanneer dat nodig is. Dit zorgt ervoor dat al het werk wordt gedaan op het moment dat het nodig is en verbetert het begrip en de kennis van de gebruiker van bootstrap 4 gedurende een periode.
Aanbevolen artikel
Dit is een gids voor Bootstrap 4 Cheat sheet hier hebben we de inhoud en opdracht besproken, evenals gratis tips en trucs van Bootstrap 4 Cheat sheet, je kunt ook het volgende artikel bekijken voor meer informatie -
- Cheatsheet CSS
- Bootstrap versus Jquery-verschillen
- Eenvoudige en nuttige gids voor cheatsheet SQL
- Ultieme Cheat sheet voor C ++ Programming Language (Basics)