How to use bootstrap tutorial pdf [Eng]


Télécharger How to use bootstrap tutorial pdf [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


how to use bootstrap tutorial pdf [Eng]

...

Bootstrap est une infrastructure frontale élégante, intuitive et puissante pour un développement Web plus rapide et plus facile.

Les tutoriels Bootstrap vous aideront à apprendre l'essentiel de Bootstrap, des notions fondamentales aux sujets avancés, afin que vous puissiez créer des pages Web avec beaucoup moins d'effort.

Les didacticiels sont divisés en sections, chaque section contenant un certain nombre de sujets connexes contenant des explications faciles à comprendre, des exemples de pratique, des solutions de contournement intelligentes et des conseils utiles.

Vous pouvez économiser beaucoup de temps et d’efforts avec Bootstrap - So, ajoutez le signet à ce site Web et continuez.

Si vous êtes complètement novice dans Bootstrap, nous vous recommandons de commencer par la section qui couvre les bases de Bootstrap et d’aller de l’avant progressivement, en apprenant un peu chaque jour.

Conseil: Chaque chapitre de ce didacticiel est en quelque sorte lié les uns aux autres. C'est donc une bonne idée de vous assurer d'avoir bien compris chaque sujet avant de passer au chapitre ou à la section suivants.

Exemples de bootstrap

Chaque chapitre de ce didacticiel contient des exemples pratiques que vous pouvez essayer et tester vous-même pour étendre votre apprentissage. Le but de ces exemples est de vous fournir une meilleure compréhension de l’utilisation de Bootstrap dans votre mise en œuvre quotidienne.

Découvrez les exemples de bootstrap »

Générateur de boutons d'amorçage

Un outil en ligne interactif qui vous aidera à créer rapidement vos boutons Bootstrap préférés avec différentes couleurs et icônes sans écrire une seule ligne de code.

Découvrez le générateur de boutons Bootstrap »

Bootstrap est équipé de HTML, CSS et JavaScript pour divers composants d'interface Web et utilisateur.

Qu'est-ce que Bootstrap

Bootstrap est un puissant framework frontal permettant un développement Web plus rapide et plus facile. Il inclut des modèles de conception basés sur HTML et CSS pour les composants d'interface utilisateur courants tels que la typographie, les formulaires, les boutons, les tableaux, les navigations, les listes déroulantes, les alertes, les modaux, les onglets, l'accordéon, le carrousel et de nombreuses autres extensions JavaScript facultatives.

Bootstrap vous donne également la possibilité de créer une mise en page réactive avec beaucoup moins d'efforts.

Avantages de Bootstrap

Le principal avantage de Bootstrap est qu’il est fourni avec un ensemble gratuit d’outils permettant de créer des mises en page Web flexibles et réactives, ainsi que des composants d’interface courants.

De plus, à l'aide des API de données Bootstrap, vous pouvez créer des composants d'interface avancés tels que Scrollspy et Typeaheads sans écrire une seule ligne de JavaScript.

Voici encore quelques avantages, pourquoi choisir Bootstrap:

  • Économisez beaucoup de temps - Vous pouvez économiser beaucoup de temps et d'efforts en utilisant les modèles et les classes de conception prédéfinis Bootstrap et vous concentrer sur d'autres travaux de développement.
  • Fonctionnalités réactives - Grâce à Bootstrap, vous pouvez facilement créer des conceptions réactives. Les fonctionnalités responsive de Bootstrap permettent à vos pages Web d'apparaître de manière plus appropriée sur différents périphériques et résolutions d'écran sans aucune modification de la majoration.
  • Conception cohérente - Tous les composants Bootstrap partagent les mêmes modèles et styles de conception via une bibliothèque centrale, de sorte que les conceptions et les dispositions de vos pages Web soient cohérentes tout au long de votre développement.
  • Facile à utiliser - Bootstrap est très facile à utiliser. Toute personne disposant des connaissances de base en HTML et CSS peut commencer le développement avec Bootstrap.
  • Compatible avec les navigateurs - Bootstrap est créé pour les navigateurs modernes et compatible avec tous les navigateurs modernes tels que Mozilla Firefox, Google Chrome, Safari, Internet Explorer et Opera.
  • Open Source - Et la meilleure partie est qu’il est totalement gratuit à télécharger et à utiliser.

Remarque: Certaines propriétés CSS3, telles que les propriétés pour les coins arrondis, les dégradés et les ombres, sont utilisées par Bootstrap mais ne sont pas prises en charge par les anciennes versions des navigateurs Web, notamment Internet Explorer 8 et les versions antérieures.

Dans ce tutoriel, vous apprendrez à créer un modèle Bootstrap de base à l'aide de la version compilée de Bootstrap 3.

Démarrer avec Bootstrap

Vous apprendrez ici à quel point il est facile de créer une page Web à l’aide de Bootstrap. Avant de commencer, assurez-vous de disposer d’un éditeur de code et de connaissances de base en HTML et CSS.

Si vous débutez dans le développement Web, commencez par apprendre ici »

OK, allons droit au but.

Télécharger les fichiers bootstrap

Il existe deux versions disponibles au téléchargement, les fichiers source Bootstrap et Bootstrap compilés. Vous pouvez télécharger les fichiers Bootstrap ici.

Le téléchargement compilé contient une version compilée et simplifiée de fichiers CSS et JavaScript ainsi que des icônes au format police pour un développement Web rapide et facile, tandis que la source contient des fichiers source originaux pour tous les CSS et JavaScript, ainsi qu'une copie locale de la documentation.

Afin de mieux comprendre, nous allons nous concentrer sur les fichiers Bootstrap compilés. Cela vous fait gagner du temps, car vous n'avez pas à vous soucier de chaque fichier, y compris des fichiers séparés pour des fonctionnalités individuelles. Cela augmentera également les performances de votre site Web et économisera la précieuse bande passante lorsque vous déciderez de déplacer votre site en production à cause d'une demande HTTP et d'une taille de téléchargement moindres, car les fichiers sont compilés et minifiés.

Comprendre la structure du fichier

Une fois téléchargé le Bootstrap compilé, décompressez le dossier compressé pour voir la structure. Vous trouverez la structure et le contenu du fichier suivant.

bootstrap /

| —— css /

| | —— bootstrap.css

| | —— bootstrap.min.css

| | —— bootstrap-theme.css

| | —— bootstrap-theme.min.css

| —— js /

| | —— bootstrap.js

| | —— bootstrap.min.js

| —— polices /

| | —— glyphicons-halflings-regular.eot

| | —— glyphicons-halflings-regular.svg

| | - glyphicons-halfelins-regular.ttf

| | - glyphicons-halfelins-regular.woff

Comme vous pouvez le constater, la version compilée de Bootstrap fournit des fichiers CSS et JS compilés (bootstrap. *), Ainsi que des fichiers CSS et JS compilés et minifiés (bootstrap.min. *).

Il existe quatre fichiers de polices (glyphicons-halflings-regular. *) Dans le dossier des polices. Ce fichier de polices comprend plus de 250 icônes du jeu Glyphicon Halflings.

Conseil: Il s'agit de la forme la plus élémentaire de Bootstrap pour une utilisation rapide dans tout projet Web. Veuillez noter que tous les plugins JavaScript nécessitent l'inclusion de jQuery.

Créer votre première page Web avec Bootstrap

Jusqu'ici, vous avez compris la structure et les objectifs des fichiers Bootstrap. Il est maintenant temps de mettre Bootstrap à la disposition de tous. Dans cette section, nous allons créer un modèle Bootstrap de base qui inclut tout ce que nous avons mentionné dans la structure de fichier.

Parcourons les étapes suivantes. À la fin du didacticiel, vous aurez créé un fichier HTML affichant le message "Hello world" dans votre navigateur Web.

Étape 1: Création d'un fichier HTML de base

Ouvrez votre éditeur de code préféré et créez un nouveau fichier HTML. Commencez avec une fenêtre vide, tapez le code suivant et enregistrez-le sous le nom "basic.html" sur votre bureau.

Exemple

Essayez ce code »

  • <! DOCTYPE html>
  • <html>
  • <tête>
  • <meta charset = "utf-8">
  • <title> Fichier HTML de base </ title>
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • </ head>
  • <corps>
  • <h1> Bonjour le monde! </ H1>
  • </ body>
  • </ html>

Conseil: Ajoutez la balise <meta> de la fenêtre de visualisation à l'intérieur de la section <head> de votre document pour activer le zoom tactile et garantir un rendu correct sur les périphériques mobiles.



Étape 2: Faire de ce fichier HTML un modèle Bootstrap

Pour faire de ce fichier HTML un modèle Bootstrap, incluez simplement les fichiers Bootstrap CSS et JS appropriés. Vous devez inclure les fichiers JavaScript au bas de la page, avant de fermer la balise <body> (c.-à-d. </ Body>) pour améliorer les performances de vos pages Web.

Exemple

Essayez ce code »

  • <! DOCTYPE html>
  • <html>
  • <tête>
  • <meta charset = "utf-8">
  • <title> Modèle Bootstrap de base </ title>
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • <link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css">
  • <! - Thème Bootstrap facultatif ->

<Link rel = "stylesheet" href = "css / bootstrap-theme.min.css">

  • </ head>
  • <corps>
  • <h1> Bonjour le monde! </ H1>
  • <script src = "js / jquery-1.11.3.min.js"> </ script>
  • <script src = "js / bootstrap.min.js"> </ script>
  • </ body>
  • </ html>

Et nous sommes tous ensemble! Après avoir ajouté les fichiers CSS et JS de Bootstrap et la bibliothèque jQuery requise, nous pouvons commencer à développer n’importe quel site ou application avec le cadre Bootstrap.

Étape 3: enregistrement du fichier

Enregistrez maintenant le fichier sur votre bureau sous le nom "bootstrap-template.html".

Remarque: il est important que l'extension ".html" soit spécifiée. Dans le cas contraire, certains éditeurs de texte, tels que le Bloc-notes, l'enregistreront automatiquement sous le nom ".txt".

Pour ouvrir le fichier dans un navigateur. Accédez à votre fichier, puis double-cliquez dessus. Il s'ouvrira dans votre navigateur Web par défaut. (Si ce n'est pas le cas, ouvrez votre navigateur et faites-y glisser le fichier.)

