Les meilleurs tutoriels Bootstrap pour la conception Web réactive

Bootstrap est un framework front-end populaire pour le développement Web. Il contient des composants prédéfinis et des éléments de conception pour styliser le contenu HTML. Les navigateurs modernes tels que Chrome, Firefox, Opera, Safari et Internet Explorer prennent en charge Bootstrap.

Bootstrap comprend un système de grille réactif pour différentes dispositions. C'est un excellent point de départ pour créer un site Web adapté aux mobiles. Il comprend également des fonctionnalités JavaScript facultatives telles que le contenu pliable, les carrousels et les modaux.

Historique des versions

À l'origine, Twitter a développé le framework Bootstrap en tant qu'outil interne. Ils l'ont publié en tant que projet open source en août 2011.

Bootstrap 2 est sorti en janvier 2012. L'une des principales fonctionnalités a été l'introduction du système de grille responsive à 12 colonnes. Bootstrap 3 est apparu en août 2013, passant à un design plat et à une approche mobile d'abord. Bootstrap 4 est disponible en version bêta à partir d'août 2017 et inclut désormais Sass et Flexbox.

Bootstrap 4 était en développement pendant deux ans avant de publier certaines versions bêta en 2017, tandis que la première version stable était sortie en janvier 2018. Certains changements notables incluent:

  • Passé de Less à Sass;
  • Déplacé vers Flexbox et système de grille amélioré;
  • Cartes ajoutées (remplaçant les puits, les vignettes et les panneaux);
  • Et beaucoup plus!

Au moment de la rédaction de cet article, la dernière version de Bootstrap est la 4.1.3. Si vous souhaitez vous tenir au courant des nouvelles des annonces, suivez-les ici.

Installation

Il existe deux options principales pour ajouter Bootstrap à votre projet Web. Vous pouvez créer un lien vers des sources accessibles au public ou télécharger directement le framework.

Lien vers une autre source

Vous pouvez ajouter Bootstrap CSS en utilisant un élément à l'intérieur de votre page Web qui fait référence à un réseau de diffusion de contenu (CDN):

L'ajout des éléments JavaScript de Bootstrap est similaire avec des éléments généralement placés au bas de votre balise «». Vous devrez peut-être d'abord inclure certaines dépendances. Faites particulièrement attention à la commande indiquée:

Remarque: ce ne sont que des exemples et peuvent changer sans préavis. Veuillez consulter un CDN pour les liens actuels à inclure dans votre projet.

Télécharger / installer

Vous pouvez télécharger et installer les fichiers source Bootstrap avec Bower, Composer, Meteor ou npm. Cela permet un meilleur contrôle et la possibilité d'inclure ou d'exclure des modules selon les besoins.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Remarque: ce ne sont que des exemples et peuvent changer sans préavis. Veuillez vous référer au site vierge 'rel =' nofollow '> Bootstrap pour les liens les plus à jour.

Le système de grille Bootstrap

Le système de grille est un système flexbox mobile pour la création rapide de mises en page de toutes formes et tailles adaptées à tous les appareils. Il est basé sur une disposition de 12 colonnes et comporte plusieurs niveaux, un pour chaque plage de requêtes multimédias.

Bootstrap est livré avec des classes de grille prédéfinies pour votre utilisation dans le balisage. Voir plus de détails et d'exemples sur //getbootstrap.com/docs/4.1/layout/grid/

Caractéristiques Boostrap

Plus d'information:

Bootstrap a une documentation complète avec de nombreux exemples et un modèle HTML pour commencer (ce modèle n'a qu'un script inclus; il ne contient pas de configuration du système de grille si c'est ce que vous recherchez).

De plus, vous pouvez trouver des thèmes gratuits et payants qui s'appuient sur le framework Bootstrap pour fournir un look plus personnalisé et élégant.

Ressources Bootstrap:

Le blog officiel de Bootstrap

Inspiration du site Bootstrap

Vitrine des sites construits avec Bootstrap

HTML linter pour les projets utilisant Bootstrap

Éléments de conception et extraits de code pour Bootstrap

Code, thème et ressources complémentaires pour Bootstrap

Démarrer avec le didacticiel Bootstrap

L'utilisation de Bootstrap facilite la conception d'un site Web entièrement réactif et constitue un cadre qui mérite d'être appris.

Qu'est-ce qu'un site Web réactif?

Un site Web réactif est un site Web qui redimensionne et réorganise les éléments de la page en fonction de la taille de votre navigateur. Avec un site Web réactif, si vous redimensionnez votre navigateur, vous pouvez voir les changements se produire en temps réel. Bootstrap rend votre site Web réactif pour vous.

Comment ajouter Bootstrap à votre page

L'ajout de bootstrap à votre page est un processus rapide, ajoutez simplement ce qui suit aux balises de votre code.

Vous devrez également ajouter les éléments suivants entre les bodybalises de votre code. Avec bootstrap, vous utiliserez des balises. Lors de l'utilisation de nombreuses fonctionnalités de Bootstrap, chaque balise aura son propre ensemble unique de classes appliquées qui permet à la balise d'effectuer sa tâche. D'autres sections de ce guide Bootstrap montreront plus d'exemples de la façon dont Bootstrap utilise les balises. (Les balises ne sont pas exclusives à Bootstrap, cependant Bootstrap les utilise.).

Vous trouverez ci-dessous le code qui s'ajouterait aux bodybalises de votre code pour terminer la mise en route. Gardez à l'esprit que pendant que cela crée le conteneur, la page restera vide jusqu'à ce que vous ajoutiez du contenu au conteneur.

Congratulations!

Bootstrap is now working on this page

Modèles

Les modèles sont des boîtes à outils prédéfinies qui facilitent la création d'une nouvelle page Web. Si vous avez une idée générale de la mise en page souhaitée, ou si vous souhaitez parcourir une bibliothèque de modèles de mise en page courants pour trouver des idées, les modèles Bootstrap éliminent une grande partie de l'ennui et des frustrations du processus de construction initial. Cette assistance vous aide à vous concentrer sur les moindres détails du projet au lieu de vous demander pourquoi CSS ne coopère pas.

Commencer

Liens de modèles

Barre de navigation

Le framework Bootstrap vous fournit des barres de navigation pour les appels de fonctionnalités. En bref, une barre de navigation (également appelée navbars) est un en-tête en haut de la page pour afficher les informations de navigation.

Comment utiliser

Pour utiliser les barres de navigation Bootstrap, vous ajoutez un élément en haut à l'intérieur de l' élément de votre page Web. Vous pouvez ajouter différents styles pour personnaliser l'affichage de vos barres de navigation.

Exemple de code

C'est le code nécessaire pour créer une barre de navigation de base.

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

Styles de la barre de navigation

Bootstrap fournit un ensemble de classes dans le framework Bootstrap pour styliser vos barres de navigation. Ces classes sont les suivantes:

Ajout de menus déroulants à la barre de navigation

Vous pouvez inclure un menu déroulant dans une barre de navigation. Cette fonctionnalité nécessite que vous incluiez le fichier javascript de Bootstrap pour que cela fonctionne.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Ajout de boutons à la barre de navigation

    Vous pouvez ajouter des boutons sur la barre de navigation. Les classes Bootstrap Button existantes fonctionnent, mais vous devrez inclure la classe navbar-btnà la fin de la liste des classes.

    Button

    Ajout de formulaires à la barre de navigation

    Vous pouvez également ajouter des formulaires à la barre de navigation. Cela pourrait être utilisé pour des tâches telles qu'un champ de recherche, un champ de connexion rapide, etc.

     Search 

    Alignement des éléments à droite sur la barre de navigation

    Dans certains cas, vous souhaiterez peut-être aligner les éléments d'une barre de navigation vers la droite (par exemple, un bouton de connexion ou d'inscription). Pour ce faire, vous devrez utiliser la navbar-rightclasse.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Affichage de la barre de navigation indépendamment du défilement

    Dans certains cas, vous souhaiterez peut-être conserver la barre de navigation en haut ou en bas de l'écran, quel que soit le défilement. Vous devrez ajouter la classe navbar-fixed-topou navbar-fixed-bottomà l' élément.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Réduire la barre de navigation

    Sur un petit écran (tel qu'un téléphone ou une tablette), la barre de navigation prendra trop de place. Heureusement, l'option de réduire la barre de navigation existe. Vous pouvez accomplir cela en utilisant l'exemple suivant.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Exemples de barre de navigation

    Original text