Cours Bootstrap

Introduction to bootstrap 3 pdf [Eng]


Télécharger Introduction to bootstrap 3 pdf [Eng]

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

Télécharger aussi :


introduction to bootstrap 3 pdf [Eng]

...

Bootstrap

Bootstrap est une infrastructure frontale gratuite pour un développement Web plus rapide et plus facile

Bootstrap comprend des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et de nombreux autres, ainsi que des plugins JavaScript en option

Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives.

Qu'est-ce que le design Web réactif?

Une conception Web réactive consiste à créer des sites Web qui s'adaptent automatiquement à tous les appareils, des petits téléphones aux grands ordinateurs de bureau .

Histoire Bootstrap

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

En juin 2014, Bootstrap était le projet n ° 1 sur GitHub!

Pourquoi utiliser Bootstrap?

Avantages de Bootstrap:

Facile à utiliser:   Toute personne possédant des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap

Caractéristiques réactives:   Le code CSS réactif de Bootstrap s'adapte aux téléphones, tablettes et ordinateurs de bureau

Approche mobile d'abord:   Dans Bootstrap 3, les styles Mobile-First font partie du cadre principal

Compatibilité du navigateur:   Bootstrap est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Safari et Opera)

Où trouver Bootstrap?

Il existe deux façons de commencer à utiliser Bootstrap sur votre propre site Web.

Vous pouvez:

Téléchargez Bootstrap à partir de getbootstrap.com

Inclure le bootstrap à partir d'un CDN

Télécharger Bootstrap

Si vous voulez télécharger et héberger Bootstrap vous-même, allez à   getbootstrap.com , et suivez les instructions.

Bootstrap CDN

Si vous ne souhaitez pas télécharger et héberger Bootstrap vous-même, vous pouvez l'inclure à partir d'un CDN (réseau de distribution de contenu).

MaxCDN fournit un support CDN pour CSS et JavaScript de Bootstrap. Incluez également jQuery:

<! - Dernières CSS compilées et minifiées ->

< lien   rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >

<! - bibliothèque jQuery ->

< script   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < / script >

<! - Dernier code JavaScript compilé ->

< script   src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >

Conseils:

Un avantage de l’utilisation du CDN Bootstrap:

De nombreux utilisateurs ont déjà téléchargé Bootstrap depuis MaxCDN lorsqu'ils visitent un autre site. En conséquence, il sera chargé à partir du cache lors de la visite de votre site, ce qui accélérera le temps de chargement. De plus, la plupart des CDN s'assureront qu'une fois qu'un utilisateur lui demandera un fichier, il sera servi par le serveur le plus proche, ce qui accélérera également le temps de chargement.

Créer la première page Web avec Bootstrap

  1. Ajouter le doctype HTML5

Bootstrap utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5 .

Toujours inclure le doctype HTML5 au début de la page, ainsi que l' attribut lang et le jeu de caractères correct:

< ! DOCTYPE   html >

< html   lang = " en " >

   < tête >

     <meta   charset = "utf-8" >

   < / head >

< / html >

  1. Bootstrap 3 est d'abord mobile

Bootstrap 3 est conçu pour être réactif aux appareils mobiles. Les styles Mobile-First font partie du cadre principal.

Pour assurer un rendu correct et un zoom tactile, ajoutez les éléments suivants   < meta >   étiquette à l'intérieur du   <tête>   élément:

<meta   name = "viewport"   content = "width = device-width, initial-scale = 1" >

le   largeur = largeur-appareil   partie définit la largeur de la page en fonction de la largeur de l'écran du périphérique (qui varie en fonction du périphérique).

le   échelle initiale = 1   partie définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.

  1. Conteneurs

Bootstrap nécessite également un élément contenant pour envelopper le contenu du site. Il existe deux classes de conteneurs parmi lesquelles choisir:

le   .récipient   la classe fournit une réponse   conteneur à largeur fixe