Y compris les fichiers de Bootstrap via CDN

Vous pouvez également inclure les fichiers CSS et JavaScript de Bootstrap ainsi que le fichier JavaScript de la bibliothèque jQuery dans votre document à l'aide des liens CDN (Content Delivery Network) disponibles gratuitement si vous ne souhaitez pas télécharger et héberger vous-même Bootstrap ou jQuery.

Les CDN peuvent offrir un avantage en termes de performances en réduisant le temps de chargement, car ils hébergent les fichiers du Bootstrap sur plusieurs serveurs répartis dans le monde entier. Lorsqu'un utilisateur demande le fichier, celui-ci sera servi à partir du serveur le plus proche.

Exemple

Essayez ce code »

  • <! DOCTYPE html>
  • <html>
  • <tête>
  • <meta charset = "utf-8">
  • <title> Modèle Bootstrap de base </ title>
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  • <! - Thème Bootstrap facultatif ->
  • <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  • </ head>
  • <corps>
  • <h1> Bonjour le monde! </ H1>
  • <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ script>
  • <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </ script>
  • </ body>
  • </ html>

Dans l'exemple ci-dessus, nous avons inclus la version compilée et simplifiée des fichiers CSS et JavaScript de Bootstrap, ainsi que la bibliothèque jQuery nécessaire à l'aide des liens CDN. Vous trouverez également ces liens CDN dans la plupart des exemples de code de ce site.

