Sådan bruges base -CSS i Bootstrap

En af de mest komplekse ting, når det kommer til at arbejde med webdesign, er at overvinde de subtile forskelle mellem browsere, selvom teoretisk set hver browser skal overholde standarderne, og i de fleste tilfælde er det, er der meget subtile små forskelle, der kan gøre vores design er svært at implementere.

Inden eksistensen af Bootstrap en fil kaldet reset.cssI dette var det, der blev gjort, at alle værdierne for grundlæggende og nøgleelementer såsom padings, margener, standardskrifttypen osv. Blev eksplicit defineret. Med dette forhindrede vi browseren i at gøre, hvad den ville, når vi definerede elementer, som vi ikke havde ændret i vores brugerdefinerede stilarter.

I dag Bootstrap tager sig af disse detaljer for os, dette opnås med en fil kaldet bootstrap.css som populært er kendt som basisfilen.

KravFor at kunne udføre eksemplerne og øvelserne i denne vejledning skal vi have et projekt med Bootstrap allerede downloadet, eller hvis det ikke er tilfældet, en internetforbindelse for at kunne bruge bibliotekerne direkte fra din CDN. Vi har brug for en moderne browser som Chrome eller Firefox i sine nyeste versioner, og endelig har vi brug for en tekstredigerer som Sublim tekst eller NotePad ++ for at oprette HTML -indholdet på en mere venlig måde, selvom hvis vi ønsker gedit eller notesblok tjener vores formål.

Overskrifter
En af de ting, der mest tiltrækker opmærksomhed på et websted, er titler og undertekster på indholdet, selvfølgelig er dette funktionen af ​​disse elementer, CSS base af Bootstrap har en interessant måde at håndtere dette på, først og fremmest har den et par størrelser og en skrifttype defineret for elementet h i en hvilken som helst af dens nummereringer, der spænder fra 1 til 6, men den har også klasser, der svarer til hvert element, så vi kan anvende de samme stilarter til en div eller endnu spændvidde.

En anden interessant ting er, at vi kan bruge elementet lille at reducere størrelsen på et afsnit af titlen, men opretholde andelen i forhold til elementet eller elementet, der bruger den tilsvarende klasse.

Med dette ganske enkelt, at når vi har flere browsere, opretholdes en homogenitet i vores design, så titlerne ikke behøver at se anderledes ud, for eksempel i Safari til Firefox, når vi ved, at begge browsere som standard fungerer med forskellige skrifttyper.

Omsætte det, du har lært, i praksis
Vi skal oprette en lille side, hvor vi skal lave en liste med titler, vi skal placere de to skråninger den ene oven på den anden, så vi kan se, hvordan forskellene ikke længere eksisterer takket være grundfilen til Bootstrap. Lad os først se på koden, og så ser vi, hvordan den ser ud i vores browser.

 Brug af Base Bootstrap -filenDette er en div med klasse H1 kilden lille
Dette er en H4 -titel den lille skrifttype
Dette er en div med klasse H4 kilden lille

Her ser vi, hvordan vi har gjort i kroppen de forskellige elementer, som vi skal bruge som titler, derudover viser vi, hvordan elementet fungerer, så vi kan kombinere det med titlerne for at opnå meget interessante effekter. Vi inkluderer også en ekstra stil for at tilføje nogle polstringer yderligere, så vi kan få et resultat som det, vi vil se på følgende billede:

FORSTØRRE

Afsnit
Når vi har fanget en læsers eller en brugers opmærksomhed med titlerne på vores applikation, har vi normalt brug for noget indhold, der kan forbruges, normalt er det en tekst, vi placerer i et afsnit, selvom det også kan være et billede, lyd eller video.

Gå tilbage til afsnittet, allerede elementet

bringer en stil foruddefineret af basis -CSS, men denne base tilbyder os også en særlig type afsnit, som kaldes at føre, Når vi tilføjer denne klasse til et afsnit, vil vi straks få den til at skille sig ud fra resten af ​​dens lignende, da dens størrelse øges, og nogle egenskaber ved skrifttyperne ændres.

