Diagramació d'un lloc Bootstrap

Bootstrap porta predefinides mides de pantalla per adaptar el disseny

En aquest post veurem la diagramació de Bootstrap per mostrar les capacitats increïbles d'aquest framework de codi obert. A articles anteriors havíem instal·lat un entorn de desenvolupament i els complements necessaris per facilitar-nos la feina.

Recorda que com que el gestor de continguts de Linux Addictes no em permet inserir el codi dels exemples els vaig pujar a GitHub. Per descarregar-los has d'instal·lar el paquet Git a la teva distribució i després escriure les següents ordres:

cd Documentos

git clone https://github.com/dggonzalez1971/bootstrap.git

Hauràs d'executar aquestes dues ordres en forma periòdica per descarregar els nous fitxers.

Analitzant el codi

Ara a l'explorador de fitxers obre exemple2.html amb VSCodium. (Botó dret Obrir amb) Veiem el següent:

  • A la línia 1 indiquem al navegador el tipus de document perquè sàpiga com representar-lo.
  • La línia 2 indica l'idioma del lloc allò que indica al navegador com representar determinats caràcters i als motors de cerca l'idioma del contingut el que facilita el posicionament. Al nostre codi està definit com és però existeixen variants regionals com és_ES per a espanyol d'Espanya o és_AR per a espanyol d'Argentina.
  • A partir de la línia 3 tenim un contenidor de metadades ubicades entre els tags i . Les metadades ofereixen informació sobre el document. En el nostre exemple:
  • La línia 4 indica l'estàndard utilitzat per a la codificació de caràcters. Potser has vist alguna vegada que en lloc dels caràcters accentuats o símbols especials es mostren un signe de pregunta dins d'un rombe. Això és perquè el navegador utilitza una codificació inadequada. La instrucció de la línia 8 ho evita en declarar-la de manera explícita.
  • A la línia 5 diem al navegador com s'ha d'adaptar als diferents formats de pantalla.
  • El títol que establim a la línia 6 serà mostrat a la barra superior del navegador i als motors de cerca.
  • A la línia 7 indiquem al navegador on trobar els elements del framework Bootstrap relacionats amb l'estil.
  • A partir de la línia 10 comença el contenidor. Body inclou el contingut de la pàgina web i l'enllaç als scripts de Bootstrap que us donaran interactivitat al nostre lloc.
  • La línia 13 indica la fi del document.

Diagramació d'un lloc Bootstrap

Conceptes clau per a la diagramació d'un lloc Bootstrap

Com vam dir en articles anteriors, Bootstrap adopta l'enfocament mobile first. Quan s'aplica aquest enfocament el disseny es fa pensant en el dispositiu de mida de pantalla més petita per després anar afegint capes que l'adaptin a les mides que segueixen.

Aquí hem de tenir en compte dos conceptes claus:

  • Punts dinterrupció.
  • Consulta de mitjans.

Els punts d‟interrupció indiquen a partir que amplada de pantalla es modifica el disseny, Les consultes de mitjans apliquen paràmetres d'estil en funció de determinades característiques del navegador i sistema operatiu. En altres paraules, a cada punt de fallida li correspondrà un estil.

Bootstrap ve amb sis punts d'interrupció predefinits que poden ser modificats pels programadors més avançats. Els punts predefinits són:

  • Extrapetit: No té un identificador preestablert i s'aplica a pantalles de menys de 576 píxels d'amplada.
  • Petit: S'identifica amb sm i s'utilitza per a pantalles a partir de 576 píxels.
  • Mitjà: S'identifica amb md i s'utilitza per a pantalles des de 768 píxels.
  • Llarg: Identificat com a lg s'utilitza per a pantalles a partir de 992 píxels.
  • Extrallarg: Té l'identificador lg i aplica els estils a pantalles des de 1200 píxels.
  • Extra extrallarg: Marcat amb l'identificador xxl, es fa servir per aplicar el disseny a pantalles des de 1400 píxels.

Aquestes mides no es van triar en forma casual ja que cadascun dels punts d'interrupció poden contenir contenidors els amples dels quals siguin múltiples de 12.  Tampoc no són dirigits a un dispositiu específic, sinó que s'adapten a diferents categories de dispositius i mides de pantalla.

Dins les diferents mides de pantalla trobem els contenidors.  Aquests s'encarreguen d'allotjar, emplenar i alinear el contingut del lloc en un determinat dispositiu o finestra gràfica.

;


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: AB Internet Networks 2008 SL
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.