Conseil: Si le visiteur de votre site a déjà téléchargé les fichiers Bootstrap du même CDN tout en visitant les autres sites, ceux-ci seront chargés à partir du cache du navigateur au lieu d'être re-téléchargés, ce qui accélérera le temps de chargement.

Le système de grille Bootstrap est le moyen le plus rapide et le plus simple de créer une mise en page.

Qu'est-ce que le système de grille Bootstrap?

Le système de grille Bootstrap offre un moyen rapide et facile de créer les mises en page des pages Web. Contrairement à l’ancien système de grille Bootstrap 2.x qui est fixé par défaut, la nouvelle version, c’est-à-dire Bootstrap 3, introduit le premier système de grille de fluide mobile réactif qui s’adapte de manière appropriée jusqu’à 12 colonnes à mesure que la taille du périphérique ou de la fenêtre de visualisation augmente.

Bootstrap 3 inclut des classes de grille prédéfinies permettant de créer rapidement des mises en page de grille pour différents types d'appareils, tels que téléphones portables, tablettes, ordinateurs portables, ordinateurs de bureau, etc. Vous pouvez par exemple utiliser la classe .col-xs- * pour créer des colonnes de grille pour les très petits appareils comme les téléphones portables, de même que la classe .col-sm- * pour les appareils à petit écran comme les tablettes, la classe .col-md- * pour les appareils de taille moyenne comme les ordinateurs de bureau et le .col-lg- * pour les grands écrans de bureau. Le tableau suivant résume certaines des principales caractéristiques du nouveau système de grille.

