I dette innlegget vil vi se oppsettet til et Bootstrap-nettsted for å vise frem de fantastiske egenskapene til dette åpen kildekode-rammeverket. I tidligere artikler vi hadde installert et utviklingsmiljø og nødvendige plugins for å lette arbeidet vårt.
Husk det som innholdsansvarlig for Linux Adictos Det tillater meg ikke å sette inn koden til eksemplene jeg lastet opp til GitHub. For å laste dem ned må du installere Git-pakken på distribusjonen din og deretter skrive følgende kommandoer:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Du må kjøre disse to kommandoene med jevne mellomrom for å laste ned de nye filene.
Analyserer koden
Nå i filutforsker åpne example2.html med VSCodium. (Åpne med høyre knapp) Vi ser følgende:
- I linje 1 forteller vi nettleseren typen dokument slik at den vet hvordan den skal gjengis.
- Linje 2 angir språket på nettstedet som indikerer for nettleseren hvordan enkelte tegn skal representeres og for søkemotorer språket til innholdet som letter posisjonering. I vår kode er det definert som es, men det er regionale varianter som es_ES for spansk fra Spania eller es_AR for spansk fra Argentina.
- Fra linje 3 har vi en metadatabeholder plassert mellom taggene Y . Metadata gir informasjon om dokumentet. I vårt eksempel:
- Linje 4 angir standarden som brukes for tegnkoding. Kanskje har du noen ganger sett at i stedet for aksenttegn eller spesialsymboler, vises et spørsmålstegn inne i en diamant. Dette er fordi nettleseren bruker feil koding. Utsagnet på linje 8 unngår dette ved å erklære det eksplisitt.
- I linje 5 forteller vi nettleseren hvordan den skal tilpasse seg ulike skjermformater.
- Tittelen vi satte i linje 6 vil vises i den øverste linjen i nettleseren og i søkemotorer.
- På linje 7 forteller vi nettleseren hvor de finner Bootstrap-rammeelementene knyttet til styling.
- Fra linje 10 starter containeren. Brødtekst inkluderer innholdet på nettsiden og lenken til Bootstrap-skriptene som vil gi interaktivitet til nettstedet vårt.
- Linje 13 indikerer slutten av dokumentet.
Layout av et Bootstrap-nettsted
Nøkkelkonsepter for utformingen av et Bootstrap-nettsted
Som vi sa i tidligere artikler, Bootstrap tar den mobile første tilnærmingen. Når denne tilnærmingen brukes, gjøres designet med enheten med den minste skjermstørrelsen i tankene, og deretter legges det til lag for å tilpasse den til størrelsene som følger.
Her må vi ta hensyn til to nøkkelbegreper:
- Knekkpunkter.
- Mediekonsultasjon.
Knekkpunktene indikerer fra hvilken skjermbredde oppsettet er endret., Mediespørringer bruker stilparametere basert på visse nettleser- og operativsystemegenskaper. Med andre ord vil hvert bruddpunkt ha en tilsvarende stil.
Bootstrap kommer med seks forhåndsdefinerte bruddpunkter som kan endres av mer avanserte programmerere. Standardpunktene er:
- Ekstra liten: Har ikke en forhåndsinnstilt identifikator og gjelder for skjermer med en bredde på mindre enn 576 piksler.
- Liten: Den identifiseres med sm og brukes til skjermer fra 576 piksler.
- Medium: Den identifiseres med md og brukes for skjermer fra 768 piksler.
- Lengde: Identifisert som lg brukes for skjermer fra 992 piksler.
- Ekstra lang: Den har identifikatoren lg og bruker stilene på skjermer fra 1200 piksler.
- Ekstra ekstra lang: Merket med identifikatoren xxl brukes den til å bruke designet på skjermer fra 1400 piksler.
Disse størrelsene ble ikke valgt tilfeldig som hvert av bruddpunktene kan inneholde beholdere med bredder på 12. De er heller ikke målrettet mot en bestemt enhet, men tilpasser seg i stedet til ulike kategorier av enheter og skjermstørrelser.
Innenfor de forskjellige skjermstørrelsene finner vi containerne. Disse er ansvarlige for å hoste, fylle ut og justere innholdet på nettstedet i en bestemt enhet eller grafisk vindu.
;