le   .container-fluid   la classe fournit un   conteneur pleine largeur , couvrant toute la largeur de la fenêtre

Remarque:   Les conteneurs ne peuvent pas être imbriqués (vous ne pouvez pas placer un conteneur dans un autre conteneur).

Deux pages d'amorçage de base

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur sensible à largeur fixe):

< ! DOCTYPE   html >

< html   lang = " en " >

< tête >

   < title > Exemple d'amorçage < / title >

   <meta   charset = "utf-8" >

   <meta   name = "viewport"   content = "width = device-width, initial-scale = 1" >

   <link   rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >

   <script   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < / script >

   <script   src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >

< / head >

< body >

<div   class = "conteneur" >

   < h1 > Ma première page d'amorçage < / h1 >

   < p > Ceci est du texte. < / p >

< / div >

< / body >

< / html >

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur pleine largeur):

< ! DOCTYPE   html >

< html   lang = " en " >

< tête >

   < title > Exemple d'amorçage < / title >

   < meta   charset = "utf-8" >

   < meta   name = "viewport"   content = "width = device-width, initial-scale = 1" >

   <link   rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >

   < script   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < / script >

   <script   src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >

< / head >

< body >

< div   class = "conteneur-fluide" >

   < h1 > Ma première page d'amorçage < / h1 >

   < p > Ceci est du texte. < / p >

< / div >

< / body >

< / html >

< / div >

Système Bootstrap Grid

Le système de grille de Bootstrap autorise jusqu'à 12 colonnes sur la page.

Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez les regrouper pour créer

plus larges colonnes:

Le système de grille de Bootstrap est réactif et les colonnes seront réorganisées automatiquement en fonction de la taille de l'écran.

Classes de grille

Le système de grille Bootstrap a quatre classes:

xs (pour les téléphones)

sm (pour les comprimés)

md (pour les ordinateurs de bureau)

lg (pour les plus grands ordinateurs de bureau)

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.

Trois colonnes égales

L'exemple suivant montre comment obtenir trois colonnes de largeur égale en commençant par les tablettes et en les faisant évoluer vers des grands ordinateurs de bureau. Sur les téléphones mobiles, les colonnes s'empileront automatiquement:

<! DOCTYPE html>

< html >

< tête >

< meta charset = "utf-8">

<link rel = "stylesheet" type = "text / css " href = " css /style1.css">

<link rel = "stylesheet" type = "text / css " href = " css /style2.css">

< script src = " js /jquery.js"> </ script>

< script src = " js /script.js"> </ script>



</ head>

< body >

<div class = "container-fluid">

<h1> Bonjour le monde ! < / h1>

<p> Redimensionnez la fenêtre du navigateur pour voir l'effet . < / p>

<div class = "row" >

<div class = "col-sm-4" style = " background-color : lavender ;" > .col-sm-4 </ div>

<div class = "col-sm-4" style = " background-color : lavenderblush ;" > .col-sm-4 </ div>

<div class = "col-sm-4" style = " background-color : lavender ;" > .col-sm-4 </ div>

</ div>

</ div>

</ body >

</ html>

Deux colonnes inégales

<div class = "row" >

<div class = "col-sm-4" style = " background-color : lavender ;" > .col-sm-4 </ div>

<div class = "col-sm-8" style = " couleur de fond : lavenderblush ;" > .col-sm-8 </ div>

</ div>

Bootstrap   Texte / Typographie

Paramètres par défaut de Bootstrap:

La taille de police globale par défaut de Bootstrap est 14px, avec une hauteur de ligne de 1,428.

Ceci est appliqué à la   <body>   et tous les paragraphes.

En outre, tous   <p>   les éléments ont une marge inférieure égale à la moitié de leur hauteur de trait calculée (10 pixels par défaut).

Bootstrap contre les valeurs par défaut du navigateur

Dans ce chapitre, nous examinerons certains éléments HTML dont Bootstrap donnera un style légèrement différent de celui du navigateur par défaut.

<h1> - <h6>

