Hur man använder bas -CSS i Bootstrap

En av de mest komplexa sakerna när det gäller att arbeta med webbdesign är att övervinna de subtila skillnaderna mellan webbläsare, men i teorin måste varje webbläsare följa standarderna, och i de flesta fall är det mycket subtila små skillnader som kan göra vår design svår att genomföra.

Innan förekomsten av Bootstrap en fil som heter reset.cssI detta var det som gjordes att alla värden för grundläggande och nyckelelement, såsom vadläggningar, marginaler, standardteckensnitt, etc. definierades uttryckligen. Med detta hindrade vi webbläsaren från att göra vad den ville när vi definierade element som vi inte hade ändrat i våra anpassade stilar.

Nu för tiden Bootstrap tar hand om dessa detaljer för oss, detta uppnås med en fil som heter bootstrap.css som i folkmun kallas basfilen.

KravFör att kunna utföra exemplen och övningarna i denna handledning måste vi ha ett projekt med Bootstrap redan nedladdad, eller misslyckas det, en internetanslutning för att kunna använda biblioteken direkt från din CDN. Vi behöver en modern webbläsare som Krom eller Firefox i sina senaste versioner, och slutligen behöver vi en textredigerare som Sublim text eller NotePad ++ för att skapa HTML -innehållet på ett mer vänligt sätt, även om vi vill att gedit eller anteckningsblock tjänar våra syften.

Rubriker
En av de saker som väcker mest uppmärksamhet på en webbplats är titlar och undertexter på innehållet, naturligtvis är detta funktionen hos dessa element, CSS basen av Bootstrap har ett intressant sätt att hantera detta, först och främst har det några storlekar och ett teckensnitt definierat för elementet h i någon av dess nummereringar från 1 till 6, men den har också klasser som motsvarar varje element, så att vi kan tillämpa samma stilar på en div eller ännu spänna.

En annan intressant sak är att vi kan använda elementet små för att minska storleken på ett avsnitt i titeln men behålla andelen i förhållande till elementet eller elementet som använder motsvarande klass.

Med detta helt enkelt att när vi har flera webbläsare bibehålls en homogenitet i vår design, så titlarna behöver inte se annorlunda ut, till exempel i Safari till Firefox, när vi vet att båda webbläsarna fungerar som standard med olika teckensnitt.

Genomföra det du har lärt dig
Vi ska skapa en liten sida där vi ska göra en lista med titlar, vi kommer att placera de två backarna ovanpå varandra så att vi kan se hur skillnaderna inte längre finns tack vare basfilen för Bootstrap. Låt oss titta på koden först, och sedan får vi se hur den ser ut i vår webbläsare.

 Använda Base Bootstrap -filenDetta är en div med klass H1 källan liten
Detta är en H4 -titel det lilla teckensnittet
Detta är en div med klass H4 källan liten

Här ser vi hur vi har gjort i kroppen de olika elementen som vi ska använda som titlar, dessutom visar vi hur elementet fungerar så att vi kan kombinera det med titlarna för att uppnå mycket intressanta effekter. Vi har också en ytterligare stil för att lägga till några vaddering ytterligare så att vi kan få ett resultat som det vi kommer att se i följande bild:

FÖRSTORA

Stycken
När vi väl har uppmärksammat en läsare eller en användare med titlarna på vår applikation behöver vi vanligtvis innehåll som kan konsumeras, normalt är det en text som vi placerar i ett stycke även om det också kan vara en bild, ljud eller video.

Gå tillbaka till stycket, redan elementet

ger en stil som fördefinierats av bas -CSS, men denna bas erbjuder oss också en speciell typ av stycke som kallas leda, när vi lägger till den här klassen i ett stycke kommer vi omedelbart att skilja den från resten av dess liknande, eftersom dess storlek ökar och vissa egenskaper hos teckensnitten ändras.

Låt oss se i följande kod hur detta fungerar som vi just har förklarat, i det här exemplet ska vi skapa två stycken där det första kommer att ha klassen leda, på detta sätt kommer vi att se hur det kommer att lyfta fram, naturligtvis allt detta fungerar om vi har Bootstrap i vårt projekt, låt oss se vår kod:

 Använda Base Bootstrap -filen
Bacon ipsum smärta amet i laboris magna ullamco, i trumpstick smärta boudin eiusmod andouille leberkas fläskmage träning ex. Nötkött revben magna corned beef incididunt id. Kevin rumpa i svansbiltong. Filet mignon kalkon quis, skaft viltkål ullamco ryckig icke voluptat fläskkarré.
Bacon ipsum smärta amet i laboris magna ullamco, i trumpstick smärta boudin eiusmod andouille leberkas fläskmage träning ex. Nötkött revben magna corned beef incididunt id. Kevin rumpa i svansbiltong. Filet mignon kalkon quis, skaft viltkål ullamco ryckig icke voluptat fläskkarré.

Låt oss köra vårt exempel och se hur det ser ut i vår webbläsare:

FÖRSTORA

Justera texten
En av de saker som också är mycket viktig är textens inriktning, eftersom vi ibland behöver vår text vara rättfärdigad, anpassad till höger, till mitten eller med våld till vänster, även om det finns motsvarigheter i CSS en klass för detta sparar oss mycket arbete och hjälper oss också att ge koden konsekvens.

I följande exempel kommer vi att se hur vi tillämpar var och en av dessa klasser på olika element och för att vår kod ska bli bättre läsbar kommer vi att göra alla elementen stycken. Låt oss se koden:

 Använda Base Bootstrap -filen
Bacon ipsum dolor amet in laboris magna ullamco, i drumstick dolor boudin eiusmod andouille
leberkas fläskmage träning ex. Nötkött revben magna corned beef incididunt id.
leberkas fläskmage träning ex. Nötkött revben magna corned beef incididunt id. leberkas fläskmage träning ex. Nötkött revben magna corned beef incididunt id. Kevin rumpa
i svansbiltong. Filet mignon kalkon quis, skaft viltkål ullamco ryckig icke voluptat fläskkarré.

Låt oss nu se hur varje klass beter sig i vår webbläsare, det finns ett särskilt fall med rättfärdiga, vilket är mycket subtilt så dess effekt kanske inte ses så mycket.

FÖRSTORA

Listor
Listor är ofta nödvändiga och inte enbart för att lista saker, de är viktiga delar av design många gånger. Bootstrap hanterar dem på ett transparent sätt som de tidigare elementen som vi har sett, listorna kommer med en stil som fördefinierats av CSS bas, men vi har ett par varianter, till exempel listning utan stilar för att undvika kulor och notering med i kö, den senare gör listan horisontell.

Låt oss se i följande kod ett exempel på var och en av dessa listor så att vi kan använda dem i vår kod:

 Använda Base Bootstrap -filen
Inline -lista

Första elementet
Andra elementet
Tredje elementet
Fjärde elementet
Femte elementet

Lista utan stilar

Första elementet
Andra elementet
Tredje elementet
Fjärde elementet
Femte elementet

Standard lista

Första elementet
Andra elementet
Tredje elementet
Fjärde elementet
Femte elementet

Låt oss nu se hur det ser ut i vår webbläsare, där vi kan se att skillnaderna direkt märks:

Med detta avslutar vi denna handledning, vi har sett att bas -CSS för Bootstrap Det ger oss en standard för att säkerställa att element som vi inte har definierat eller anpassat visas på ett visst sätt direkt i webbläsaren, vilket ger oss full kontroll över vår applikation oavsett webbläsare.