În această postare vom vedea aspectul unui site Bootstrap pentru a prezenta capabilitățile uimitoare ale acestui cadru open source. În articolele anterioare instalasem un mediu de dezvoltare și pluginurile necesare pentru a ne facilita munca.
Amintiți-vă că în calitate de manager de conținut al Linux Adictos Nu îmi permite să introduc codul exemplelor pe care le-am încărcat pe GitHub. Pentru a le descărca trebuie să instalați pachetul Git pe distribuția dvs. și apoi să scrieți următoarele comenzi:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Va trebui să rulați aceste două comenzi periodic pentru a descărca fișierele noi.
Analizând codul
Acum, în exploratorul de fișiere, deschide example2.html cu VSCodium. (Deschide cu butonul din dreapta) Vedem următoarele:
- În linia 1 îi spunem browserului tipul de document, astfel încât să știe cum să îl redeze.
- Linia 2 indică limba site-ului care indică browserului cum să reprezinte anumite caractere și motoarelor de căutare limba conținutului care facilitează poziționarea. În codul nostru este definit ca es, dar există variante regionale precum es_ES pentru spaniolă din Spania sau es_AR pentru spaniolă din Argentina.
- Din linia 3 avem un container de metadate situat între etichete Y . Metadatele oferă informații despre document. În exemplul nostru:
- Linia 4 indică standardul utilizat pentru codificarea caracterelor. Poate ați văzut ocazional că în loc de caractere accentuate sau simboluri speciale, este afișat un semn de întrebare în interiorul unui diamant. Acest lucru se datorează faptului că browserul folosește codare necorespunzătoare. Declarația de pe linia 8 evită acest lucru declarându-l în mod explicit.
- În rândul 5 îi spunem browserului cum ar trebui să se adapteze la diferite formate de ecran.
- Titlul pe care l-am stabilit la rândul 6 va fi afișat în bara de sus a browserului și în motoarele de căutare.
- Pe linia 7 îi spunem browserului unde să găsească elementele cadrului Bootstrap legate de stil.
- De la linia 10 începe containerul. Body include conținutul paginii web și linkul către scripturile Bootstrap care vor oferi interactivitate site-ului nostru.
- Rândul 13 indică sfârșitul documentului.
Aspectul unui site Bootstrap
Concepte cheie pentru aspectul unui site Bootstrap
După cum am spus în articolele anterioare, Bootstrap adoptă prima abordare mobilă. Când se aplică această abordare, designul este realizat cu dispozitivul având în vedere cea mai mică dimensiune a ecranului, apoi se adaugă straturi pentru a-l adapta la dimensiunile care urmează.
Aici trebuie să luăm în considerare două concepte cheie:
- Puncte de întrerupere.
- Consultare media.
Punctele de întrerupere indică din ce lățime a ecranului este modificat aspectul., Interogările media aplică parametri de stil pe baza anumitor caracteristici ale browserului și ale sistemului de operare. Cu alte cuvinte, fiecare punct de întrerupere va avea un stil corespunzător.
Bootstrap vine cu șase puncte de întrerupere predefinite care pot fi modificate de programatori mai avansați. Punctele implicite sunt:
- Foarte mic: nu are un identificator prestabilit și se aplică ecranelor cu lățime mai mică de 576 de pixeli.
- Mic: este identificat cu sm și este folosit pentru ecrane de la 576 pixeli.
- Mediu: Se identifică cu md și este folosit pentru ecrane de la 768 pixeli.
- Lungime: Identificat ca lg este folosit pentru ecrane de la 992 pixeli.
- Extra lung: are identificatorul lg și aplică stilurile pe ecrane de la 1200 de pixeli.
- Extra lung: marcat cu identificatorul xxl, este folosit pentru a aplica designul pe ecrane de la 1400 de pixeli.
Aceste dimensiuni nu au fost alese întâmplător ca fiecare dintre punctele de întrerupere poate conține containere ale căror lățimi sunt multipli de 12. De asemenea, nu sunt direcționate către un anumit dispozitiv, ci se adaptează la diferite categorii de dispozitive și dimensiuni de ecran.
În cadrul diferitelor dimensiuni ale ecranului găsim containerele. Aceștia sunt responsabili pentru găzduirea, completarea și alinierea conținutului site-ului într-un anumit dispozitiv sau fereastră grafică.
;