Par défaut, Bootstrap stylisera les en-têtes HTML ( <h1>   à <h6> ) de la manière suivante:

<! DOCTYPE html>

< html >

< tête >

< meta charset = "utf-8">

<link rel = "stylesheet" type = "text / css " href = " css /style1.css">

<link rel = "stylesheet" type = "text / css " href = " css /style2.css">

<script src = " js /jquery.js"> </ script>

< script src = " js /script.js"> </ script>

</ head>

< body >

<div class = "container-fluid">

<h1> En-tête h1 Bootstrap (36px ) < / h1>

<h2> En-tête h2 Bootstrap (30 pixels ) < / h2>

<h3> En-tête h3 Bootstrap (24px ) < / h3>

<h4> En-tête h4 Bootstrap (18 pixels ) < / h4>

<h5> En-tête h5 Bootstrap (14 pixels ) < / h5>

<h6> En- tête h6 Bootstrap (12 pixels ) < / h6>

</ div>

</ body>

</ html>

<petit>

Dans Bootstrap le HTML   <petit>   element est utilisé pour créer un texte secondaire plus clair dans n’importe quel en-tête:

<div class = "conteneur">

<h1> Briquet, texte secondaire </ h1>

<p> Le petit élément est utilisé pour créer un texte secondaire plus clair dans n’importe quel en- tête: </ p>

<h1> h1 en-tête <small> texte secondaire </ small> </ h1>

<h2> titre h2 <petit> texte secondaire </ petit> </ h2>

<h3> h3 en-tête <small> texte secondaire </ small> </ h3>

<h4> intitulé h4 <small> texte secondaire </ small> </ h4>

<h5> Titre h5 <petit> texte secondaire </ petit> </ h5>

<h6> h6 en-tête <small> texte secondaire </ small> </ h6>

</ div>

< marque >

Bootstrap va styler le HTML   <marque>   élément de la manière suivante:

<div class = "conteneur">

<h1> Mettez en surbrillance le texte </ h1>

<p> Utilisez l'élément mark pour <mark> mettre en surbrillance </ mark> le texte . < / p>

</ div>

< abbr >

Bootstrap va styler le HTML   < abbr >   élément de la manière suivante:

<div class = "conteneur">

<h1> Abréviations </ h1>

<p> L' élément abbr est utilisé pour baliser une abréviation ou un acronyme: </ p>

<p> L’organisation < abbr title = "Organisation mondiale de la santé"> </ abbr > a été fondée en 1948 < / p>.

</ div>

< blockquote >

Bootstrap va styler le HTML   < blockquote >   élément de la manière suivante:

<div class = "conteneur">

<h1> Citations sur les blocs </ h1>

<p> L' élément blockquote est utilisé pour présenter du contenu provenant d'une autre source: </ p>

< blockquote >

<p> Depuis 50 ans, le WWF protège l’avenir de la nature. Le WWF est la plus grande organisation de protection de la nature au monde, présente dans 100 pays et compte 1,2 million de membres aux États-Unis et près de 5 millions dans le monde . < / P>

< footer> Sur le site Web du WWF </ footer>

</ blockquote >

Pour afficher la citation à droite, utilisez le bouton   . blockquote -reverse   classe:

<div class = "conteneur">

<h1> Citations sur les blocs </ h1>

<p> Pour afficher la citation à droite, utilisez la classe .pull- right: </ p>

< blockquote class = " blockquote -reverse" >

<p> Depuis 50 ans, le WWF protège l’avenir de la nature. Le WWF est la plus grande organisation de protection de la nature au monde, présente dans 100 pays et compte 1,2 million de membres aux États-Unis et près de 5 millions dans le monde . < / P>

< footer> Sur le site Web du WWF </ footer>

</ blockquote >

</ div>

< kbd >

Bootstrap va styler le HTML   < kbd >   élément de la manière suivante:

<div class = "conteneur">

<h1> Entrées clavier </ h1>