… … …

Le tableau ci-dessus montre une chose importante: appliquer une classe .col-sm- * à un élément affectera non seulement son style sur les petits périphériques, mais également sur les périphériques de moyenne et grande taille ayant une taille d'écran supérieure ou égale à 768 pixels (c'est-à-dire supérieure ou égale à 768 pixels). ) si .col-md- * et .col-lg- *, la classe n’est pas présente. De même, la classe .col-md- * affectera non seulement le style des éléments sur les périphériques de taille moyenne, mais également sur les périphériques de grande taille si une classe .col-lg- * n'est pas présente.

Maintenant, la question se pose de savoir comment créer des lignes et des colonnes à l’aide de ce système de grille réactif à 12 colonnes. La réponse est assez simple: commencez par créer un conteneur qui sert de wrapper pour vos lignes et colonnes à l'aide de la classe .container, puis créez des lignes dans le conteneur à l'aide de la classe .row, puis créez des colonnes dans toutes les lignes que vous pouvez utiliser. les class.col-xs- *, .col-sm- *, .col-md- * et .col-lg- *. Les colonnes sont la zone de contenu réelle où nous placerons notre contenu. Mettons toutes ces choses en action réelle.

Création de deux dispositions de colonne

L'exemple suivant vous montrera comment créer deux structures de colonnes pour des périphériques de taille petite, moyenne et grande, tels que des tables, des ordinateurs portables, des ordinateurs de bureau, etc. Cependant, sur les téléphones mobiles, les colonnes deviennent automatiquement horizontales par défaut.

Exemple

Essayez ce code »

  • <div class = "conteneur">
  • <! - Rangée avec deux colonnes égales ->
  • <div class = "row">
  • <div class = "col-sm-6"> <! - Colonne gauche -> </ div>
  • <div class = "col-sm-6"> <! - Colonne right -> </ div>
  • </ div>
  • <! - Rangée à deux colonnes divisée en 1: 2 ->
  • <div class = "row">
  • <div class = "col-sm-4"> <! - Colonne gauche -> </ div>
  • <div class = "col-sm-8"> <! - Colonne right -> </ div>
  • </ div>
  • <! - Rangée à deux colonnes divisée en 1: 3 ->
  • <div class = "row">
  • <div class = "col-sm-3"> <! - Colonne gauche -> </ div>
  • <div class = "col-sm-9"> <! - Colonne right -> </ div>
  • </ div>
  • </ div>

Comme le système de grille Bootstrap est basé sur 12 colonnes, pour que les colonnes restent sur une seule ligne (c’est-à-dire côte à côte), la somme des numéros de colonne de la grille dans chaque ligne doit être égale à 12. Si vous voyez attentivement l’exemple ci-dessus, trouveront le nombre de colonnes de la grille (c.-à-d. col-sm- *), soit douze (6 + 6, 4 + 8 et 3 + 9) pour chaque ligne.

Création de trois dispositions de colonne

