Introduction à Bootstrap 4 Flex Layout

La dernière version du Framework de développement Bootstrap 4 est sortie !

Bootstrap est un framework CSS gratuit et open source pour le développement Web frontal réactif et mobile. Il contient des modèles de conception basés sur CSS et (éventuellement) basés sur JavaScript pour la typographie, les formulaires, les boutons, la navigation et d’autres composants d’interface.

En août 2021, Bootstrap est le 10e projet étoile sur GitHub, avec plus de 152 000 étoiles, juste derrière freeCodeCamp (plus de 328 000 étoiles).

Bootstrap est un environnement de conception de sites Web . L’objectif principal de Bootstrap est de créer des sites Web réactifs et mobiles. Il garantit que tous les éléments d’interface du site Web fonctionneront de manière optimale sur toutes les tailles d’écran.

Il permet d’utiliser les règles CSS pour concevoir des sites Web modernes, attrayants et réactifs (responsive web design). Ce livre s’adresse à tous les concepteurs de sites Web qui sont déjà familiarisés avec HTML et CSS, qui souhaitent travailler efficacement et commencer sur des bases solides. Il est écrit en Bootstrap version 4.3.

Bootstrap a été développé par Mark Otto et Jacob Thornton de Twitter, et a été publié en tant que produit open source sur GitHub en août 2011.

Boostrap est le framework de conception Web le plus populaire au monde, avec un système de grille réactif, des variables Sass et un mélange, de puissants plug-ins JavaScript et une large gamme de composants prédéfinis, rendant le développement Web réactif plus facile et plus rapide. Bootstrap est utilisé pour développer des sites réactifs et adaptés aux mobiles, avec un modèle de page de démarrage et Bootstrap CDN.

Maintenant, nous allons les parcourir et comprendre à l’aide d’exemples sur Bootstrap 4.

Bootstrap 4 est gratuit à télécharger et à utiliser ! Vous pouvez économiser beaucoup de temps et d’efforts avec Bootstrap.

Avantages de l’utilisation de Bootstrap :

Vous vous demandez peut-être ce qui rend Bootstrap si spécial. Voici les raisons pour lesquelles on devrait choisir le framework Bootstrap:

• Facile à utiliser
• Gratuit
• Open source
• Fonctionnalités réactives
• Conception cohérente
• Gagnez beaucoup de temps
• Compatible avec les navigateurs

Qu’est-ce que Flexbox ?

Flexbox est synonyme de boîte flexible. Il s’agit d’un nouveau mode de mise en page de CSS3 qui est nommé module de mise en page de boîte flexible CSS. Ce système de mise en page CSS de pointe est un outil puissant qui simplifie la conception de mises en page pour des tailles d’écran inconnues ou dynamiques. Le conteneur flex peut contrôler et ajuster la taille de ses éléments enfants pour s’adapter à différentes fenêtres.

Vous pouvez facilement créer une mise en page Flexbox à l’aide d’un ensemble de propriétés CSS destinées à cette tâche. Il devient facile de créer des mises en page basées sur Flexbox à l’aide de Bootstrap, car il fournit un ensemble de classes wrapper en plus des fonctionnalités Flexbox, que vous pouvez facilement appliquer à votre balisage pour obtenir les résultats souhaités.

Le principal avantage de ce mode de mise en page est qu’il effectue plus facilement les tâches de mise en page suivantes:

• Spécification de la direction de mise en page
• Disposition des articles
• Spécification de l’ordre de présentation des éléments

Les Flex items

L’idée principale est de donner à un élément contenant (conteneur) la possibilité de changer la largeur et la hauteur de l’élément contenu (item) pour remplir au mieux l’espace disponible et s’adapter à tous les terminaux et toutes les tailles d’écran. Les conteneurs souples permettent aux objets de se dilater pour occuper l’espace disponible, ou au contraire de les réduire pour éviter qu’ils ne débordent.

Le module flexbox, également connu sous le nom de « flexbox », est conçu comme un modèle de mise en page unidimensionnel et une méthode d’allocation d’espace et d’alignement entre les objets d’interface. Dans cet article, nous verrons les principales fonctionnalités de flexbox, puis nous présenterons ces fonctionnalités plus en détail dans d’autres articles.

En décrivant flexbox comme une méthode de mise en page unidimensionnelle, nous disons en fait que flexbox ne traite qu’une dimension à la fois : une ligne ou une colonne. Ce modèle sera comparé à un modèle contrôle les d’une grille CSS colonnes et les lignes.

Disposition Bootstrap 4 Flex

L’utilitaire Flex vous aide à gérer la mise en page, les colonnes de la grille, la navigation, l’alignement et d’autres modules complémentaires de la page. Vous pouvez facilement créer une structure de mise en page sans utiliser de positionnement ou de flottement.

Maintenant, créons et expliquons une mise en page simple en utilisant le système de grille Bootstrap 4.

Voici les principaux composants de la grille Bootstrap :

Container