<p> Pour indiquer une entrée généralement saisie au clavier, utilisez la commande kbd. élément: </ p>

<p> Utilisez < kbd > ctrl + p </ kbd > pour ouvrir la boîte de dialogue Imprimer . < / p>

</ div>

< pre >

Bootstrap va styler le HTML   <pre>   élément de la manière suivante:

<div class = "conteneur">

<h1> Plusieurs lignes de code </ h1>

<p> Pour plusieurs lignes de code, utilisez l' élément pre : </ p>

< pre >

Texte dans un pré-élément

est affiché dans une largeur fixe

police , et il préserve

les deux espaces et

sauts de ligne . </ pre>

</ div>

Couleurs et arrière-plans contextuels

Bootstrap possède également des classes contextuelles qui peuvent être utilisées pour fournir "le sens à travers les couleurs".

Les classes pour les couleurs de texte sont:. en sourdine ,   .text-primaire ,   .text-succès ,   .text-info ,   .text-warning , et .text-danger :

<div class = "conteneur">

<h2> Couleurs contextuelles </ h2>

<p> Utilisez les classes contextuelles pour fournir "le sens à travers les couleurs": </ p>

<p class = "text-muted"> Ce texte est muet . < / p>

<p class = "text-primary"> Ce texte est important . < / p>

<p class = "text-success"> Ce texte indique un succès . < / p>

<p class = "text-info"> Ce texte représente des informations . < / p>

<p class = "text-warning"> Ce texte représente un avertissement . < / p>

<p class = "text-danger"> Ce texte représente un danger . < / p>

</ div>

Les classes pour les couleurs d'arrière - plan sont:. bg -primary ,   . bg -success ,   bg -info ,   bg -warning , et   . bg -danger :

<div class = "conteneur">

<h2> Arrière-plans contextuels </ h2>

<p> Utilisez les classes d'arrière-plan contextuelles pour fournir "le sens à travers les couleurs": </ p>

<p class = " bg -primary"> Ce texte est important . < / p>

<p class = " bg -success"> Ce texte indique que l'opération a abouti . < / p>



<p class = " bg -info"> Ce texte représente des informations . < / p>

<p class = " bg -warning"> Ce texte représente un avertissement . < / p>

<p class = " bg -danger"> Ce texte représente un danger . < / p>

</ div>

Plus de cours de typographie

Les classes Bootstrap ci-dessous peuvent être ajoutées pour styler davantage les éléments HTML:

Classe

La description

.conduire

Fait ressortir un paragraphe

.petit

Indique un texte plus petit (défini à 85% de la taille du parent)

.text-left

Indique le texte aligné à gauche

.text-center

Indique un texte aligné au centre

.text-right

Indique un texte aligné à droite

.text-justifier

Indique un texte justifié

.text- nowrap

Indique qu'il n'y a pas de texte renvoyé

.text-minuscule

Indique un texte en minuscule

.text-majuscule

Indique le texte en majuscule

.text-capitalize

Indique le texte en majuscule

.initialisme

Affiche le texte à l'intérieur d'un   < abbr >   élément dans une taille de police légèrement plus petite

.list- sans style

Supprime le style de liste par défaut et la marge gauche des éléments de la liste (fonctionne à la fois   < ul >   et   < ol > ). Cette classe ne s'applique qu'aux éléments de liste d'enfants immédiats (pour supprimer le style de liste par défaut de toutes les listes imbriquées, appliquez également cette classe à toutes les listes imbriquées).

.list-inline

Place tous les éléments de la liste sur une seule ligne

.dl-horizontal

Aligne les termes ( < dt > ) et les descriptions ( < dd > ) dans <dl> éléments côte à côte. Commence comme par défaut   <dl> s, mais lorsque la fenêtre du navigateur s’agrandit, elle s’alignera côte à côte.

.pre-scrollable

Fait un   <pre>   élément défilable

Texte minuscule , Texte majuscule, Texte majuscule

<div class = "conteneur">