Lad os se i den følgende kode, hvordan dette fungerer, som vi lige har forklaret, i dette eksempel skal vi oprette to afsnit, hvor det første vil have klassen at føre, på denne måde vil vi se, hvordan det vil fremhæve, selvfølgelig fungerer alt dette, hvis vi har Bootstrap i vores projekt, lad os se vores kode:

 Brug af Base Bootstrap -filen
Bacon ipsum smerter amet i laboris magna ullamco, i drumstick smerte boudin eiusmod andouille leberkas svinekødstræning ex. Oksekødsribber magna corned beef incididunt id. Kevin rump i hale biltong. Filet mignon kalkun quis, skankel vildt ullamco rykende ikke -voluptat svinekød.

Bacon ipsum smerter amet i laboris magna ullamco, i drumstick smerte boudin eiusmod andouille leberkas svinekødstræning ex. Oksekødsribber magna corned beef incididunt id. Kevin rump i hale biltong. Filet mignon kalkun quis, skankel vildt ullamco rykende ikke -voluptat svinekød.

Lad os køre vores eksempel og se, hvordan det ser ud i vores browser:

FORSTØRRE

Juster teksten
En af de ting, der også er meget vigtig, er tekstens justering, da vi nogle gange har brug for, at vores tekst er berettiget, justeret til højre, i midten eller med magt til at være til venstre, selvom der er ækvivalenter i CSS, der har en klasse for dette sparer os for en masse arbejde og hjælper os også med at give konsekvensen til koden.

I det følgende eksempel vil vi se, hvordan vi anvender hver af disse klasser på forskellige elementer, og for at vores kode skal have en bedre læsbarhed, laver vi alle elementerne afsnit. Lad os se koden:

 Brug af Base Bootstrap -filen
Bacon ipsum dolor amet in laboris magna ullamco, i drumstick dolor boudin eiusmod andouille
leberkas svinekødstræning eks. Oksekødsribber magna corned beef incididunt id.
leberkas svinekødstræning eks. Oksekødsribber magna corned beef incididunt id. leberkas svinekødstræning eks. Oksekødsribber magna corned beef incididunt id. Kevin rump

i halebiltong. Filet mignon kalkun quis, skankel vildt ullamco rykende ikke -voluptat svinekød.

Lad os nu se, hvordan hver klasse opfører sig i vores browser, der er et særligt tilfælde med begrunde, som er meget subtil, så dens virkning ses muligvis ikke meget.

FORSTØRRE

Lister
Lister er ofte nødvendige og ikke udelukkende for at liste ting op, de er vigtige dele af design mange gange. Bootstrap håndterer dem på en gennemsigtig måde som de tidligere elementer, som vi har set, listerne kommer med en stil, der er foruddefineret af CSS base, men vi har et par varianter, f.eks. notering uden stilarter for at undgå kugler og notering med inline, sidstnævnte gør listen vandret.

Lad os i det følgende se et eksempel på hver af disse lister, så vi kan bruge dem i vores kode:

 Brug af Base Bootstrap -filen
Inline liste

Første element
Andet element
Tredje element
Fjerde element
Femte element

Liste Uden stilarter

Første element
Andet element
Tredje element
Fjerde element
Femte element

Standard liste

Første element
Andet element
Tredje element
Fjerde element
Femte element

Lad os nu se, hvordan det ser ud i vores browser, hvor vi kan se, at forskellene umiddelbart er mærkbare:

Med dette afslutter vi denne vejledning, vi har set, at den grundlæggende CSS for Bootstrap Det giver os et standardgrundlag for at sikre, at elementer, som vi ikke har defineret eller tilpasset, vises på en bestemt måde direkte i browseren, hvilket giver os fuld kontrol over vores applikation uanset browseren.