De même, vous pouvez créer d'autres mises en page basées sur le principe ci-dessus. L'exemple suivant crée généralement trois dispositions de colonne pour les écrans d'ordinateurs portables et de bureaux. Il fonctionne également sur les tablettes en mode paysage si la résolution de l’écran est supérieure ou égale à 992 pixels (par exemple, Apple iPad). Cependant, en mode portrait, il sera horizontal comme d’habitude.

Exemple

Essayez ce code »

  • <div class = "conteneur">
  • <! - Rangée avec trois colonnes égales ->
  • <div class = "row">
  • <div class = "col-md-4"> <! - Colonne gauche -> </ div>
  • <div class = "col-md-4"> <! - Milieu de la colonne -> </ div>
  • <div class = "col-md-4"> <! - Colonne right -> </ div>
  • </ div>
  • <! - Rangée à trois colonnes divisée en 1: 4: 1 ->
  • <div class = "row">
  • <div class = "col-md-2"> <! - Colonne gauche -> </ div>
  • <div class = "col-md-8"> <! - Milieu de la colonne -> </ div>
  • <div class = "col-md-2"> <! - Colonne right -> </ div>
  • </ div>
  • <! - Rangée avec trois colonnes divisées de manière inégale ->
  • <div class = "row">
  • <div class = "col-md-3"> <! - Colonne gauche -> </ div>
  • <div class = "col-md-7"> <! - Milieu de la colonne -> </ div>
  • <div class = "col-md-2"> <! - Colonne right -> </ div>
  • </ div>
  • </ div>

Remarque: Si plus de 12 colonnes de la grille sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires, dans son ensemble, sera renvoyé à une nouvelle ligne.



Dispositions d'amorçage avec fonction d'emballage des colonnes

Nous allons maintenant créer des présentations plus flexibles modifiant l'orientation des colonnes en fonction de la taille de la fenêtre. L'exemple suivant crée une disposition en trois colonnes sur des périphériques de taille moyenne tels que des ordinateurs portables et des ordinateurs de bureau, ainsi que sur des tablettes (par exemple, un iPad Apple) en mode paysage, mais sur de petits périphériques tels que des tablettes en mode portrait, elle se transforme en une disposition en deux colonnes. la troisième colonne se déplace au bas des deux premières colonnes.

Exemple

Essayez ce code »

  1. <div class = "conteneur">
  2. <div class = "row">
  3. <div class = "col-sm-3 col-md-2"> <! - Colonne 1 -> </ div>
  4. <div class = "col-sm-9 col-md-8"> <! - Colonne deux -> </ div>
  5. <div class = "col-sm-12 col-md-2"> <! - Troisième colonne -> </ div>
  6. </ div>
  7. </ div>

Comme vous pouvez le voir dans l'exemple ci-dessus, la somme des petits nombres de colonnes de la grille (c'est-à-dire col-sm- *) est 3 + 9 + 12 = 24> 12, donc le troisième élément <div> avec la classe .col-sm-12 c'est-à-dire que l'ajout des colonnes supplémentaires au-delà du maximum de 12 colonnes dans un fichier .row est inséré dans une nouvelle ligne sous la forme d'une unité contiguë sur de petits périphériques ayant une largeur de fenêtre inférieure à 992 pixels.

De même, vous pouvez créer des mises en page encore plus adaptables pour vos sites Web et vos applications à l'aide de la fonctionnalité d'habillage des colonnes de la grille de Bootstrap. Dans la section suivante, nous aborderons l’autre aspect de cette fonctionnalité. Voici quelques prêts à utiliser Bootstr

Création de dispositions multi-colonnes avec le système de grille Bootstrap 3

Avec le nouveau système de grille Bootstrap 3 mobile, vous pouvez facilement contrôler le rendu de la mise en page de votre site Web sur différents types d'appareils ayant différentes tailles d'écran, tels que les téléphones portables, les tablettes, les ordinateurs de bureau, etc. Prenons l'illustration suivante.