<h2> Typographie </ h2>

<p class = "text-lowercase"> Texte en minuscule . < / p>

<p class = "text-majuscule"> Texte mis en majuscule . < / p>

<p class = "text-capitalize"> Texte en majuscule . < / p>

</ div>

Bootstrap   les tables

Tableau de base Bootstrap

Une table Bootstrap de base a un rembourrage léger et uniquement des séparations horizontales.

le   .table   La classe ajoute un style de base à une table:

<div class = "conteneur">

<h2> Table de base </ h2>

<p> La classe .table ajoute un style de base (remplissage léger et séparations horizontales uniquement) à un tableau: </ p>

<table class = "table">

< thead >

< tr >

< th > Prénom </ th >

< th > Nom </ th >

< th > Email </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td> John </ td>

< td> Doe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> Marie </ td>

< td> Moe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> juillet </ td>

< td> Dooley </ td>

<td> [email protected] </ td>

</ tr >

</ tbody >

</ table>

</ div>

Lignes rayées

le   .table-rayé   classe ajoute des zébrures à une table:

<div class = "conteneur">

<h2> Lignes rayées </ h2>

<p> La classe .table-striped ajoute des zébrures à une table: </ p>

<table class = "table table-striped">

< thead >

< tr >

< th > Prénom </ th >

< th > Nom </ th >

< th > Email </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td> John </ td>

< td> Doe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> Marie </ td>

< td> Moe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> juillet </ td>

< td> Dooley </ td>

<td> [email protected] </ td>

</ tr >

</ tbody >

</ table>

</ div>

Table Bordée

le   bordé de table   class ajoute des bordures de tous les côtés de la table et des cellules:

<div class = "conteneur">

<h2> Table bordée </ h2>

<p> La classe .table-bordée ajoute des bordures à un tableau: </ p>

<table class = "table bordée de table">

< thead >

< tr >

< th > Prénom </ th >

< th > Nom </ th >

< th > Email </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td> John </ td>

< td> Doe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> Marie </ td>

< td> Moe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> juillet </ td>

< td> Dooley </ td>

<td> [email protected] </ td>

</ tr >

</ tbody > < / table>

</ div>

Survolez les lignes

le   .table-hover   class active un état de survol sur les lignes de la table:

<table class = "table table-hover">

Tableau condensé

le   .table condensé   class rend une table plus compacte en réduisant de moitié le rembourrage des cellules:

<div class = "conteneur">

<h2> Tableau condensé </ h2>

<p> La classe .table-condensed rend une table plus compacte en réduisant de moitié le remplissage des cellules: </ p>

<table class = "table table condensée">

< thead >

< tr >

< th > Prénom </ th >

< th > Nom </ th >



< th > Email </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td> John </ td>

< td> Doe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> Marie </ td>

< td> Moe </ td>

<td> [email protected] </ td>

</ tr >

< tr >

< td> juillet </ td>

< td> Dooley </ td>

<td> [email protected] </ td>

</ tr >

</ tbody >

</ table>

</ div>

Classes Contextuelles

Les classes contextuelles peuvent être utilisées pour colorer des lignes de tableau ( < tr > ) ou des cellules de tableau ( <td> ):

<div class = "conteneur">

<h2> Classes contextuelles </ h2>

<p> Les classes contextuelles peuvent être utilisées pour colorer des lignes ou des cellules de tableau. Les classes utilisables sont: .active, .success, .info, .warning et .danger. </ P>

<table class = "table">

< thead >

< tr >

< th > Prénom </ th >

< th > Nom </ th >

< th > Email </ th >

</ tr >

</ thead >

< tbody >

< tr class = "success">

< td> John </ td>

< td> Doe </ td>

<td> [email protected] </ td>

</ tr >

< tr class = "danger">

< td> Marie </ td>

< td> Moe </ td>

<td> [email protected] </ td>

</ tr >

< tr class = "info">

< td> juillet </ td>

< td> Dooley </ td>

