Slik bruker du grunnleggende CSS i Bootstrap

En av de mest komplekse tingene når det gjelder å jobbe med webdesign, er å overvinne de subtile forskjellene mellom nettlesere, men i teorien må hver nettleser overholde standardene, og i de fleste tilfeller er det veldig små subtile forskjeller som kan gjøre vårt design er vanskelig å implementere.

Før eksistensen av Støvelhempe en fil som heter reset.cssI dette var det som ble gjort at alle verdiene til grunnleggende og sentrale elementer som putinger, marginer, standard skrifttype, etc. ble eksplisitt definert. Med dette forhindret vi nettleseren fra å gjøre det den ville når vi definerte elementer som vi ikke hadde endret i våre tilpassede stiler.

Nå for tiden Støvelhempe tar seg av disse detaljene for oss, dette oppnås med en fil som heter bootstrap.css som er populært kjent som basisfilen.

KravFor å kunne utføre eksemplene og øvelsene i denne opplæringen må vi ha et prosjekt med Støvelhempe allerede lastet ned, eller hvis du ikke har det, en Internett -tilkobling for å kunne bruke bibliotekene direkte fra din CDN. Vi trenger en moderne nettleser som Chrome eller Firefox i de nyeste versjonene, og til slutt trenger vi en tekstredigerer som Sublim tekst eller NotePad ++ for å lage HTML -innholdet på en mer vennlig måte, men hvis vi ønsker gedit eller notisblokk tjener våre formål.

Overskrifter
En av de tingene som mest tiltrekker seg oppmerksomhet på et nettsted er titler og undertekster på innholdet, selvfølgelig er dette funksjonen til disse elementene, CSS base av Støvelhempe har en interessant måte å håndtere dette på, først og fremst har den noen få størrelser og en skrift definert for elementet h i en hvilken som helst nummerering fra 1 til 6, men den har også klasser som tilsvarer hvert element, slik at vi kan bruke de samme stilene til en div eller ennå spenn.

En annen interessant ting er at vi kan bruke elementet liten for å redusere størrelsen på en del av tittelen, men opprettholde andelen i forhold til elementet eller elementet som bruker den tilsvarende klassen.

Med dette ganske enkelt at når vi har flere nettlesere, opprettholdes en homogenitet i designet vårt, så titlene trenger ikke å se annerledes ut, for eksempel i Safari til Firefox, når vi vet at begge nettleserne fungerer med forskjellige fonter som standard.

Omsette det du har lært
Vi skal lage en liten side der vi skal lage en liste med titler, vi skal plassere de to bakkene den ene oppå den andre slik at vi kan se hvordan forskjellene ikke lenger eksisterer takket være grunnfilen til Støvelhempe. La oss se på koden først, og så får vi se hvordan den ser ut i nettleseren vår.

 Bruke Base Bootstrap -filenDette er en div med klasse H1 kilden small
Dette er en H4 -tittel, den lille skriften
Dette er en div med klasse H4 kilden small

Her ser vi hvordan vi har gjort i kroppen de forskjellige elementene som vi skal bruke som titler, i tillegg viser vi hvordan elementet fungerer slik at vi kan kombinere det med titlene for å oppnå veldig interessante effekter. Vi inkluderer også en ekstra stil for å legge til noen polstring ytterligere slik at vi kan få et resultat som det vi vil se på følgende bilde:

FORSTØRRE

Avsnitt
Når vi har fanget oppmerksomheten til en leser eller en bruker med titlene på applikasjonen vår, trenger vi vanligvis noe innhold som kan konsumeres, normalt er det en tekst vi plasserer i et avsnitt, selv om det også kan være et bilde, lyd eller video.

Gå tilbake til avsnittet, allerede elementet

gir en stil som er forhåndsdefinert av grunn -CSS, men denne basen tilbyr oss også en spesiell type avsnitt som kalles lede, Når vi legger denne klassen til et avsnitt, vil vi umiddelbart få den til å skille seg ut fra resten av de lignende, siden størrelsen er økt og noen egenskaper til skriftene er endret.

La oss se i følgende kode hvordan dette fungerer som vi nettopp har forklart, i dette eksemplet skal vi lage to avsnitt der det første vil ha klassen lede, på denne måten vil vi se hvordan det vil markere, selvfølgelig fungerer alt dette hvis vi har Støvelhempe i vårt prosjekt, la oss se vår kode:

 Bruke Base Bootstrap -filen
Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly workout eks. Beef ribs magna corned beef incididunt id. Kevin rump i halebiltong. Filet mignon kalkun quis, skank vilt vilt ullamco rykete ikke voluptate svinekam.

Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly workout eks. Beef ribs magna corned beef incididunt id. Kevin rump i halebiltong. Filet mignon kalkun quis, skank vilt vilt ullamco rykete ikke voluptate svinekam.

La oss kjøre eksemplet vårt og se hvordan det ser ut i nettleseren vår:

FORSTØRRE

Juster teksten
En av de tingene som også er veldig viktig er justeringen av teksten, siden vi noen ganger trenger at teksten vår er rettferdiggjort, justert til høyre, i midten eller med makt til å være til venstre, selv om det er ekvivalenter i CSS som har en klasse for dette sparer oss for mye arbeid, og hjelper oss også med å gi konsistensen til koden.

I det følgende eksemplet vil vi se hvordan vi bruker hver av disse klassene på forskjellige elementer, og for at koden vår skal ha bedre lesbarhet, skal vi lage alle elementene avsnitt. La oss se koden:

 Bruke Base Bootstrap -filen
Bacon ipsum dolor amet in laboris magna ullamco, i drumstick dolor boudin eiusmod andouille
leberkas svinekjøtt magetrening eks. Beef ribs magna corned beef incididunt id.
leberkas svinekjøtt magetrening eks. Beef ribs magna corned beef incididunt id. leberkas svinekjøtt magetrening eks. Beef ribs magna corned beef incididunt id. Kevin rump

i halebiltong. Filet mignon kalkun quis, skank vilt vilt ullamco rykete ikke voluptate svinekam.

La oss nå se hvordan hver klasse oppfører seg i nettleseren vår, det er et spesielt tilfelle med rettferdiggjøre, som er veldig subtil, så effekten blir kanskje ikke sett så mye.

FORSTØRRE

Lister
Lister er ofte nødvendige og ikke utelukkende for å liste opp ting, de er viktige deler av design mange ganger. Støvelhempe håndterer dem på en gjennomsiktig måte som de tidligere elementene vi har sett, listene kommer med en stil som er forhåndsdefinert av CSS base, men vi har et par varianter, for eksempel oppføring uten stiler for å unngå kuler, og oppføring med på linje, sistnevnte gjør listen horisontal.

La oss se i den følgende koden et eksempel på hver av disse listene, slik at vi kan bruke dem i koden vår:

 Bruke Base Bootstrap -filen
Inline List

Første element
Andre element
Tredje element
Fjerde element
Femte element

Liste uten stiler

Første element
Andre element
Tredje element
Fjerde element
Femte element

Standard liste

Første element
Andre element
Tredje element
Fjerde element
Femte element

La oss nå se hvordan det ser ut i nettleseren vår, hvor vi kan se at forskjellene umiddelbart er merkbare:

Med dette fullfører vi denne opplæringen, vi har sett at den grunnleggende CSS for Støvelhempe Det gir oss et standardgrunnlag for å sikre at elementer som vi ikke har definert eller tilpasset, vises på en bestemt måte direkte i nettleseren, og gir oss dermed full kontroll over applikasjonen vår uavhengig av nettleseren.