Le conteneur est l’enveloppe extérieure de la disposition de la grille. C’est un div qui a soit le .container-fluid pour une largeur totale de 100% ou classe .container pour une largeur fixe.

Row

Une ligne fonctionne comme un conteneur logique pour les colonnes.

Column

Une colonne est quelque chose qui forme un bloc dans la grille. Il doit être contenu dans une ligne.

Étape 1:  Tout d’abord, vous devez commencer par créer une page HTML et la lier aux ressources Bootstrap 4.

<! doctype html> 

<html lang = "en"> 

  <head> 

    <! - Balises meta obligatoires -> 

    <meta charset = "utf-8"> 

    <meta name = "viewport" content = "width = device- width, initial-scale = 1, shrink-to-fit = no "> 

    <! - Bootstrap CSS -> 

    <link rel =" stylesheet "href =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0. 0 / css / bootstrap.min.css » intégrité = "SHA384-Gn5384xssffqQ1aoWggXA + 058RXPxPgss6fy4IWvTNfh0ss263XmFcJlSAwiGgFAW / dAiS6JXm" crossorigin = "anonymes"> 

    <title> BS 4 ēno Exemples </ title> 

  </ head> 

  <body> 

    Ajouter du contenu ici 

    <! - JavaScript facultatif ->

    <! - jQuery d'abord, puis Popper.js, puis Bootstrap JS ->

    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" intégrité = "sha384-KJ3o2DKtIkvYIK3UENffsz456zmM7KCkRr / rE9 / Qpg6aAZGJjkl9origFDMVNA / GpGFF93script" cross-anonyme " 

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" intégrité = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgff78PxhU9K / ScorigskFP7hUibXbx39j7" "> </script> 

    <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "intégrité =" sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQG98yhorigjiRRSQQxSfarFdpi5 Vlm_originRRSQ1 "vLEHfe / JQG98yhorigjiRRSQQxSfarFdlAm = 76VinMV "> </script> 

  </body> 

</html>

La grille peut être créée en utilisant certaines des classes BS prédéfinies (.container, .row, col – * – *).

La grille doit avoir un conteneur, des lignes et des colonnes.

Le conteneur est simplement un <div> avec les classes .container. Les lignes fournissent une base pour les colonnes et les colonnes sont ce qui constitue les cellules du système de grille.

Étape 2: Créez une colonne, pour cela il vous suffit d’utiliser un <div> avec la (les) classe (s) col – * – *

La première étoile pour le point d’arrêt de l’écran (xs, sm, md, lg, xl) et la deuxième étoile pour la taille de la colonne (1 .. 12).

<div class = "row"> 

    <div class = "col-sm-1 first-column"> 

      <p> .col-sm-1 </p> 

    </div> 

    ... 

    <div class = "col- sm-1 deuxième colonne "> 

      <p> .col-sm-1 </p> 

    </div>    

  </div>

Étape 3:  Maintenant, créons une deuxième ligne avec deux colonnes

<div class = "row"> 

    <div class = "col-sm-6 first-column"> 

      <p> .col-sm-6 </p> 

    </div> 

    <div class = "col-sm-6 second-column "> 

      <p> .col-sm-6 </p> 

    </div>    

  </div> 

Notez que .col-sm-6 + .col-sm-6 === .col-sm-12

Conclusion :

Malgré ses avantages, Bootstrap présente certaines limitations qui ne conviennent pas à certains types de projets.

Étant donné que Bootstrap a un style visuel cohérent, il nécessite beaucoup de personnalisation et une surcouche de style importante pour rendre un projet différent d’un autre. Sinon, tous les sites Web construits avec ce Framework auront les mêmes composants de navigation, de structure et de conception, ce qui le rendra peu professionnel.

La chose la plus importante à retenir est que la mise en page de Flexbox n’est pas strictement directionnelle, ce qui est différent de ce que nous connaissons habituellement en CSS où un Block est basé sur un schéma vertical et Inline est basé sur un schéma horizontal. Il convient aux pages, mais manque de flexibilité dans les applications complexes, en particulier pour s’adapter aux changements d’orientation de l’appareil, au redimensionnement, à l’expansion ou à la réduction de l’espace, etc. Il faut donc effectuer des test pour vérifier le responsive.

Dans ce didacticiel, nous avons couvert les fonctionnalités du framework Bootstrap 4, en commençant par les bases, telles que le système de grille, les éléments d’interface utilisateur courants tels que le conteneur, les tables, les listes, les images, etc. Bootstrap a toujours été un framework CSS dominant et puissant pour les développeurs créant leurs sites Web sans avoir besoin d’un concepteur CSS dans l’équipe. De nouvelles fonctionnalités supplémentaires telles que la prise en charge par défaut de Flexbox constituent un excellent outil pour créer des mises en page réactives.

Le framework Bootstrap est suffisamment flexible et robuste pour répondre à presque tous les besoins de développement de sites Web frontaux. Sa meilleure caractéristique est un modèle de conception qui permet aux pages Web de fonctionner au mieux sur toutes les tailles d’écran.