twitter-bootstrap-3 - riptutorial.com · Bootstrap est un framework Web frontal gratuit et...
27
twitter-bootstrap-3 #twitter- bootstrap-3
Transcript of twitter-bootstrap-3 - riptutorial.com · Bootstrap est un framework Web frontal gratuit et...
twitter-bootstrap-3
#twitter-
bootstrap-3
Table des matières
À propos 1
Chapitre 1: Démarrer avec twitter-bootstrap-3 2
Remarques 2
Versions 2
Examples 2
Installation 2
Bonjour le monde 3
Installation bootstrap et démarrage 4
Chapitre 2: Boutons 9
Paramètres 9
Examples 9
Types de boutons 9
Taille du bouton 9
Chapitre 3: Boutons dans twitter-bootstrap-3 11
Examples 11
Utiliser la classe twitter-bootstrap `btn` 11
différentes tailles de bouton dans twitter-bootstrap-3 11
Ajouter Glyphicon au bouton 12
Chapitre 4: Système de grille 13
Examples 13
Requêtes médias 13
Options de grille 13
Empilé à horizontal 14
Conteneur de fluide 15
Mobile et desktop 15
Mobile, tablette, bureau 15
Column wrapping 16
La colonne réactive se réinitialise 16
Colonnes de compensation 17
Colonnes d'imbrication 17
Commande de colonne 18
Moins de mixins et de variables 18
Les variables 18
Mixins 18
Chapitre 5: Système de grille 22
Examples 22
Système de grille bootstrap 22
Titre 22
Crédits 24
À propos
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: twitter-bootstrap-3
It is an unofficial and free twitter-bootstrap-3 ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official twitter-bootstrap-3.
The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]
https://riptutorial.com/fr/home 1
Chapitre 1: Démarrer avec twitter-bootstrap-3
Remarques
Bootstrap est un framework Web frontal gratuit et open-source pour la conception de sites Web et d'applications Web. Il contient des modèles de conception HTML et CSS pour la typographie, les formulaires, les boutons, la navigation et d'autres composants d'interface, ainsi que des extensions JavaScript facultatives. Contrairement à de nombreux frameworks Web, il ne concerne que le développement frontal.
Bootstrap est le deuxième projet le plus joué sur GitHub, avec près de 100 000 étoiles et près de 45 000 forks.
Versions
Version Date de sortie
3.3.7 2016-07-25
Examples
Installation
Téléchargement direct - lien de téléchargement•CDN - arriver ici•Bower - bower install bootstrap [lire]•NPM - npm install bootstrap [lire]•Compositeur - composer require twbs/bootstrap [lire]•Personnaliser - Vous avez votre propre configuration, vous pouvez personnaliser ici .•Sass - Pour les projets liés à Sass, vous pouvez l'obtenir ici .•
Usage
<head> <link rel="stylesheet" href="path/to/bootstrap.min.css"> </head>
La référence au fichier bootstrap js est faite en utilisant une balise de script juste au-dessus de la balise body (voir ci-dessous). Notez également que bootstrap utilise jQuery pour la plupart des widgets - comme le carrousel d’accordion, etc. alors faites référence au fichier bootstrap js sous le fichier jQuery js.
**Échantillon**
https://riptutorial.com/fr/home 2
<!DOCTYPE html> <html lang="en"> <head> <title>Form Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Form Email</h2> <form role="form"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bonjour le monde
La page HTML suivante illustre une page Hello World simple utilisant Bootstrap 3 .
La page contient une barre de navigation pleine largeur avec des liens d'exemple et un contrôle déroulant. La barre de navigation tire parti des premières fonctionnalités mobiles de Bootstrap. Il commence à se réduire dans les vues mobiles et devient horizontal lorsque la largeur de la fenêtre d'affichage augmente.
En outre, un élément jumbotron a été utilisé pour afficher les informations présentées.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Hello World</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"
https://riptutorial.com/fr/home 3
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Hello, World!</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <div class="jumbotron"> <h1>Bootstrap</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg">Learn more</a></p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Installation bootstrap et démarrage
introduction
https://riptutorial.com/fr/home 4
Donc, vous voulez commencer à utiliser bootstrap pour votre projet? Génial! alors commençons tout de suite!
Qu'est ce que le bootstrap? Bootstrap est une bibliothèque open source wich vous pouvez utiliser pour faire des projets sensibles incroyables avec l' aide de code simple et responsive design. Responsive Design est une philosophie de conception où, dans la conception du système (la représentation et la mise en page) répond / s'adapte en fonction de la disposition de l'appareil. La principale raison de garder votre design réactif est d’accroître la portée de votre application sur une base d’utilisateurs plus importante en utilisant un ensemble de périphériques. Installation Bootstrap peut être installé de différentes manières et pour différents types de projets. Dans la liste ci-dessous, j'ai placé des liens de téléchargement et des tutoriels sur la façon d'installer le bootstrap. Liens de téléchargement
Téléchargement direct - lien de téléchargement•CDN - arriver ici•Bower - bower install bootstrap [lire]•NPM - npm install bootstrap [lire]•Compositeur - composer require twbs/bootstrap [lire]•Personnaliser - Vous avez votre propre configuration, vous pouvez personnaliser ici .•Sass - Pour les projets liés à Sass, vous pouvez l'obtenir [ici] [1].•
Informations de base Donc, vous avez maintenant installé bootstrap dans votre projet. Et maintenant, il est temps de commencer à utiliser les grands avantages du bootstrap. Tout d'abord, je vais vous parler de l'utilisation de base du bootstrap, après cela je vais montrer quelques petits exemples et à la fin je vais vous donner un exemple de code de démarrage que vous pouvez utiliser comme modèle de départ!
Le système de grille Bootstrap utilise un système de grille. Ce système de grille se compose normalement de 12 colonnes. Chacune de ces 12 colonnes a la même largeur mais peut avoir des hauteurs différentes.
Nous avons donc un système de grille composé de 12 colonnes. Nous pouvons utiliser ces colonnes pour créer notre site Web de base. Disons que nous voulons atteindre la mise en page suivante:
menu - pleine largeur barre latérale - 1/3 de l'écran Contenu principal 2/3 de l'écran Pied de page - pleine largeur
Le menu Nous allons d'abord regarder le menu. Comme nous le savons, le système de grille fonctionne avec 12 colonnes. Comme nous voulons le menu sur toute la largeur, nous devons placer le menu dans toutes les 12 colonnes. Cela ressemblera à l'exemple ci-dessous
https://riptutorial.com/fr/home 5
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> Menu </div>
En donnant au menu une classe col-lg-12, nous indiquons ce qui suit: col - Le col dans le nom de la classe représente les colonnes. lg - Le lg dans le nom de la classe représente la largeur de l'écran, dans ce cas-ci grande. 12 - le 12 dans le nom de la classe représente le nombre de colonnes que nous voulons que notre menu possède. puisque dans ce cas on veut le menu sur toute la largeur on obtient toutes les 12 colonnes (12/12)
Depuis que nous avons utilisé 12 des 12 colonnes de notre menu, le menu sera placé sur une nouvelle ligne.
La barre latérale Le deuxième élément que nous voulons ajouter à notre modèle est la barre latérale. Maintenant, comme je l'ai dit, nous voulons que la barre latérale soit 1/3 de l'écran. Donc, ce que nous allons faire, c'est diviser les 12 colonnes en 3. Ce qui est 4. Nous savons maintenant combien de colonnes nous voulons remplir pour atteindre 1/3 de l'écran. Suivez le code ci-dessous.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The menu </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> The sidebar </div>
De même qu'avec le menu, notre nombre de cols diffère de celui du menu. col - Le col dans le nom de la classe représente les colonnes. lg - Le lg dans le nom de la classe représente la largeur de l'écran, dans ce cas-ci grande. 4 - le 12 dans le nom de la classe représente le nombre de colonnes que nous voulons que notre barre latérale possède. puisque dans ce cas nous voulons que la barre latérale remplisse 1/3 de l’écran, donc nous ne prendrons que 4 des 12 colonnes (4/12)
Le contenu Maintenant, sur cette ligne, il reste 8 colonnes à côté de notre barre latérale. Alors maintenant, nous allons les remplir avec notre contenu. Voir l'exemple de code ci-dessous
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The menu </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> The sidebar </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> The main content </div>
Maintenant que nous avons rempli les 8 colonnes restantes de nos 12 colonnes sur cette ligne, la section suivante reprendra une nouvelle ligne avec 12 colonnes.
https://riptutorial.com/fr/home 6
Le pied de page Le pied de page est, encore une fois, tout comme le menu sera un bloc de largeur complète à l'écran, nous allons donc prendre les 12 colonnes de cette ligne pour notre pied de page, voir l'exemple de code ci-dessous.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The menu </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> The sidebar </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> The main content </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The footer </div>i are described below.
Donc, maintenant, nous avons créé, avec juste un très petit fichier HTML, notre premier modèle de bootstrap. Mais c'est la base même. Normalement, nous formons ce code un peu plus pour lui donner une expérience de bootstrap complète. Certaines de ces expériences sont décrites ci-dessous.
Utiliser des lignes et des conteneurs Comme je l'ai dit dans l'exemple simple ci-dessus, bootstrap utilise des lignes de 12 colonnes. lorsqu'une ligne est remplie avec 12 colonnes, le démarrage démarrera sur une nouvelle ligne. La meilleure façon d'afficher ces lignes est d'utiliser des classes de lignes. Nous utiliserons également une classe de conteneur. c'est comme une balise body, dans ce conteneur nous allons mettre tout notre code. Vous pouvez choisir entre un conteneur ou une classe de conteneur-fluide. La seule différence est que la classe conteneur-fluide utilise toute la largeur d'un écran et pas la classe conteneur. Voici un exemple de ces fonctionnalités de base.
<div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The menu consisting of 12 columns </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> The sidebar consisting of 4 columns </div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> The main content consisting of 8 columns </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> The footer consisting of 12 columns </div> </div> </div>
Nous avons donc créé un modèle de page complète avec bootstrap. C'est très simple en effet,
https://riptutorial.com/fr/home 7
mais commencez par les bases et plus tard, vous pourrez utiliser toutes sortes de classes et de fonctionnalités de bootstrap. Dernière chose. Les noms de colonnes lg-md-sm et xs dans les classes correspondent, comme je l'ai dit à la largeur de la page. LarGe, MeDium, SMall et XSmall. N'oubliez pas que vous pouvez utiliser cela pour modifier le style des colonnes différemment selon la largeur en modifiant la quantité de colonnes. N'oubliez pas qu'une ligne complète est composée de 12 colonnes!
Pour plus d'informations, visitez: http://getbootstrap.com/ <br? Pour de bons exemples, visitez: http://expo.getbootstrap.com ou http://bootsnipp.com/
Si vous voulez que j'ajoute plus d'informations ou si vous rencontrez des problèmes, faites-le moi savoir! et bonne codification à vous tous!
Lire Démarrer avec twitter-bootstrap-3 en ligne: https://riptutorial.com/fr/twitter-bootstrap-3/topic/3060/demarrer-avec-twitter-bootstrap-3
https://riptutorial.com/fr/home 8
Chapitre 2: Boutons
Paramètres
Classe La description
btn-default Bouton standard. @ marque par défaut: #fff
btn-primaire
Fournit un poids visuel supplémentaire et identifie l'action primaire. @ marque primaire: assombrir (# 428bca, 6,5%);
btn-success
Utilisé pour indiquer une action réussie. @ succès de la marque: # 5cb85c;
btn-info Bouton contextuel pour fournir des informations. @ marque-info: # 5bc0de;
btn-warning
Indique que la prudence doit être appliquée par l'utilisateur. @ alerte de marque: # f0ad4e;
btn-danger
Indique une action dangereuse ou négative. @ marque-danger: # d9534f;
btn-link Utilisez pour le lien.
Examples
Types de boutons
<button class="btn btn-default" type="button">Default</button> <button class="btn btn-primary" type="button">Primary</button> <button class="btn btn-success" type="button">Success</button> <button class="btn btn-info" type="button">Info</button> <button class="btn btn-warning" type="button">Warning</button> <button class="btn btn-danger" type="button">Danger</button>
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
Taille du bouton
La classe de démarrage du bouton de taille est la suivante:
https://riptutorial.com/fr/home 9
.btn-lg
.btn-md
.btn-sm
.btn-xs
Par exemple :
<button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button>
Lire Boutons en ligne: https://riptutorial.com/fr/twitter-bootstrap-3/topic/5517/boutons
https://riptutorial.com/fr/home 10
Chapitre 3: Boutons dans twitter-bootstrap-3
Examples
Utiliser la classe twitter-bootstrap `btn`
btn classe btn de Twitter-bootstrap peut être utilisée avec n'importe lequel des éléments HTML suivants.
ancre1. bouton2. input with both type="button" and type="submit"3.
Vous trouverez ci-dessous des exemples de tous les cas d'utilisation possibles de la classe btn .
<a class="btn" href="#" role="button">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit">
Bien que la classe btn puisse être utilisée de l'une des quatre manières ci-dessus, il est fortement recommandé d'utiliser l'élément <button> autant que possible
Image du code ci-dessus est attaché ci-dessous
La source
différentes tailles de bouton dans twitter-bootstrap-3
twitter-bootstrap-3 a fourni quatre tailles de boutons différentes
Grand bouton btn-lg1. Le bouton par défaut does not require any btn size2. Petit bouton btn-sm3. Bouton extra petit btn-xs4.
<button type="button" class="btn btn-lg">Large button</button> <button type="button" class="btn">Default button</button> <button type="button" class="btn btn-sm">Small button</button> <button type="button" class="btn btn-xs">Extra small button</button>
https://riptutorial.com/fr/home 11
Image du code ci-dessus est attaché ci-dessous
La source
Ajouter Glyphicon au bouton
Les glyphicons peuvent être utilisés dans le texte, les boutons, les barres d'outils, la navigation, les formulaires, etc. (Source: W3Schools). Les glyphicons sont fondamentalement des formes d'icônes qui peuvent être utilisées pour styliser tout ce qui précède. Ces exemples décrivent l'utilisation des glyphicons à l'intérieur de deux types de boutons en utilisant simplement un intervalle à l'intérieur des boutons qui ont une classe de type glyphicon:
Bouton HTML
<button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button>
Bouton ASP
<asp:LinkButton runat="server" CssClass="btn btn-info" > <span class="glyphicon glyphicon-envelope"></span> Email </asp:LinkButton>
Lire Boutons dans twitter-bootstrap-3 en ligne: https://riptutorial.com/fr/twitter-bootstrap-3/topic/6071/boutons-dans-twitter-bootstrap-3
https://riptutorial.com/fr/home 12
Chapitre 4: Système de grille
Examples
Requêtes médias
Nous utilisons les requêtes multimédias suivantes dans nos fichiers Less pour créer les points d'arrêt clés de notre système de grille.
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
Nous développons occasionnellement ces requêtes multimédias pour inclure une largeur maximale afin de limiter les CSS à un ensemble de périphériques plus étroit.
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
Options de grille
Qu'est-ce que le système de grille Bootstrap?
Le système de grille Bootstrap fournit un moyen simple et rapide de créer des mises en page de site Web réactives.
Bootstrap 3 inclut des classes de grille prédéfinies pour créer rapidement des dispositions de grille pour différents types de périphériques tels que les téléphones portables, les tablettes, les ordinateurs portables et les ordinateurs de bureau, etc.
Par exemple, vous pouvez utiliser la classe .col-xs- * pour créer des colonnes de grille pour les petits périphériques supplémentaires tels que les téléphones cellulaires, de même que la classe .col-sm- * pour les petits périphériques tels que les tablettes, la classe .col-md- * pour les périphériques de taille moyenne tels que 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
https://riptutorial.com/fr/home 13
Petits appareils supplémentairesPhones (<768px)
Petits appareils Tablettes (≥768px)
Ordinateurs de bureau de taille moyenne (≥992px)
Ordinateurs de bureau de grande taille (≥ 1200px)
Comportement de la grille
Horizontal à tout moment
Largeur du conteneur
Aucun (auto) 750px 970px 1170px
Préfixe de classe
.col-xs- .col-sm- .col-md- .col-lg-
# de colonnes 12 12 12 12
Largeur de colonne
Auto ~ 62px ~ 81px ~ 97px
Largeur de gouttière
30px (15px de chaque côté d'une colonne)
Nestable Oui
Compensations Oui
Commande de colonne
Oui
Empilé à horizontal
En utilisant un seul ensemble de classes de grille .col-md-* , vous pouvez créer un système de grille de base qui commence à être empilé sur les périphériques mobiles et les tablettes (gamme réduite à petite) avant de devenir horizontale sur les périphériques de bureau. Placez les colonnes de la grille dans n'importe quel .row .
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div>
https://riptutorial.com/fr/home 14
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
Conteneur de fluide
Transformez n'importe quelle disposition de grille à largeur fixe en une disposition pleine largeur en changeant votre .container plus .container en .container-fluid .
<div class="container-fluid"> <div class="row"> ... </div> </div>
Mobile et desktop
Vous ne voulez pas que vos colonnes s'empilent simplement dans des appareils plus petits? Utilisez les classes de grille d'appareil supplémentaires petites et moyennes en ajoutant .col-xs-* .col-md-* à vos colonnes. Voir l'exemple ci-dessous pour une meilleure idée de son fonctionnement.
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
Mobile, tablette, bureau
Utilisez l'exemple précédent en créant des mises en page encore plus dynamiques et puissantes
https://riptutorial.com/fr/home 15
avec les .col-sm-* tablette.
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
Column wrapping
Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une seule unité, placé sur une nouvelle ligne.
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
La colonne réactive se réinitialise
Avec les quatre niveaux de grilles disponibles, vous rencontrerez des problèmes où, à certains points d’arrêt, vos colonnes ne sont pas correctes car l’une est plus grande que l’autre. Pour résoudre ce problème, utilisez une combinaison de .clearfix et de nos classes utilitaires responsive.
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
En plus de la suppression des colonnes aux points d'arrêt sensibles, vous devrez peut-être réinitialiser les décalages, les poussées ou les tirages. Voir ceci en action dans l'exemple de la grille.
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
https://riptutorial.com/fr/home 16
</div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
Colonnes de compensation
Déplacez les colonnes vers la droite en utilisant les .col-md-offset-* . Ces classes augmentent la marge de gauche d'une colonne par * colonnes. Par exemple, .col-md-offset-4 déplace .col-md-4 sur quatre colonnes.
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
Vous pouvez également remplacer les décalages des niveaux de grille inférieurs par les .col-*-offset-0 .
<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>
Colonnes d'imbrication
Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .row et un ensemble de .col-sm-* dans une .col-sm-* existante .col-sm-* . Les lignes imbriquées doivent inclure un ensemble de colonnes de 12 au maximum (il n'est pas nécessaire d'utiliser les 12 colonnes disponibles).
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6">
https://riptutorial.com/fr/home 17
Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
Commande de colonne
Changez facilement l'ordre de nos colonnes de grille .col-md-push-* avec les .col-md-push-* de .col-md-push-* et .col-md-pull-* .
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
Moins de mixins et de variables
En plus des classes de grille prédéfinies pour les mises en page rapides, Bootstrap inclut moins de variables et de mixins pour générer rapidement vos propres mises en page simples et sémantiques.
Les variables
Les variables déterminent le nombre de colonnes, la largeur de la gouttière et le point de requête de support auquel commencer les colonnes flottantes. Nous les utilisons pour générer les classes de grille prédéfinies documentées ci-dessus, ainsi que pour les mixins personnalisés répertoriés ci-dessous.
@grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;
Mixins
Les mixins sont utilisés avec les variables de grille pour générer des CSS sémantiques pour des colonnes de grille individuelles.
// Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); }
https://riptutorial.com/fr/home 18
// Negative margin nested rows out to align the content of columns .row { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } } // Generate the extra small columns .make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small column offsets .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } // Generate the medium columns .make-md-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px;
https://riptutorial.com/fr/home 19
// Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the medium column offsets .make-md-column-offset(@columns) { @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { @media (min-width: @screen-md-min) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } // Generate the large columns .make-lg-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the large column offsets .make-lg-column-offset(@columns) { @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } }
https://riptutorial.com/fr/home 20
Lire Système de grille en ligne: https://riptutorial.com/fr/twitter-bootstrap-3/topic/5914/systeme-de-grille
https://riptutorial.com/fr/home 21
Chapitre 5: Système de grille
Examples
Système de grille bootstrap
Bootstrap utilise un système de grille comportant des lignes et des colonnes
Dans le système Grid, vous utilisez une classe de lignes pour créer une boîte horizontale avec un total de 12 colonnes de taille 1, chacune pour une taille d'écran différente verticalement. Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez regrouper les colonnes pour créer des colonnes plus larges.
Exemple: si vous voulez créer une ligne de 3 colonnes - vous avez une div avec class = "row" (c.-à-d. Une case horizontale) et 3 colonnes (class = col.xs.xx) chacune de taille 3, taille 2, taille 7 (3 + 2 + 7 = 12) pour xs = taille d'écran extra petite taille
Titre
lorem ipsum
Classes de grille
Le système de grille Bootstrap a quatre classes pour la conception réactive comme ceci:
xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)
Comment utiliser?
https://riptutorial.com/fr/home 22
Pour l'exemple de base 4 colonnes
<div class="row"> <div class="col-sm-4">Your Div Content</div> <div class="col-sm-4">Your Div Content</div> <div class="col-sm-4">Your Div Content</div> </div>
Exemple 4 colonnes
Lire Système de grille en ligne: https://riptutorial.com/fr/twitter-bootstrap-3/topic/6173/systeme-de-grille
https://riptutorial.com/fr/home 23
Crédits
S. No
Chapitres Contributeurs
1Démarrer avec twitter-bootstrap-3
Abed Putra, alsobubbly, atjoedonahue, CENT1PEDE, claudios, Community, Deathstorm, Hussain Patel, Krunal Mevada, Nhan, Umut Esen
2 Boutons Abed Putra, andreaem, Saeed.Gh
3Boutons dans twitter-bootstrap-3
Carl Bartlett, imaadhrizni, Muhammad Abdullah
4 Système de grille Huy Nguyen, kernal lora
https://riptutorial.com/fr/home 24
