Sélectionner une page
Développement Web

Introduction à Bootstrap 4 Flex Layout

Publié le 14 mars 2021

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

bootstrap 4
Bootstrap 4

Boostrap est le framework de conception web le plus populaire au monde avec un système de grille réactif, des variables Sass et des mixins, de puissants plugins JavaScript et des composants prédéfinis étendus pour un développement Web réactif plus facile et plus rapide. Bootstrap est utilisé pour développer des sites responsive et adaptés aux mobiles, avec une page de démarrage de modèle et BootstrapCDN.

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.

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

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 composants supplémentaires de la page. Il devient facile de 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

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
  • Open source
  • Fonctionnalités réactives
  • Conception cohérente
  • Gagnez beaucoup de temps
  • Compatible avec les navigateurs

Conclusion :

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.

Pour tout renseignement sur nos services d’agence digitale à Montpellier. Contactez-nous via le chat de notre site web du lundi au vendredi de 9h00 à 18h00

Demander un devis Solutions Développement I Solutions Design Graphique I Solutions Marketing Digital I Blog

Dans la même catégorie

28 Nov 2021

Les 5 principaux cas d’utilisation de Tensorflow

Développement Web
27 Nov 2021

Qu’est-ce que TensorFlow ? La bibliothèque de machin Learning expliquée

Développement Web
20 Nov 2021

Qu’est-ce qu’un serveur proxy et comment fonctionne-t-il ?

Développement Web
19 Nov 2021

Qu’est-ce que DNS TTL ?

Développement Web