I det här inlägget kommer vi att se layouten för en Bootstrap-sajt för att visa upp de fantastiska funktionerna i detta ramverk med öppen källkod. I tidigare artiklar vi hade installerat en utvecklingsmiljö och nödvändiga plugins för att underlätta vårt arbete.
Kom ihåg det som innehållsansvarig för Linux Adictos Det tillåter mig inte att infoga koden för de exempel jag laddade upp till GitHub. För att ladda ner dem måste du installera Git-paketet på din distribution och sedan skriva följande kommandon:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Du måste köra dessa två kommandon med jämna mellanrum för att ladda ner de nya filerna.
Analyserar koden
Öppna nu example2.html i filutforskaren med VSCodium. (Öppna med höger knapp) Vi ser följande:
- På rad 1 berättar vi för webbläsaren vilken typ av dokument som är så att den vet hur det ska renderas.
- Rad 2 anger språket på webbplatsen som anger för webbläsaren hur man representerar vissa tecken och för sökmotorer språket för innehållet som underlättar positionering. I vår kod definieras det som es men det finns regionala varianter som es_ES för spanska från Spanien eller es_AR för spanska från Argentina.
- Från rad 3 har vi en metadatabehållare placerad mellan taggarna Y . Metadata ger information om dokumentet. I vårt exempel:
- Rad 4 anger standarden som används för teckenkodning. Du kanske har sett vid enstaka tillfällen att istället för accenttecken eller specialsymboler visas ett frågetecken inuti en diamant. Detta beror på att webbläsaren använder felaktig kodning. Uttalandet på rad 8 undviker detta genom att deklarera det uttryckligen.
- På rad 5 berättar vi för webbläsaren hur den ska anpassa sig till olika skärmformat.
- Titeln vi ställer in på rad 6 kommer att visas i den övre raden i webbläsaren och i sökmotorer.
- På rad 7 berättar vi för webbläsaren var man kan hitta Bootstrap-ramelementen relaterade till styling.
- Från linje 10 börjar containern. Brödtexten innehåller innehållet på webbsidan och länken till Bootstrap-skripten som ger interaktivitet till vår webbplats.
- Rad 13 indikerar slutet på dokumentet.
Layout av en Bootstrap-webbplats
Nyckelkoncept för layouten av en Bootstrap-sajt
Som vi sa i tidigare artiklar, Bootstrap tar det mobila första tillvägagångssättet. När detta tillvägagångssätt tillämpas görs designen med enheten med den minsta skärmstorleken i åtanke, och sedan läggs lager för att anpassa den till de storlekar som följer.
Här måste vi ta hänsyn till två nyckelbegrepp:
- Brytpunkter.
- Mediekonsultation.
Brytpunkterna anger från vilken skärmbredd layouten ändras., Mediefrågor tillämpar stilparametrar baserat på vissa egenskaper hos webbläsaren och operativsystemet. Med andra ord kommer varje brytpunkt att ha en motsvarande stil.
Bootstrap kommer med sex fördefinierade brytpunkter som kan modifieras av mer avancerade programmerare. Standardpunkterna är:
- Extra Small: Har ingen förinställd identifierare och gäller skärmar som är mindre än 576 pixlar breda.
- Liten: Den identifieras med sm och används för skärmar från 576 pixlar.
- Medium: Den identifieras med md och används för skärmar från 768 pixlar.
- Längd: Identifierad som lg används för skärmar från 992 pixlar.
- Extra lång: Den har identifieraren lg och tillämpar stilarna på skärmar från 1200 pixlar.
- Extra extra lång: Markerad med identifieraren xxl används den för att applicera designen på skärmar från 1400 pixlar.
Dessa storlekar valdes inte slentrianmässigt som var och en av brytpunkterna kan innehålla behållare vars bredder är multiplar av 12. De är inte heller riktade till en specifik enhet, utan anpassar sig istället till olika kategorier av enheter och skärmstorlekar.
Inom de olika skärmstorlekarna hittar vi behållarna. Dessa ansvarar för att hosta, fylla och anpassa innehållet på webbplatsen i en viss enhet eller grafiskt fönster.
;