Dans l'illustration ci-dessus, il y a un total de 12 zones de contenu dans tous les périphériques, mais son emplacement varie en fonction de la taille de l'écran du périphérique, comme dans le cas d'un périphérique mobile, la présentation est rendue sous la forme d'une grille comportant une colonne et 12 rangées superposées. alors que dans tablette, il est rendu sous forme de grille à deux colonnes qui a 2 colonnes et 6 lignes. En outre, dans les périphériques de taille moyenne comme les ordinateurs portables et les ordinateurs de bureau, il est représenté sous la forme d'une grille de trois colonnes composée de 3 colonnes et de 4 lignes et enfin dans celui de grands écrans comme les grands ordinateurs de bureau, sous la forme d'une grille de quatre colonnes à 4 colonnes et de 3 lignes. .

Maintenant, la question est de savoir comment créer de telles mises en page réactives à l’aide de ce nouveau système de premier réseau mobile de Bootstrap. Commençons par le périphérique moyen qui peut être un ordinateur portable ou un bureau normal. Étant donné que la disposition de notre dispositif de taille moyenne comporte 3 colonnes et 4 lignes, c'est-à-dire une disposition de grille 3x4, le code HTML permettant de créer une telle structure de grille correspond à peu près à ceci.

Exemple

Essayez ce code »

  • <div class = "conteneur">
  • <div class = "row">
  • <div class = "col-md-4"> <p> Case 1 </ p> </ div>
  • <div class = "col-md-4"> <p> Boîte 2 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 3 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 4 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 5 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 6 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 7 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 8 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 9 </ p> </ div>
  • <div class = "col-md-4"> <p> case 10 </ p> </ div>
  • <div class = "col-md-4"> <p> case 11 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 12 </ p> </ div>
  • </ div>
  • </ div>

Si vous voyez la sortie de l'exemple ci-dessus dans un ordinateur portable ou de bureau ayant une largeur d'écran supérieure ou égale à 992 pixels et inférieure à 1 200 pixels, vous verrez qu'il comporte 4 lignes, chaque ligne contenant 3 colonnes égales, ce qui donne une disposition en grille 3x4.

Mais attendez, l’exemple ci-dessus pose un problème majeur d’alignement. Si la hauteur d'une colonne est plus grande que l'autre, elle ne s'effacera pas correctement et ne cassera pas la mise en page. Pour résoudre ce problème, utilisez la combinaison d'une classe .clearfix et des classes utilitaires responsive.

Exemple

Essayez ce code »

  • <div class = "conteneur">
  • <div class = "row">
  • <div class = "col-md-4"> <p> Case 1 </ p> </ div>
  • <div class = "col-md-4"> <p> Boîte 2 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 3 </ p> </ div>
  • <div class = "clearfix visible-md-block"> </ div>
  • <div class = "col-md-4"> <p> Case 4 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 5 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 6 </ p> </ div>
  • <div class = "clearfix visible-md-block"> </ div>
  • <div class = "col-md-4"> <p> Case 7 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 8 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 9 </ p> </ div>
  • <div class = "clearfix visible-md-block"> </ div>
  • <div class = "col-md-4"> <p> case 10 </ p> </ div>
  • <div class = "col-md-4"> <p> case 11 </ p> </ div>
  • <div class = "col-md-4"> <p> Case 12 </ p> </ div>
  • </ div>
  • </ div>

Comme le système gird par défaut comporte 12 colonnes et dans notre mise en page, la somme de chaque numéro de colonne sur trois, c.-à-d. Col-md- * est égale à 12, raison pour laquelle nous avons effacé les colonnes après chaque troisième occurrence. Dans tout autre scénario où les numéros de colonnes sont différents pour chaque colonne, vous devez utiliser .clearfix après la colonne constituant la grille complète de 12 colonnes.

Remarque: La classe d'utilitaire sensible .visible-md-block rend la classe .clearfix efficace uniquement sur les périphériques de taille moyenne et est masquée sur d'autres périphériques.

Il est maintenant temps de personnaliser notre présentation pour d'autres appareils. Commencez par le personnaliser pour tablette. Depuis l'intérieur de la tablette, notre mise en page est représentée sous forme de grilles 2x6 (c'est-à-dire 2 colonnes et 6 lignes). Alors, allez-y et ajoutez la classe .col-sm-6 sur chaque colonne.



52