Comment créer plusieurs colonnes réactives avec Bootstrap 3
Publié: 2022-02-16
Souhaitez-vous améliorer la réactivité de votre site Web avec Bootstrap ? L'aspect le plus important de Bootstrap est son premier système de grille mobile à 12 colonnes. C'est ce que vous utilisez pour créer une mise en page réactive.
Dans ce didacticiel vidéo, vous allez créer un site Web de base à l'aide de Bootstrap et apprendre à utiliser le système de grille Bootstrap pour créer une mise en page réactive avec plusieurs colonnes.
Avant de regarder le tutoriel
Avant de pouvoir suivre le didacticiel vidéo ci-dessous et apprendre à créer vos propres colonnes réactives, vous aurez besoin :
- Compréhension de base de ce qu'est Bootstrap
- Compréhension de base de ce qu'est le système de grille Bootstrap
- Téléchargez Bootstrap sur votre disque dur
- Créer un fichier Bootstrap index.html de base sur lequel s'appuyer
Qu'est-ce que Bootstrap
- Bootstrap est un framework pour les développeurs HTML, CSS et JavaScript travaillant sur la réactivité des sites Web.
- Il se compose d'un style CSS réactif déjà prédéfini pour les colonnes, les listes, la navigation, les formulaires Web et de nombreux autres éléments Web.
Comprendre le système de grille Bootstrap
- Le système de grille Bootstrap classe les tailles d'écran en quatre types : Extra-petit, Petit, Moyen et Grand.
- L'Extra-small est destiné aux téléphones portables. Le Small est pour les tablettes, comme I-Pad. Le moyen est pour les moniteurs de bureau. Et le Large est réservé aux moniteurs de bureau plus grands.
- Pour vous aider à affiner la réactivité de ces quatre types d'écrans, Bootstrap divise la largeur des appareils de visualisation Web dans le système de grille à 12 colonnes.
- Chacun de ces quatre types de grille Bootstrap ne devient réactif que si vous lui attribuez sa propre classe CSS désignée.
- Par exemple, pour rendre une div réactive pour les petits appareils supplémentaires, la div doit avoir sa propre classe Bootstrap .col-xs-<number_of_columns_to_take>, comme <div class="col-xs-6">.
Téléchargement de Bootstrap
- Rendez-vous sur getboostrap.com et cliquez sur le bouton "Télécharger Bootstrap":
- Vous verrez la page "Getting Started". Cliquez sur le bouton "Télécharger Bootstrap":
- Enregistrez ce fichier sur le disque dur de votre ordinateur, où vous voulez. Il n'est pas nécessaire de l'enregistrer sur un serveur Web.
- Décompressez ce fichier et renommez le dossier extrait en "bootstrap".
Préparation de votre page Bootstrap index.html de base
Étape 1. Créez votre fichier Bootstrap index.html
- Revenez à la page "Getting Started" (http://getbootstrap.com/getting-started/#download) et cliquez sur le lien "Basic Template" dans la barre latérale de droite :
- Vous verrez le code "Modèle de base". Cliquez sur le bouton "Copier" pour copier le code :
- Collez le code "Basic Template" dans votre éditeur de texte et enregistrez-le sous index.html dans le même dossier, où vous avez enregistré le dossier "bootstrap". Il deviendra maintenant la page d'accueil de votre site Bootstrap.
- Ouvrez le fichier index.html nouvellement créé et jetez un œil à votre site Web Bootstrap de base :
- Ouvrez le fichier index.html dans votre éditeur de texte et entre les balises d'ouverture <body> et <h1> ajoutez <div class="container"> (1). Fermez cette nouvelle div après la balise de fermeture </h1> (2) et enregistrez le fichier :
- Vérifiez la page d'accueil et remarquez comment le "Hello World!" n'est plus collé au bord de la page et s'est maintenant légèrement déplacé vers la droite, pour lui donner un aspect un peu plus ordonné. La classe "container" de Bootstrap que vous avez assignée à cette div a ajouté une marge à ce texte :
- Revenez à votre fichier index.html. Entre les balises <h1> et </h1> remplacer le "Hello World!" à "Trusthub". Enregistrez le fichier et vérifiez le front-end de votre site.
Étape 2. Ajouter du contenu et une barre latérale
- Revenez à votre fichier index.html et sous le code <h1>Trustub</h1>, copiez et collez le code suivant :
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Revenez à l'interface de votre site. Rafraîchissez-le. Vous devriez maintenant voir votre contenu et la barre latérale "Notre équipe", sans mise en page responsive en colonnes pour le moment :
- Retournez sur le site getbootstrap.com et dans le menu du haut cliquez sur le bouton "CSS":
- Dans la barre latérale, cliquez sur le bouton "Grid System":
- Faites défiler la page jusqu'à la section "Options de grille" (1) et notez le système de grille Bootstrap à 12 colonnes avec ses quatre types de tailles d'écran, leur largeur et leurs préfixes de classe CSS désignés (2):
- Ne vous inquiétez pas si les options du système de grille Bootstrap n'ont pas encore de sens pour vous. Tout se mettra en place pour vous en une seconde lorsque vous commencerez à jouer autour d'eux sur votre site.
- Ouvrez à nouveau votre fichier index.html et sous le <div class="row">, pour votre <div> existant, entrez la classe "col-md-9". Votre nouvelle div devrait maintenant ressembler à "div class="col-md-9"> :
- Allez maintenant dans votre div, située juste au-dessus de l'en-tête <h2> "Out Team" et donnez-lui la classe CSS "col-md-3" Bootstrap grid. Enregistrez le fichier :
- Revenez sur votre site pour voir ce changement en action. Appuyez sur la touche F5 de votre clavier pour actualiser votre site Web. Vous verrez maintenant que votre zone de contenu et la barre latérale sont côte à côte.
- Votre div de contenu occupe maintenant 9 des 12 colonnes disponibles dans sa grille Bootstrap (75 % de la largeur totale de l'écran du bureau). Et votre barre latérale prend 3 de sa grille Bootstrap 12 colonnes (25% de la largeur totale de l'écran du bureau):
Brillant! Vous êtes maintenant prêt à suivre le didacticiel vidéo ci-dessous. Commençons.
Toutes nos félicitations! Vous venez d'apprendre à créer une mise en page Web réactive avec plusieurs colonnes à l'aide de Bootstrap. Vous souhaitez en savoir plus sur Bootstrap ? Si oui, veuillez visiter notre chaîne YouTube OSTraining et regarder les "tutoriels sur le framework Bootstrap".