Tutorial de bootstrap 3 pdf [Eng]


Télécharger Tutorial de bootstrap 3 pdf [Eng]

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

Télécharger aussi :


tutorial de bootstrap 3 pdf [Eng]

BOOTSTRAP

Twitter Bootstrap est le framework le plus populaire actuellement. Il est élégant et le premier cadre frontal mobile puissant pour un développement Web plus rapide et plus facile . Il utilise HTML, CSS et JavaScript. En utilisant Bootstrap, nous pouvons créer facilement des projets Web.

Le service informatique est divisé en sections telles que la structure de base Bootstrap , Bootstrap CSS , les composants de mise en page Bootstrap et les plugins Bootstrap .

L'histoire

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

Pourquoi utiliser Bootstrap?

  • Première approche de Mobile: Depuis Bootstrap 3, la structure consiste en des styles de premier mobile dans toute la bibliothèque au lieu de fichiers distincts.
  • Support de navigateur: Il est supporté par tous les navigateurs populaires.
  • Facile à démarrer: avec juste la connaissance de HTML et CSS, n'importe qui peut démarrer avec Bootstrap. Le site officiel de Bootstrap a également une bonne documentation.
  • Conceptionsensible: le code CSS réactif de Bootstrap s'adapte aux ordinateurs de bureau, tablettes et mobiles.
  • Fournit une solution propre et uniforme pour la construction d'une interface pour les développeurs.
  • Il contient des composants intégrés, beaux et fonctionnels, faciles à personnaliser.
  • Il fournit également une personnalisation basée sur le Web.
  • Et le meilleur de tous c'est une source ouverte.

Quel forfait Bootstrap comprend?

  • Échafaudage:Bootstrap fournit une structure de base avec système de grille, styles de lin , arrière-plan.
  • CSS: Bootstrap comprend une fonctionnalité de paramètres CSS globaux, des éléments HTML fondamentaux stylés et améliorés avec des classes extensibles et un système de grille avancé.
  • Composants:Bootstrap contient plus d’une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, une navigation, des alertes et des overs, et bien plus encore.
  • Plugins JavaScript:Bootstrap contient plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez facilement les inclure tous, ou un par un.
  • Personnaliser:vous pouvez personnaliser les composants, les variables LESS et les plugins jQuery de Bootstrap pour obtenir votre propre version.

Il est très facile d’installer et de commencer à utiliser Bootstrap.

Télécharger Bootstrap

Vous pouvez télécharger la dernière version de Bootstrap à l’adresse http://getbootstrap.com/ . Lorsque vous cliquez sur ce lien, vous verrez apparaître un écran comme ci-dessous:

Ici vous pouvez voir deux boutons:

  • Télécharger Bootstrap: En cliquant dessus, vous pouvez télécharger les versions précompilées et minifiées de Bootstrap CSS, JavaScript et des polices. Aucune documentation ou fichiers de code source d'origine ne sont inclus.
  • Source de téléchargement: En cliquant dessus, vous pouvez obtenir le dernier code source Bootstrap LESS et JavaScript directement à partir de GitHub.

Si vous travaillez avec le code source non compilé de Bootstrap, vous devez compiler les fichiers LESS pour générer des fichiers CSS utilisables. Pour compiler les fichiers CSS dans LESS, Bootstrap soutient officiellement que Recess , qui est le Hinter CSS Twitter basé sur less.js .

Structure de fichier

Bootstrap précompilé

Une fois que la version compilée de Bootstrap est téléchargée, extrayez le fichier ZIP et vous verrez la structure de fichiers / répertoires suivante:

Comme vous pouvez le voir, il existe CSS et JS compilés (bootstrap. *), Ainsi que des CSS et JS compilés et minifiés (bootstrap.min. *). Les polices de Glyphicons sont incluses, de même que le thème Bootstrap optionnel.

Code source d'amorçage

Si vous avez téléchargé le code source Bootstrap, la structure du fichier serait la suivante:

  • Les fichiers sous less /js / et fonts / constituent le code source des polices Bootstrap CSS, JS et icon (respectivement).
  • Le répertoire dist /folder comprend tout ce qui est répertorié dans la section de téléchargement précompilé ci-dessus.
  • docs-assets /examples / et tous les fichiers * .html font partie de la documentation Bootstrap.

Modèle HTML

Un modèle HTML de base utilisant Bootstrap ressemblerait à ceci:

  • <! DOCTYPE html>
  • <html>
  • <tête>
  • <title> Modèle Bootstrap 101 </ title>
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >
  • <! - Bootstrap ->
  • <lien href = "css / bootstrap.min.css" rel = "stylesheet" >
  • <! - Prise en charge des éléments et des supports HTML5 par HTML5 Shim et Respond.js IE8
  • requêtes ->
  • <! - AVERTISSEMENT: Respond.js ne fonctionne pas si vous affichez la page
  • via fichier: // ->
  • <! - [si lt IE 9]>
  • <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/
  • js "> </ script>
  • <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/
  • min.js "> </ script>
  • <! [endif] ->
  • </ head>
  • <body>
  • <h1> Bonjour le monde! </ h1>
  • <! - jQuery (nécessaire pour les plugins JavaScript de Bootstrap) ->
  • <script src = "https://code.jquery.com/jquery.js" > </ script>
  • <! - Inclure tous les plugins compilés (ci-dessous) ou inclure des fichiers individuels
  • au besoin ->
  • <script src = "js / bootstrap.min.js" > </ script>
  • </ body>
  • </ html>

Ici, vous pouvez voir les fichiers jquery.js et bootstrap.min.js et bootstrap.min.css inclus pour créer un fichier HTM normal en modèle Bootstrapped.

Bootstrap avec CSS :

Doctype HTML5

Bootstrap utilise certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Par conséquent, incluez le code ci-dessous pour le type de document HTML5 au début de tous vos projets utilisant Bootstrap.

<! DOCTYPE html>

<html>

....

</ html>

Mobile First

Depuis Bootstrap 3, Bootstrap est devenu le premier mobile. Cela signifie que les premiers styles mobiles peuvent être trouvés dans toute la bibliothèque plutôt que dans des fichiers séparés.Vous devez ajouter la balise méta de la fenêtre d'affichage à l' élément <head> pour garantir un rendu correct et un zoom tactile sur les périphériques mobiles.

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

  • Lapropriété width contrôle la largeur du périphérique. En le configurant à la largeur de l' appareil , vous vous assurerez qu'il est correctement rendu sur divers appareils (mobiles, ordinateurs de bureau, tablettes, etc.).
  • initial-scale = 1.0garantit que, une fois chargée, votre page Web sera rendue à une échelle de 1: 1 et aucun zoom ne sera appliqué hors de la boîte.

Ajoutez user-scalable = no à l' attribut de contenu pour désactiver les fonctionnalités de zoom sur les appareils mobiles, comme indiqué ci-dessous. Les utilisateurs ne peuvent que faire défiler et ne pas zoomer avec cette modification, et votre site se sent un peu plus semblable à une application native.

<meta name = "viewport" content = "width = device-width,

échelle initiale = 1.0,

échelle maximale = 1,0,

user-scalable = no ">

Normalement, maximum-scale = 1.0 est utilisé avec user-scalable = no . Comme mentionné ci-dessus, user-scalable = no peut donner aux utilisateurs une expérience plus semblable à une application native; par conséquent, Bootstrap ne recommande pas d'utiliser cet attribut.

Images sensibles

Bootstrap 3 permet de rendre les images réactives en ajoutant une classe .img-responsive à la balise <img> . Cette classe s'applique max-width: 100%; et hauteur: auto; à l'image de sorte qu'il s'adapte bien à l'élément parent.

<img src = "..." class = "img-responsive" alt = "Image sensible">

Typographie et liens

Bootstrap définit un style global de base (arrière-plan), une typographie et des styles de lien:

  • Affichage global de base:Définit la couleur de fond: #fff; sur l' élément <body> .
  • Typographie:utilise les attributs @ font-family-base , @ font-size-base et @ line-height-base comme base typographique.
  • Styles de lien:définit la couleur du lien global via l'attribut @ link-color et applique le soulignement de lien uniquement sur : survolez .

Si vous avez l’intention d’utiliser du code LESS, vous pouvez trouver tout cela dans scaffolding.less .

Normaliser

Bootstrap utilise Normaliser pour établir la cohérence entre les navigateurs.

Normalize.css est une alternative moderne, compatible HTML5, aux réinitialisations CSS. Il s'agit d'un petit fichier CSS qui offre une meilleure cohérence entre les navigateurs dans le style par défaut des éléments HTML.

Les conteneurs

Utilisez class .container pour envelopper le contenu d'une page et centrer facilement le contenu, comme indiqué ci-dessous.

<div class = "conteneur">

...

</ div>

Jetez un coup d’œil à la classe .container dans le fichier bootstrap.css :

.récipient {

padding-right: 15px;

padding-left: 15px;

marge droite: auto;

marge gauche: auto;

}

Notez qu'en raison du remplissage et des largeurs fixes, les conteneurs ne peuvent pas être imbriqués par défaut.

Jetez un coup d'œil au fichier bootstrap.css :

@media (min-width: 768px) {

.récipient {

largeur: 750px;

}

Ici, vous pouvez voir que CSS a des requêtes multimédia pour les conteneurs de largeur . Cela facilite l'application de la réactivité et la classe de conteneur est modifiée en conséquence pour rendre le système de grille correctement.

Système Bootstrap Grid

Les systèmes de grille sont utilisés pour créer des mises en page à travers une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap:

  • Les lignes doivent être placées dans une classe .containerpour un alignement et un remplissage corrects.
  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.
  • Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être des enfants immédiats de lignes.
  • Classes de grille prédéfinies telles que .row etLes fichiers .col-xs-4 permettent de réaliser rapidement des mises en page de grille. Les mixins LESS peuvent également être utilisés pour des dispositions plus sémantiques.
  • Les colonnes créent des gouttières (espaces entre les contenus de colonne) via un remplissage. Ce remplissage est décalé en lignes pour les première et dernière colonnes via une marge négative sur .rows.
  • Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez étendre. Par exemple, trois colonnes égales utiliseraient trois .col-xs-4.

Requêtes de médias

La requête multimédia est un terme très sophistiqué pour "règle CSS conditionnelle". Il applique simplement des CSS en fonction de certaines conditions énoncées. Si ces conditions sont remplies, le style est appliqué.

Les requêtes multimédia dans Bootstrap vous permettent de déplacer, d'afficher et de masquer le contenu en fonction de la taille de la fenêtre. Les requêtes multimédia suivantes sont utilisées dans les fichiers LESS pour créer les points d'arrêt clés dans le système de grille Bootstrap.

/ * Très petits appareils (téléphones, moins de 768px) * /

/ * Aucune requête de média car il s'agit de la valeur par défaut dans Bootstrap * /

/ * Petits appareils (tablettes, 768px et plus) * /

@media (min-width: @ screen-sm-min) {...}

/ * Appareils de taille moyenne (ordinateurs de bureau, 992px et plus) * /

@media (min-width: @ screen-md-min) {...}

/ * Gros appareils (grands ordinateurs de bureau, 1200px et plus) * /

@media (min-width: @ screen-lg-min) {...}

Celles-ci sont parfois étendues pour inclure une largeur maximale afin de limiter les CSS à un ensemble plus restreint de périphériques.

@media (max-width: @ screen-xs-max) {...}

@media (min-width: @ screen-sm-min) et (max-width: @ screen-sm-max) {...}

@media (min-width: @ screen-md-min) et (max-width: @ screen-md-max) {...}

@media (min-width: @ screen-lg-min) {...}

Les requêtes de média comportent deux parties: une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, la règle suivante est définie:

Permet de considérer cette ligne:

@media (min-width: @ screen-sm-min) et (max-width: @ screen-sm-max) {...}

Pour tous les appareils, quel que soit leur type avec min-width: @ screen-sm-min si la largeur de l'écran devient inférieure à @ screen-sm-max , faites quelque chose .

Options de grille

Le tableau suivant résume les aspects du fonctionnement du système de grille Bootstrap sur plusieurs périphériques:

...

Structure de base de la grille

Voici la structure de base de la grille Bootstrap:

<div class = "conteneur">

<div class = "row">

<div class = "col - * - *"> </ div>

<div class = "col - * - *"> </ div>

</ div>

<div class = "row"> ... </ div>

</ div>

<div class = "container"> ....

Réinitialisation de la colonne réactive

Avec les quatre niveaux de grilles disponibles, vous rencontrerez des problèmes pour lesquels, à certains points d'arrêt, vos colonnes ne sont pas effacées correctement, l'une étant plus haute que l'autre. Pour résoudre ce problème, utilisez une combinaison de la classe .clearfix et des classes utilitaires responsive, comme indiqué dans l'exemple suivant:

<div class = "conteneur">

<div class = "row">

<div class = "col-xs-6 col-sm-3"

style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur elit adipisicing. </ p>

</ div>



<div class = "col-xs-6 col-sm-3"

style = "background-color: # dedef8; box-shadow:

insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incidid ut ut labore et dolore magna aliqua. Utah

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo conséquat.

</ p>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut.

</ p>

</ div>

<div class = "clearfix visible-xs"> </ div>

<div class = "col-xs-6 col-sm-3"

style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

         <p> Ut en ad minimen veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo conséquat.

</ p>

</ div>

<div class = "col-xs-6 col-sm-3"

style = "background-color: # dedef8; box-shadow:

insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incidid ut ut labore et dolore magna aliqua. Utah

enim ad minim

</ p>

</ div>

</ div>

</ div>

Redimensionnez votre fenêtre ou consultez-la sur votre téléphone pour obtenir le résultat souhaité de cet exemple.

Colonnes décalées

Les décalages sont une fonctionnalité utile pour les dispositions plus spécialisées. Ils peuvent être utilisés pour pousser des colonnes pour obtenir plus d'espacement, par exemple. Les classes .col-xs = * ne prennent pas en charge les décalages, mais elles sont facilement répliquées à l'aide d'une cellule vide.

Pour utiliser les décalages sur de grands écrans, utilisez les classes .col-md-offset- * . Ces classes augmentent la marge gauche d'une colonne de * colonnes où * vont de 1 à 11 .

Dans l'exemple suivant, nous avons <div class = "col-md-6"> .. </ div>, nous allons centrer cela en utilisant la classe .col-md-offset-3 .

<div class = "conteneur">

<h1> Bonjour le monde! </ h1>

<div class = "row">

<div class = "col-xs-6 col-md-offset-3"

style = "background-color: # dedef8; box-shadow:

insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing

élit.

</ p>

</ div>

</ div>

</ div>

Colonnes de nidification

Pour imbriquer votre contenu dans la grille par défaut, ajoutez un nouveau .row et un nouvel ensemble de colonnes .col-md- * dans une colonne existante .col-md- * . Les lignes imbriquées doivent inclure un ensemble de colonnes totalisant 12.

Dans l'exemple suivant, la mise en page comporte deux colonnes, la seconde étant divisée en quatre zones réparties sur deux lignes.

<div class = "conteneur">

<h1> Bonjour le monde! </ h1>

<div class = "row">

<div class = "col-md-3" style = "background-color: # dedef8; box-shadow:

insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<h4> Première colonne </ h4>

<p> Lorem ipsum dolor sit amet, consectetur elit adipisicing. </ p>

</ div>

<div class = "col-md-9" style = "background-color: # dedef8; box-shadow:

insert 1px -1px 1px # 444, insert -1 px 1px 1px # 444; ">

<h4> Deuxième colonne - divisée en 4 cases </ h4>

<div class = "row">

<div class = "col-md-6" style = "couleur de fond: # B18904;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

<p> Soirée d’art Consectetur Sémiotique de Tonx Culpa. Pinterest

hypothèse minimale organique.

</ p>

</ div>

<div class = "col-md-6" style = "couleur de fond: # B18904;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

<p> sed eiusmod temporaire incididut ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo conséquat.

</ p>

</ div>

</ div>

<div class = "row">

<div class = "col-md-6" style = "couleur de fond: # B18904;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

               <p> quis nostrud exercitation ullamco laboris nisi ut

                  aliquip ex ea commodo conséquat.

</ p>

</ div>

<div class = "col-md-6" style = "couleur de fond: # B18904;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed eiusmod temporaire incididunt ut labore et dolore magna

aliqua. Ut en ad ad minim. </ P>

</ div>

</ div>

</ div>

</ div>

</ div>

Commande de colonne

Une autre fonctionnalité intéressante du système de grille Bootstrap est que vous pouvez facilement écrire les colonnes dans un ordre et les afficher dans un autre. Vous pouvez facilement changer l'ordre des colonnes de grille intégrées avec les classes de modificateur .col-md-push- * et .col-md-pull- * , où * va de 1 à 11 .

Dans l'exemple suivant, nous avons une disposition à deux colonnes, la colonne de gauche étant la plus étroite et jouant le rôle de barre latérale. Nous allons échanger l’ordre de ces colonnes en utilisant les classes .col-md-push- * et .col-md-pull- * .

<div class = "conteneur">

<h1> Bonjour le monde! </ h1>

<div class = "row">

<p> Avant de commander </ p>

<div class = "col-md-4" style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

Je suis à gauche

</ div>

<div class = "col-md-8" style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444, incrément -1px 1px 1px # 444; ">

Je suis à droite

</ div>

</ div> <br>

<div class = "row">

<p> Après la commande </ p>

<div class = "col-md-4 col-md-push-8"

style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444,

insert -1px 1px 1px # 444; ">

J'étais à gauche

</ div>

<div class = "col-md-8 col-md-pull-4"

style = "background-color: # dedef8;

box-shadow: incrément 1px -1px 1px # 444,

insert -1px 1px 1px # 444; ">

J'étais à droite

</ div>

</ div>

</ div>

Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif dans sa pile de polices par défaut. En utilisant la fonctionnalité de typographie de Bootstrap, vous pouvez créer des en-têtes, des paragraphes, des listes et d’autres éléments intégrés. Voyons chacun d'eux dans les sections suivantes:

Rubriques

Tous les en-têtes HTML (h1 à h6) sont stylés dans Bootstrap. Un exemple est comme ci-dessous:

<h1> Je me dirige sur h1 </ h1>

<h2> Je suis en-tête2 h2 </ h2>

<h3> Je me dirige sur h3 </ h3>

<h4> Je me dirige sur la droite4 h4 </ h4>

<h5> Je me dirige vers h5 </ h5>

<h6> Je me dirige vers h6 </ h6>

Le segment de code ci-dessus avec Bootstrap produira le résultat suivant:

Sous-titres en ligne

Pour ajouter un sous-titre en ligne à l'un des en-têtes, ajoutez simplement <small> autour de l'un des éléments ou ajoutez la classe .small et vous obtiendrez un texte plus petit dans une couleur plus claire, comme indiqué dans l'exemple ci-dessous:

<h1> Je me dirige1 h1. <small> Je suis secondaire Titre1 h1 </ small> </ h1>

<h2> Je suis en-tête2 h2. <small> Je suis secondaire Heading2 h2 </ small> </ h2>

<h3> Je suis cap 3 h3. <small> Je suis secondaire Titre3 h3 </ small> </ h3>

<h4> Je me dirige sur la droite4 h4. <small> Je suis secondaire Heading4 h4 </ small> </ h4>

<h5> Je me dirige5 h5. <small> Je suis secondaire Titre5 h5 </ small> </ h5>

<h6> Je me dirige6 h6. <small> Je suis secondaire Titre1 h6 </ small> </ h6>

Le segment de code ci-dessus avec Bootstrap produira le résultat suivant:

Corps de copie

Pour mettre un paragraphe en évidence, ajoutez class = "lead". Cela vous donnera une taille de police plus grande, un poids plus léger et une hauteur de ligne plus grande comme dans l'exemple suivant:

<h2> Exemple de prospect </ h2>

<p class = "lead"> Ceci est un exemple de paragraphe démontrant l'utilisation de la copie de corps de lead. Ceci est un exemple de paragraphe démontrant l’utilisation de la copie de corps en plomb. Ceci est un exemple de paragraphe illustrant l’utilisation de la copie de corps en plomb.Il s’agit d’un paragraphe d’exemple illustrant l’utilisation de la copie de corps en plomb.Il s’agit d’un paragraphe d’exemple illustrant l’utilisation de corps en plomb copie. </ p>

Accentuation

Les balises d'emphase par défaut de HTML, telles que << small >> (définit le texte à 85% de la taille du parent), <strong> souligne un texte avec une épaisseur de police plus importante, <em> met l'accent sur un texte en italique.

Bootstrap propose quelques classes pouvant être utilisées pour mettre l'accent sur les textes, comme dans l'exemple suivant:

<small> Ce contenu est dans la <small> balise </ small> <br>

<strong> Ce contenu est dans la <strong> balise </ strong> <br>

<em> Ce contenu est dans la balise <em> et est affiché en italique </ em> <br>

<p class = "text-left"> Texte aligné à gauche. </ p>

<p class = "text-center"> Texte aligné au centre. </ p>

<p class = "text-right"> Texte aligné à droite. </ p>

<p class = "text-muted"> Ce contenu est mis en sourdine </ p>

<p class = "text-primary"> Ce contenu comporte une classe d'avertissement </ p>

<p class = "text-success"> Ce contenu comporte une classe de réussite </ p>

<p class = "text-info"> Ce contenu comporte une classe d'informations </ p>

<p class = "text-warning"> Ce contenu comporte une classe d'avertissement </ p>

<p class = "text-danger"> Ce contenu comporte une classe de danger </ p>

Les abréviations

L'élément HTML fournit un balisage pour les abréviations ou les acronymes, tels que WWW ou HTTP. Amorcez les styles <abbr> avec une bordure en pointillé dans le bas et révèle le texte intégral au survol (tant que vous ajoutez ce texte à l'attribut <abbr> title). Pour obtenir une taille de police légèrement inférieure, ajoutez .initialism à <abbr>.

<abbr title = "World Wide Web"> WWW </ abbr> <br>

<abbr title = "Real Simple Syndication" class = "initialism"> RSS </ abbr>

Adresses

En utilisant la balise <address>, vous pouvez afficher les informations de contact sur votre page Web. Par défaut, <adresse> affiche: block; vous aurez besoin d'utiliser 
balises pour ajouter des sauts de ligne au texte d’adresse inclus.

<adresse>

<strong> Some Company, Inc. </ strong> <br>

Rue 007 <br>

Une ville, état XXXXX <br>

<abbr title = "Téléphone"> P: </ abbr> (123) 456-7890

</ adresse>

<adresse>

<strong> Nom complet </ strong> <br>

<a href="mailto:#"> mailto@somedomain.com </a>

</ adresse>

Devis de blocs

Vous pouvez utiliser la <blockquote> par défaut autour de n'importe quel texte HTML. Vous pouvez également ajouter une balise <small> pour identifier la source de la citation et aligner à droite la citation de bloc à l' aide de la classe .pull-right . L'exemple suivant illustre toutes ces fonctionnalités:

<blockquote> <p>

Ceci est un exemple blockquote par défaut. Ceci est un exemple blockquote par défaut. Ceci est un exemple de citation de bloc par défaut. Il s'agit d'un exemple de citation de bloc par défaut. Ceci est un exemple de blockquote par défaut. </ P> </ blockquote>



<blockquote> Il s'agit d'un blockquote avec un titre source. <small> Quelqu'un de célèbre en <cite title = "Titre source"> Titre source </ cite> </ small> </ blockquote>

<blockquote class = "pull-right"> Il s'agit d'un blockquote aligné à droite. <small> Quelqu'un de célèbre en <cite title = "Titre de la source"> Titre de la source </ cite> </ small> </ blockquote>

Des listes

Bootstrap prend en charge les listes ordonnées, les listes non ordonnées et les listes de définitions.

  • Listes ordonnées: Une liste ordonnée est une liste qui tombe dans une sorte d'ordre séquentiel et est précédée de chiffres.
  • Listesnon ordonnées: Une liste non ordonnée est une liste sans ordre particulier et traditionnellement stylée avec des puces. Si vous ne souhaitez pas que les puces apparaissent, vous pouvez supprimer le style en utilisant la classe .list-unstyled . Vous pouvez également placer tous les éléments de la liste sur une seule ligne à l'aide de la classe .list-inline .
  • Listes de définitions: dans ce type de liste, chaque élément de la liste peut être composé des éléments <dt> et <dd>. <dt> signifie terme de définition et, comme un dictionnaire, il s'agit du terme (ou de la phrase) en cours de définition. Par la suite, le <dd> est la définition du <dt>.

Vous pouvez créer des termes et des descriptions dans <dl> côte à côte à l’aide de la classe dl-horizontale .

L'exemple suivant illustre chacun de ces types:

<h4> Exemple de liste ordonnée </ h4>

<ol>

<li> élément 1 </ li>

<li> élément 2 </ li>

<li> élément 3 </ li>

<li> élément 4 </ li>

</ ol>

<h4> Exemple de liste non commandée </ h4>

<ul>

<li> élément 1 </ li>

<li> élément 2 </ li>

<li> élément 3 </ li>

<li> élément 4 </ li>

</ ul>

<h4> Exemple de liste non stylée </ h4>

<ul class = "list-unstyled">

  <li> élément 1 </ li>

<li> élément 2 </ li>

<li> élément 3 </ li>

<li> élément 4 </ li>

</ ul>

<h4> Exemple de liste en ligne </ h4>

<ul class = "list-inline">

  <li> élément 1 </ li>

<li> élément 2 </ li>

<li> élément 3 </ li>

<li> élément 4 </ li>

</ ul>

<h4> Exemple de liste de définitions </ h4>

<dl>

<dt> Description 1 </ dt>

<dd> élément 1 </ dd>

<dt> Description 2 </ dt>

<dd> élément 2 </ dd>

</ dl>

<h4> Exemple de liste de définition horizontale </ h4>

<dl class = "dl-horizontal">

<dt> Description 1 </ dt>

<dd> élément 1 </ dd>

<dt> Description 2 </ dt>

<dd> élément 2 </ dd>

</ dl>

Bootstrap vous permet d’afficher du code de deux manières différentes:

  • Le premier est la balise <code>. Si vous allez afficher du code en ligne, vous devez utiliser la balise <code>.
  • La seconde est la balise <pre>. Si le code doit être affiché en tant qu'élément de bloc autonome ou s'il comporte plusieurs lignes, utilisez la balise <pre>.

Assurez-vous que lorsque vous utilisez les balises <pre> et <code>, vous utilisez les variantes unicode pour les balises d'ouverture et de fermeture: & lt; et & gt; .

Voyons un exemple ci-dessous:

<p> <code> & lt; en-tête & gt; </ code> est encapsulé sous la forme d'un élément en ligne. </ p>

<p> Pour afficher le code en tant qu'élément de bloc autonome, utilisez & lt; pre & gt; tag comme:

<pre>

& lt; article & gt;

& lt; h1 & gt; Article Titre & lt; / h1 & gt;

& lt; / article & gt;

</ pre>

Bootstrap fournit une mise en page propre pour la construction de tables. Certains des éléments de table pris en charge par Bootstrap sont:

Étiquette

La description

<table>

Elément d'habillage pour l'affichage des données sous forme de tableau

<thead>

Elément conteneur pour les lignes d'en-tête de table (<tr>) permettant d'étiqueter les colonnes de table

<tbody>

Elément conteneur pour les lignes de table (<tr>) dans le corps de la table

<tr>

Elément conteneur pour un ensemble de cellules de tableau (<td> ou <th>) qui apparaît sur une seule ligne

<td>

Cellule de tableau par défaut

<th>

Cellule de tableau spéciale pour les étiquettes de colonne (ou de ligne, en fonction de l'étendue et du placement). Doit être utilisé dans un <thead>

<légende>

Description ou résumé de ce que la table contient.

Table de base

Si vous voulez un style de table de base agréable avec juste quelques marges et séparations horizontales, ajoutez la classe de base de .table à n’importe quelle table, comme indiqué dans l’exemple suivant:

<table class = "table">

<caption> Disposition de base du tableau </ caption>

<thead>

<tr>

<th> Nom </ th>

<th> Ville </ th>

</ tr>

</ thead>

<tbody>

<tr>

<td> Tanmay </ td>

<td> Bangalore </ td>

</ tr>

<tr>

<td> Sachin </ td>

<td> Mumbai </ td>

</ tr>

</ tbody>

</ table>

Classes de table optionnelles

Outre le balisage de la table de base et la classe .table, vous pouvez utiliser quelques classes supplémentaires pour styliser le balisage. Les sections suivantes vous donneront un aperçu de tous ces cours.

Table à rayures

En ajoutant la classe .table-striped , vous obtiendrez des bandes sur les lignes du <tbody>, comme indiqué dans l'exemple suivant:

<table class = "table table-striped">

<caption> Disposition de la table à bandes </ caption>

<thead>

<tr>

<th> Nom </ th>

<th> Ville </ th>

<th> Code PIN </ th>

</ tr>

</ thead>

<tbody>

<tr>

<td> Tanmay </ td>

<td> Bangalore </ td>

<td> 560001 </ td>

</ tr>

<tr>

<td> Sachin </ td>

<td> Mumbai </ td>

<td> 400003 </ td>

</ tr>

<tr>

<td> Uma </ td>

<td> Pune </ td>

<td> 411027 </ td>

</ tr>

</ tbody>

</ table>

Table Bordée

En ajoutant la classe .table-bordée , vous obtiendrez des bordures entourant chaque élément et des angles arrondis autour de la table entière, comme illustré dans l'exemple suivant:

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

<caption> Disposition du tableau avec bordure </ caption>

<thead>

<tr>

<th> Nom </ th>

<th> Ville </ th>

<th> Code PIN </ th>

</ tr>

</ thead>

<tbody>

<tr>

<td> Tanmay </ td>

<td> Bangalore </ td>

<td> 560001 </ td>

</ tr>

<tr>

<td> Sachin </ td>

<td> Mumbai </ td>

<td> 400003 </ td>

</ tr>

<tr>

<td> Uma </ td>

<td> Pune </ td>

<td> 411027 </ td>

</ tr>

</ tbody>

</ table>

Hover Table

En ajoutant la classe .table-hover , un fond gris clair sera ajouté aux lignes pendant que le curseur les survolera, comme illustré dans l'exemple suivant:

<table class = "table table-hover">

<caption> Disposition de la table de survol </ caption>

<thead>

<tr>

<th> Nom </ th>

<th> Ville </ th>

<th> Code PIN </ th>

</ tr>

</ thead>

<tbody>

<tr>

<td> Tanmay </ td>

<td> Bangalore </ td>

<td> 560001 </ td>

</ tr>

<tr>

<td> Sachin </ td>

<td> Mumbai </ td>

<td> 400003 </ td>

</ tr>

<tr>

<td> Uma </ td>

<td> Pune </ td>

<td> 411027 </ td>

</ tr>

</ tbody>

</ table>

Tableau condensé

En ajoutant la classe .table-condensed , le remplissage des lignes est réduit de moitié pour condenser la table. comme on le voit dans l'exemple suivant. Ceci est utile si vous voulez des informations plus denses.

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

<caption> Disposition de la table condensée </ caption>

<thead>

<tr>

<th> Nom </ th>

<th> Ville </ th>

<th> Code PIN </ th>

</ tr>

</ thead>

<tbody>

<tr>

<td> Tanmay </ td>

<td> Bangalore </ td>

<td> 560001 </ td>

</ tr>

<tr>

<td> Sachin </ td>

<td> Mumbai </ td>

<td> 400003 </ td>

</ tr>

<tr>

<td> Uma </ td>

<td> Pune </ td>

<td> 411027 </ td>

</ tr>

</ tbody>

</ table>



55