Un guide du débutant pour créer un site Web réactif avec Bootstrap - Partie 1

Dernière mise à jour le 5 juin 2019

Cet article est destiné à éduquer les développeurs Web sur l'utilisation des principes de base du cadre Bootstrap pour créer des sites Web réactifs rapidement et efficacement. Cela réduit le coût de production et permet aux entreprises de donner à leurs développeurs les moyens de gérer et de créer facilement des sites Web et des pages. Je vais passer par le processus de téléchargement du framework Bootstrap et les avantages de l'utilisation de ce framework pour vos efforts de développement Web.

Qu'est-ce que Bootstrap ?

Selon le site Web officiel de Bootstrap (getbootstrap.com), "Bootstrap est le framework HTML, CSS et JavaScript le plus populaire pour le développement de premiers projets réactifs et mobiles sur le Web". En termes plus simples, Bootstrap est un cadre exceptionnellement simple pour aider à rendre le développement Web frontal plus rapide et attrayant pour les développeurs de différents niveaux de compétence.

Pourquoi utiliser Bootstrap ?

Le potentiel de conception de sites Web pour divers supports, y compris les grands écrans, les écrans ordinaires, les téléphones et les tablettes, rend Bootstrap incroyablement attrayant et un choix intelligent pour produire du contenu Web. Un framework tel que Bootstrap fournit des fonctionnalités génériques qui peuvent être modifiées facilement pour optimiser le site Web pour une variété de fonctions et une réactivité qui ne nécessite pas de codage en dur. C'est en bref, l'un des moyens les plus simples de créer un site Web tout en ayant la possibilité de le personnaliser, contrairement à un site WordPress.

Comment commencer

Pour démarrer avec Bootstrap, vous devez visiter le site Web officiel de Bootstrap (http://getbootstrap.com/). Bootstrap est un projet open source et il est hébergé, développé et maintenu sur GitHub ; cela permet aux utilisateurs d'avoir accès au code source et de comprendre toute la portée du cadre en tant qu'outil de création de sites Web.

Il existe trois façons de télécharger la version actuelle de Bootstrap (v3.3.6) : vous pouvez télécharger une version conforme de Bootstrap, vous pouvez télécharger le code source de Bootstrap et vous pouvez porter le framework Bootstrap de Less vers Sass. Dans ce cas, si vous êtes débutant, je vous suggère simplement de télécharger la version conforme de Bootstrap. Si vous souhaitez intégrer le framework Bootstrap dans des projets Rails, Compass ou Sass uniquement, vous devez transférer le téléchargement de Less vers Sass.

Une fois que vous avez téléchargé le fichier Boostrap, vous devez décompresser le dossier compressé pour voir la structure du framework Bootstrap conforme. Regardez ci-dessous pour voir la structure du fichier :

Maintenant, vous pouvez simplement déposer ces fichiers dans le système de fichiers de n'importe quel projet Web sur lequel vous travaillez et commencer à travailler avec Bootstrap pour concevoir et créer le projet souhaité. Pour plus d'informations sur les fonctionnalités de Bootstrap, que nous aborderons dans la partie 2 de cet article, n'hésitez pas à visiter le site Web getboostrap.com pour afficher les composants, les fonctionnalités CSS et les fonctions JavaScript accessibles avec le framework.

Conception réactive

La conception réactive est l'une des caractéristiques principales du framework Bootstrap. la possibilité de développer de manière réactive avec Bootstrap permet aux développeurs de développer un site Web unique qui peut être correctement formaté sur toutes les plates-formes de visualisation. Souvent, un site Web peut être bien conçu et l'expérience utilisateur est optimale sur une seule plate-forme ou taille d'écran spécifique. Bootstrap fait un travail incroyable pour lutter contre ces problèmes en permettant aux développeurs d'affecter certaines colonnes de la page Web à certaines tailles lorsqu'elles sont lues sur un écran plus petit. Il existe quatre types d'appareils pris en compte par Bootstrap lors de la création de sites Web réactifs :

• Très petits appareils (téléphones intelligents <768px)
• Petits appareils (tablettes >= 768px)
• Appareils moyens (ordinateurs de bureau >= 992px)
• Appareils volumineux (ordinateurs de bureau > = 1 200 pixels)

Le développeur peut ajouter des balises à ces classes ci-dessus pour définir certains contenus Web à réduire, développer, masquer ou être visibles sur certaines plates-formes. Ceci est extrêmement utile pour simplifier le processus de création de l'apparence du site Web.

Système de grille

Bootstrap a un système de grille qui est la principale caractéristique qui permet d'utiliser le cadre pour concevoir des sites Web réactifs. Toutes les lignes de Bootstrap doivent être placées dans une classe de conteneur, puis les lignes suivantes peuvent être définies comme certaines tailles.

Voici un exemple de notation pour le système de grille :

• La classe de ligne prédéfinie produit une ligne
• Dans cette ligne, la deuxième classe spécifie "col-md-6"
• Cela signifie que la classe produit une colonne qui s'étend sur 6 colonnes sur la page Web
• Le "md" spécifie que cela ne se produira que sur des appareils ou des ordinateurs de bureau de taille inférieure ou égale à 768 px.
• La classe "offset" signifie que ces colonnes seront laissées vides. Dans ce cas, le décalage est de 3, donc trois colonnes seront laissées avec un espace vide pour remplir une partie du contenu.
  Ce système de grille permet aux développeurs de définir rapidement des sections de contenu et d'avoir l'espacement approprié entre le contenu pour avoir une conception propre et réactive.

Défis avec Bootstrap

Les tailles des fichiers JavaScript et CSS sont importantes lors du téléchargement direct de tous les fichiers Bootstrap. Cela peut entraîner des difficultés lors de la création d'une page rapide. En effet, tous les fichiers des fichiers Bootstrap ne sont pas complètement utilisés, ce qui peut signifier que le téléchargement de données inutiles peut poser problème. Cela peut affecter l'expérience utilisateur, alors n'hésitez pas à vérifier cela plus en profondeur en visitant le post, Comment utiliser les bases de Bootstrap pour améliorer l'expérience utilisateur (https://moz.com/ugc/how-to-use-bootstrap- bases-pour-améliorer-l'expérience-utilisateur).

J'espère que vous allez tous essayer Bootstrap, car c'est un cadre fantastique pour créer des conceptions de sites Web réactives et propres. Restez à l'écoute pour le prochain article de la série traitant d'autres concepts de départ sur Bootstrap.

Auteur : Esme Vazquez, développeur Web junior

Un créateur, un artiste, un joueur, un codeur, un développeur Web et un blogueur ; Esme est la créatrice de la récente publication de blog Indiellect sur le site de blog de gestion de contenu Medium. Son expérience actuelle réside dans le développement Web et le développement de jeux; elle travaille actuellement et suit une formation en SEO chez That! Entreprise à Leesburg, FL en tant que développeur Web junior. Elle aspire à créer des jeux vidéo à l'avenir qui dépeignent la beauté de l'humanité. Si vous avez des questions, n'hésitez pas à lui envoyer un tweet à @EsmeVazquez18 et/ou à l'ajouter sur LinkedIn.