Hoe de basis-CSS in Bootstrap te gebruiken

Een van de meest complexe dingen als het gaat om het werken met webdesign, is om de subtiele verschillen tussen browsers te overwinnen, hoewel in theorie elke browser aan de standaarden moet voldoen, en in de meeste gevallen zijn er zeer subtiele kleine verschillen die kunnen maken ons ontwerp moeilijk te implementeren.

Voor het bestaan ​​van Bootstrap een bestand genaamd reset.cssHierin werd gedaan dat alle waarden van basis- en sleutelelementen zoals opvulling, marges, het standaardlettertype, enz. expliciet werden gedefinieerd. Hiermee hebben we voorkomen dat de browser deed wat hij wilde bij het definiëren van elementen die we niet hadden gewijzigd in onze aangepaste stijlen.

Vandaag de dag Bootstrap regelt deze details voor ons, dit wordt bereikt met een bestand genaamd bootstrap.css die in de volksmond bekend staat als het basisbestand.

VereistenOm de voorbeelden en oefeningen in deze tutorial te kunnen uitvoeren, moeten we een project hebben met de Bootstrap al gedownload, of als dat niet lukt, een internetverbinding om de bibliotheken rechtstreeks vanaf uw . te kunnen gebruiken CDN. We hebben een moderne browser nodig zoals Chroom of Firefox in de nieuwste versies, en tot slot hebben we een teksteditor nodig zoals Sublieme tekst of NotePad ++ om de HTML-inhoud op een vriendelijkere manier te maken, hoewel als we willen dat gedit of kladblok onze doelen dienen.

Kopteksten
Een van de dingen die de meeste aandacht trekken op een website zijn de titels en ondertitels van de inhoud, dit is natuurlijk de functie van deze elementen, de CSS basis van Bootstrap heeft een interessante manier om hiermee om te gaan, ten eerste heeft het een paar formaten en een lettertype gedefinieerd voor het element H in elk van zijn nummering variërend van 1 tot 6, maar het heeft ook klassen die overeenkomen met elk element, zodat we dezelfde stijlen kunnen toepassen op een div of toch span.

Een ander interessant ding is dat we het element kunnen gebruiken klein om de grootte van een sectie van de titel te verkleinen, maar de verhouding ten opzichte van het element of het element dat de overeenkomstige klasse gebruikt, te behouden.

Hiermee simpelweg dat wanneer we meerdere browsers hebben een homogeniteit van ons ontwerp behouden blijft, zodat de titels er niet anders uit hoeven te zien, bijvoorbeeld in Safari tot Firefox, als we weten dat beide browsers standaard met verschillende lettertypen werken.

Het geleerde in de praktijk brengen
We gaan een kleine pagina maken waar we een lijst met titels gaan maken, we gaan de twee hellingen op elkaar plaatsen zodat we kunnen zien hoe de verschillen niet meer bestaan ​​dankzij het basisbestand van Bootstrap. Laten we eerst naar de code kijken, en dan zullen we zien hoe deze eruitziet in onze browser.

 Het Base Bootstrap-bestand gebruikenDit is een div met klasse H1 de bron klein
Dit is een H4-titel het kleine lettertype
Dit is een div met klasse H4 de bron klein

Hier zien we hoe we in het lichaam de verschillende elementen hebben gedaan die we als titels gaan gebruiken, daarnaast laten we zien hoe het element werkt, zodat we het kunnen combineren met de titels om zeer interessante effecten te bereiken. We hebben ook een extra stijl om wat toe te voegen opvullingen extra zodat we een resultaat kunnen hebben zoals we in de volgende afbeelding zullen zien:

VERGROTEN

alinea's
Zodra we de aandacht van een lezer of een gebruiker hebben getrokken met de titels van onze applicatie, hebben we meestal wat inhoud nodig die kan worden geconsumeerd, normaal gesproken is het een tekst die we in een alinea plaatsen, hoewel het ook een afbeelding, audio of video.

Teruggaan naar de alinea, al het element

brengt een stijl die vooraf is gedefinieerd door de basis-CSS, maar deze basis biedt ons ook een speciaal type alinea dat wordt genoemd lood, wanneer we deze klasse aan een alinea toevoegen, zullen we deze onmiddellijk onderscheiden van de rest van zijn vergelijkbare, omdat de grootte ervan wordt vergroot en sommige eigenschappen van de lettertypen worden gewijzigd.