<td> [email protected] </ td>

</ tr >

</ tbody >

</ table>

</ div>

Les classes contextuelles pouvant être utilisées sont:

Classe

La description

.actif

Applique la couleur de survol à la ligne ou à la cellule du tableau

.Succès

Indique une action réussie ou positive

.Info

Indique un changement ou une action informatif neutre

.Attention

Indique un avertissement qui pourrait avoir besoin d'attention

.danger

Indique une action dangereuse ou potentiellement négative

Tables réactives

le   .table-responsive   La classe crée une table sensible. La table défilera ensuite horizontalement sur de petits appareils (moins de 768 pixels). Lors de la visualisation sur tout ce qui dépasse 768px large, il n'y a pas de différence:

<div class = "table-responsive">

Bootstrap   Images

<div class = "conteneur">

< img src = "5.jpg" width = "300px" class = " img -rounded " title = " img -rounded">

< img src = "5.jpg" width = "300px" class = " img -circle" title = " img -circle">

< img src = "5.jpg" width = "300px" class = "img -thumbnail" title = "img -thumbnail"> <br> <br>

< img src = "5.jpg" width = "300px" class = " img -responsive" title = " img -responsive">

</ div>

Bootstrap   Jumbotron et en-tête de page

Un jumbotron indique une grande boîte pour attirer l'attention sur un contenu ou une information particulière.

Un jumbotron est affiché comme une boîte grise avec des coins arrondis. Il agrandit également les tailles de police du texte qu'il contient.

Pointe:   Dans un jumbotron, vous pouvez mettre presque n'importe quel code HTML valide, y compris d'autres éléments / classes de Bootstrap.

Utiliser un   <div>   élément avec classe   . Jumbotron   pour créer un jumbotron :

Jumbotron Inside Container

Placez le jumbotron à l’intérieur du   <div class = "conteneur">   si vous voulez que le jumbotron ne s’étende PAS jusqu’au bord de l’écran:

<div class = "conteneur">

<div class = " jumbotron ">

<h1> Didacticiel Bootstrap </ h1>

<p> Bootstrap est le framework HTML, CSS et JS le plus répandu pour le développement de projets Web réactifs et mobiles. </ p>

</ div>

<p> Ceci est du texte . < / p>

<p> Ceci est un autre texte . < / p>

</ div>

Conteneur extérieur Jumbotron

Placez le jumbotron en dehors du   <div class = "conteneur">   si vous voulez que le jumbotron s’étende jusqu'aux bords de l’écran:

<div class = " jumbotron ">

<h1> Didacticiel Bootstrap </ h1>

<p> Bootstrap est le framework HTML, CSS et JS le plus répandu pour le développement de projets Web réactifs et mobiles. </ p>

</ div>

<div class = "conteneur">

<p> Ceci est du texte . < / p>

<p> Ceci est un autre texte . < / p>

</ div>

Créer un en-tête de page

Un en-tête de page est comme un diviseur de section.

le   .page-header   class ajoute une ligne horizontale sous l'en-tête (+ ajoute un espace supplémentaire autour de l'élément):

<div class = "conteneur">

<div class = "page-header">

<h1> Exemple d'en-tête de page </ h1>

</ div>

<p> Ceci est du texte . < / p>

<p> Ceci est un autre texte . < / p>

</ div>

Bootstrap   puits

puits

le   .bien   La classe ajoute une bordure arrondie autour d'un élément avec une couleur de fond grise et un peu de remplissage:

<div class = "conteneur">

<h2> Bien </ h2>

<div class = "well"> Puits de base </ div>

</ div>

Changer la taille du puits en ajoutant le   .well- sm   classe pour petits puits ou   .well- lg   classe pour les grands puits:

<div class = "conteneur">

<h2> Taille du puits </ h2>

<div class = "well well- sm "> Petit puits </ div>

<div class = "well"> Bien normal </ div>

<div class = "well well- lg "> Grand puits </ div> </ div>



21