Dans ce post nous verrons la mise en page d'un site Bootstrap pour mettre en valeur les incroyables capacités de ce framework open source. Dans articles précédents nous avions installé un environnement de développement et les plugins nécessaires pour faciliter notre travail.
N'oubliez pas qu'en tant que gestionnaire de contenu de Linux Adictos Cela ne me permet pas d'insérer le code des exemples que j'ai téléchargés sur GitHub. Pour les télécharger vous devez installer le package Git sur votre distribution puis écrire les commandes suivantes :
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Vous devrez exécuter ces deux commandes périodiquement pour télécharger les nouveaux fichiers.
Analyser le code
Maintenant, dans l'explorateur de fichiers, ouvrez example2.html avec VSCodium. (Ouvrir avec le bouton droit) Nous voyons ce qui suit :
- À la ligne 1, nous indiquons au navigateur le type de document afin qu'il sache comment le rendre.
- La ligne 2 indique la langue du site qui indique au navigateur comment représenter certains caractères et aux moteurs de recherche la langue du contenu qui facilite le positionnement. Dans notre code, il est défini comme es mais il existe des variantes régionales telles que es_ES pour l'espagnol d'Espagne ou es_AR pour l'espagnol d'Argentine.
- À partir de la ligne 3, nous avons un conteneur de métadonnées situé entre les balises Oui . Les métadonnées fournissent des informations sur le document. Dans notre exemple :
- La ligne 4 indique la norme utilisée pour le codage des caractères. Peut-être avez-vous vu à l'occasion qu'au lieu de caractères accentués ou de symboles spéciaux, un point d'interrogation à l'intérieur d'un diamant s'affiche. C'est parce que le navigateur utilise un codage incorrect. L'instruction de la ligne 8 évite cela en le déclarant explicitement.
- À la ligne 5, nous indiquons au navigateur comment il doit s'adapter aux différents formats d'écran.
- Le titre que nous avons défini à la ligne 6 sera affiché dans la barre supérieure du navigateur et dans les moteurs de recherche.
- À la ligne 7, nous indiquons au navigateur où trouver les éléments du framework Bootstrap liés au style.
- À partir de la ligne 10, le conteneur commence. Le corps comprend le contenu de la page Web et le lien vers les scripts Bootstrap qui donneront de l'interactivité à notre site.
- La ligne 13 indique la fin du document.
Mise en page d'un site Bootstrap
Concepts clés pour la mise en page d'un site Bootstrap
Comme nous l'avons dit dans les articles précédents, Bootstrap adopte l'approche mobile d'abord. Lorsque cette approche est appliquée, la conception est réalisée avec l'appareil en pensant à la plus petite taille d'écran, puis des couches sont ajoutées pour l'adapter aux tailles qui suivent.
Ici, nous devons prendre en compte deux concepts clés :
- Points d'arrêt.
- Consultation des médias.
Les points d'arrêt indiquent à partir de quelle largeur d'écran la mise en page est modifiée., les requêtes multimédias appliquent des paramètres de style basés sur certaines caractéristiques du navigateur et du système d'exploitation. En d'autres termes, chaque point d'arrêt aura un style correspondant.
Bootstrap est livré avec six points d'arrêt prédéfinis qui peuvent être modifiés par des programmeurs plus avancés. Les points par défaut sont :
- Extra Small : n'a pas d'identifiant prédéfini et s'applique aux écrans de moins de 576 pixels de large.
- Petit : Il est identifié par sm et est utilisé pour les écrans à partir de 576 pixels.
- Moyen : Il est identifié par md et est utilisé pour les écrans à partir de 768 pixels.
- Longueur : Identifié comme lg est utilisé pour les écrans à partir de 992 pixels.
- Extra long : Il a pour identifiant lg et applique les styles aux écrans à partir de 1200 pixels.
- Extra extra long : Marqué de l'identifiant xxl, il sert à appliquer le design sur des écrans à partir de 1400 pixels.
Ces tailles n'ont pas été choisies par hasard car chacun des points d'arrêt peut contenir des conteneurs dont la largeur est un multiple de 12. Ils ne sont pas non plus ciblés sur un appareil spécifique, mais s'adaptent plutôt à différentes catégories d'appareils et de tailles d'écran.
Dans les différentes tailles d'écran, nous trouvons les conteneurs. Ceux-ci sont responsables de l'hébergement, du remplissage et de l'alignement du contenu du site dans un certain appareil ou une fenêtre graphique.
;