Laten we in de volgende code kijken hoe dit werkt die we zojuist hebben uitgelegd, in dit voorbeeld gaan we twee alinea's maken waarin de eerste de klasse zal hebben lood, op deze manier zullen we zien hoe het zal benadrukken, natuurlijk werkt dit allemaal als we hebben Bootstrap laten we in ons project onze code bekijken:

 Het Base Bootstrap-bestand gebruiken
Bacon ipsum pijn amet in laboris magna ullamco, in drumstick pijn boudin eiusmod andouille leberkas varkensbuik exercitatie ex. Beef ribs magna corned beef incididunt id. Kevin romp in staart biltong. Filet mignon kalkoenquis, shankle hertenvlees ullamco schokkerige niet voluptate varkenslende.

Bacon ipsum pijn amet in laboris magna ullamco, in drumstick pijn boudin eiusmod andouille leberkas varkensbuik exercitatie ex. Beef ribs magna corned beef incididunt id. Kevin romp in staart biltong. Filet mignon kalkoenquis, shankle hertenvlees ullamco schokkerige niet voluptate varkenslende.

Laten we ons voorbeeld uitvoeren en kijken hoe het eruit ziet in onze browser:

VERGROTEN

Lijn de tekst uit
Een van de dingen die ook erg belangrijk is, is de uitlijning van de tekst, omdat we onze tekst soms moeten uitlijnen, naar rechts, naar het midden of gedwongen naar links, hoewel er equivalenten in CSS zijn die een klasse hiervoor bespaart ons veel werk en helpt ons ook om consistentie aan de code te geven.

In het volgende voorbeeld zullen we zien hoe we elk van deze klassen toepassen op verschillende elementen en om onze code beter leesbaar te maken, gaan we alle elementenparagrafen maken. Laten we de code eens bekijken:

 Het Base Bootstrap-bestand gebruiken
Bacon ipsum dolor amet in laboris magna ullamco, in drumstick dolor boudin eiusmod andouille
leberkas varkensbuik exercitatie ex. Beef ribs magna corned beef incididunt id.
leberkas varkensbuik exercitatie ex. Beef ribs magna corned beef incididunt id. leberkas varkensbuik exercitatie ex. Beef ribs magna corned beef incididunt id. Kevin romp

in staartbiltong. Filet mignon kalkoenquis, shankle hertenvlees ullamco schokkerige niet voluptate varkenslende.

Laten we nu eens kijken hoe elke klasse zich in onze browser gedraagt, er is een specifiek geval met de verantwoorden, wat erg subtiel is, zodat het effect ervan misschien niet veel wordt gezien.

VERGROTEN

Lijsten
Lijsten zijn vaak nodig en niet uitsluitend om dingen op te sommen, ze zijn vaak essentiële onderdelen van ontwerp. Bootstrap behandelt ze op een transparante manier zoals de vorige elementen die we hebben gezien, de lijsten worden geleverd met een stijl die vooraf is gedefinieerd door de CSS base, maar we hebben een aantal varianten, bijvoorbeeld een lijst zonder stijlen om opsommingstekens te vermijden, en een lijst met in lijn, de laatste maakt de lijst horizontaal.

Laten we in de volgende code een voorbeeld van elk van deze lijsten bekijken, zodat we ze in onze code kunnen gebruiken:

 Het Base Bootstrap-bestand gebruiken
Inline lijst

Eerste element
Tweede Element
derde element
vierde element
vijfde element

Lijst zonder stijlen

Eerste element
Tweede Element
derde element
vierde element
vijfde element

Standaard lijst

Eerste element
Tweede Element
derde element
vierde element
vijfde element

Laten we nu eens kijken hoe het eruit ziet in onze browser, waar we kunnen zien dat de verschillen meteen opvallen:

Hiermee sluiten we deze tutorial af, we hebben gezien dat de basis-CSS van Bootstrap Het geeft ons een standaardbasis om ervoor te zorgen dat elementen die we niet hebben gedefinieerd of aangepast, op een bepaalde manier direct in de browser verschijnen, waardoor we volledige controle hebben over onze applicatie, ongeacht de browser.