✅ Het Bootstrap-raster leren gebruiken

Inhoudsopgave

Kolom a
Kolom B
Kolom C
Kolom a
Kolom B
Kolom C

Bootstrap beheert een op rasters gebaseerde structuur of ook wel bekend als Rooster, wat niets meer is dan een lay-out op het scherm die ons helpt onze elementen te ordenen, is het alsof we het scherm in rijen en kolommen hebben verdeeld en het als een grote tabel hebben behandeld.
Dit soort manipulatie brengt ons ertoe om op een "unieke" manier over ontwerpen na te denken en op het moment dat we wat meer ervaring hebben met het gebruik van Bootstrap We zullen alles op deze manier gaan zien en zo zullen we consistentie en snelheid krijgen in onze manier van werken.
Het eerste dat u moet weten, is dat dit ontwerp van de Rooster stelt ons in staat om zo te werken dat we mobiele weergaven native kunnen implementeren, dit natuurlijk vanaf versie 3 van Bootstrap, dankzij het feit dat deze versie is gebouwd met mobiel ontwerp in gedachten.
In eerdere versies van het framework moesten de klassen direct worden gespecificeerd, zodat ons ontwerp de mogelijkheid had om zich aan te passen aan de resoluties van mobiele apparaten, nu de verschillende klassen van de Rooster ze doen het automatisch.
Om van deze functie te profiteren, moeten we van klein naar groot denken, dat wil zeggen dat de klassen die we toepassen altijd als de kleinste moeten worden beschouwd en dan schaalt het naar andere resoluties, dat wil zeggen, als we een sm klasse (klein of klein), automatisch Bootstrap het gaat ervan uit dat dit de minimale uitdrukking is en dat deze vervolgens kan worden geschaald naar md (mediaan) of naar lg (groot).
Voordat we verder gaan met meer praktische voorbeelden, moeten we begrijpen wat de klassen zijn die we kunnen gebruiken in de kolommen van a Rooster En we moeten ook weten voor welk geval elk van toepassing is, op deze manier kunnen we bij het ontwerpen van onze site rekening houden met het kleinste apparaat dat we willen bereiken.
Met deze aanpak kunnen we sites bouwen Mobiel vriendelijk, hoe belangrijk ze vandaag de dag worden voor zoekmachines en hun resultaten, waardoor we naast het maken van goede sites ook een aantal punten in onze reputatie kunnen verdienen SEO, met dezelfde baan natuurlijk.
TelefoonschermenHet is het kleinste toestel dat in theorie kan navigeren in ons ontwerp, hoewel de resoluties van de telefoons geleidelijk zijn omgezet naar Full HD is dit over het algemeen voor de high-end, terwijl de mid-range en de range low wat in theorie de meeste hebben veel lagere resoluties. het soort van Rooster voor dat geval geldt: col-xs- en geldt voor oplossingen kleiner dan breedte 768 pixels.
TabletschermenZe zijn in theorie het op een na kleinste apparaat, dankzij het grotere formaat biedt de tablet een groter navigatieoppervlak, waardoor we iets meer inhoud kunnen gebruiken dan met een telefoonscherm, daarnaast gebeurt de navigatie op tablets over het algemeen horizontaal. De klasse die van toepassing is op dit apparaat is: col-sm- en is van toepassing op resoluties met een breedte groter dan 768 pixels en onder 992 pixels.
Klein scherm apparatuurHet zijn over het algemeen die welke behoren tot de lage reeksen van desktops en laptops, het kunnen apparaten zijn met schermen kleiner dan 15 inch, of die een levensduur hebben van meer dan 10 jaar, het zijn ook de laptops die bedoeld zijn voor studenten en de sector met een lage koopkracht, dit is de meerderheidssector. De klasse die voor dit geval geldt is col-md- en de limietresoluties voor de breedte zijn groter dan 992 pixels en minder dan 1200 pixels.
Groot scherm apparatuurHier kunnen we de modernste apparatuur onderbrengen, en ook de schermen van meer dan 15 inch, in deze categorie betreden de nieuwe apparatuur zoals ultradraagbaar, 4K-resolutie of QHD ook waar we oppervlakken zien die groter zijn dan 1080p. Door de breedtes uit te sluiten die we hier zullen verwerken, zijn die groter dan 1200 pixels, dit terwijl de volgende versie van Bootstrap waarschijnlijk.
Omdat we de theorie achter het systeem kennen Rooster van Bootstrap, Het is goed om te beginnen met het praktisch toepassen ervan, maar voordat we de code zien, moeten we nog een paar concepten begrijpen, we moeten altijd volgens afspraak en best practices een element met de klasse gebruiken container, omdat hierdoor de container wordt gemaakt zoals de naam aangeeft om onze verschillende kolommen te behouden. Het andere concept dat we moeten weten, is dat er altijd 12 kolommen zullen zijn, dus de verschillende combinaties die we maken, moeten rekening houden met dit aantal.
In het volgende voorbeeld gaan we een code maken voor een lay-out van 3 grote kolommen, we gaan de klasse gebruiken col-md- en aangezien we 3 gelijke kolommen willen bij het delen van 12 door 3, krijgen we het getal 4, dus dit zal de grootte zijn van elk van onze resulterende kolommen.
Laten we eens kijken naar de code zonder verder oponthoud:

Bootstrap-raster

Voorbeeld van het gebruik van kolommen in bootstrap

Kolom a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam faciliteert mijn in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Kolom B

Kolom C

De structuur is heel eenvoudig, we hebben een div gemaakt met de klasse container, en in een div met de klas rij eindelijk binnen de laatste hebben we 3 divs gemaakt met de klasse col-md-4 Dit is de klasse voor kleine schermen voor niet-draagbare computers, en we zien hoe we het getal 4 munten, wat aangeeft dat elke div hiervan gelijk is aan 4 kolommen van de Rooster. Laten we eens kijken hoe het eruit ziet, wanneer we het in onze browser uitvoeren:

VERGROTEN

Als we opmerken, dan hebben we 3 grote kolommen, maar wat gebeurt er als we de grootte verkleinen tot een resolutie die lager is dan het minimum van de toegepaste klasse, aangezien de kolommen gewoon op elkaar worden gestapeld zoals we zien in de volgende afbeelding:

VERGROTEN

Hoewel dit geen slechte zaak is, is het soms niet het gedrag dat we willen dat ons ontwerp aanneemt, hiervoor kunnen we het gedrag direct opnemen met klassen voor de verschillende resoluties, laten we in de volgende code kijken hoe we de klassen van de verschillende kolommen om een ander resultaat te bereiken:

Bootstrap-raster

Voorbeeld van het gebruik van kolommen in bootstrap

Kolom a

Kolom B

Kolom C

Als we nu opmerken dat in onze code alles hetzelfde blijft, behalve onze klassen, waar we voor kolommen A en B de klasse hebben toegevoegd col-sm-6 en voor kolom C de klasse col-sm-12, dit betekent dat wanneer de resolutie wordt verlaagd, de sm-klassen zullen gelden, zoals we in de volgende afbeelding zien:

VERGROTEN

We zien dat in dezelfde grootte van het eerste voorbeeld, in plaats van gestapeld te zijn, kolommen A en B in hetzelfde gebied komen, en kolom C neemt een enkele rij voor zichzelf. Hier zien we het grote nut van Rooster vooral met ontwerpen die erop gericht zijn responsief en mobiel te zijn.
Hiermee sluiten we deze tutorial af, waar we hebben geleerd hoe het systeem van Rooster van BootstrapNatuurlijk is dit slechts het topje van de ijsberg, er is veel meer inhoud die we in andere tutorials kunnen verkennen, maar met deze basiskennis kunnen we beginnen te zien hoe we onze ontwerpen op een meer logische manier en met minder inspanning kunnen combineren dankzij het frame.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven