Exemples de démarrage rapide

Besoin de modèles rapides ? Découvrez ces exemples de base que nous avons rassemblés :

Grille par défaut

Le système de grille par défaut fourni dans le cadre de Bootstrap est une grille de 16 colonnes de 940 pixels de large. C'est une saveur du système de grille populaire 960, mais sans la marge / rembourrage supplémentaire sur les côtés gauche et droit.

Exemple de balisage de grille

Comme illustré ici, une mise en page de base peut être créée avec deux "colonnes", chacune couvrant un certain nombre des 16 colonnes fondamentales que nous avons définies dans le cadre de notre système de grille. Voir les exemples ci-dessous pour plus de variantes.

< classe div = "ligne" > 
  < classe div = "span6" > 
    ...
  </div>
  < classe div = "span10" > 
    ...
  </div>
</div>

Colonnes imbriquées

Si nécessaire, imbriquez votre contenu en créant un .rowdans une colonne existante.

Exemple de colonnes imbriquées

< classe div = "ligne" > 
  < classe div = "span12" > 
    Niveau 1 de la colonne
    < classe div = "ligne" > 
      < classe div = "span6" > 
        Niveau 2
      </div>
      < classe div = "span6" > 
        Niveau 2
      </div>
    </div>
  </div>
</div>

Roulez votre propre grille

Bootstrap contient une poignée de variables permettant de personnaliser le système de grille 940px par défaut. Avec un peu de personnalisation, vous pouvez modifier la taille des colonnes, leurs gouttières et le conteneur dans lequel elles résident.

A l'intérieur de la grille

Les variables nécessaires pour modifier le système de grille résident actuellement toutes dans variables.less.

Maintenant à personnaliser

Modifier la grille signifie changer les trois @grid-*variables et recompiler les fichiers Less.

Bootstrap est équipé pour gérer un système de grille avec jusqu'à 24 colonnes ; la valeur par défaut est juste 16. Voici à quoi ressembleraient vos variables de grille personnalisées pour une grille de 24 colonnes.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterLargeur : 20px ;   

Une fois recompilé, vous serez prêt !

Disposition fixe

La mise en page centrée par défaut et simple de 940 pixels de large pour à peu près n'importe quel site Web ou page fourni par un seul fichier <div.container>.

<corps>
  < classe div = "conteneur" > 
    ...
  </div>
</body>

Aménagement fluide

Une structure de page fluide alternative et flexible avec des largeurs min et max et une barre latérale gauche. Idéal pour les applications et les documents.

<corps>
  <div class = "conteneur-fluide" > 
    < classe div = "barre latérale" > 
      ...
    </div>
    < classe div = "contenu" > 
      ...
    </div>
  </div>
</body>

Titres et copie

Une hiérarchie typographique standard pour structurer vos pages Web.

Toute la grille typographique est basée sur deux variables Less de notre fichier variables.less : @basefontet @baseline. Le premier est la taille de police de base utilisée partout et le second est la hauteur de ligne de base.

Nous utilisons ces variables et quelques calculs pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore.

h1. Rubrique 1

h2. Rubrique 2

h3. Rubrique 3

h4. Rubrique 4

h5. Rubrique 5

h6. Rubrique 6

Exemple de paragraphe

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Exemple de titre Contient un sous-titre…

Divers éléments

Emphase, adresses et abréviations

<strong> <em> <address> <abbr>

Quand utiliser

Les balises d'emphase ( <strong>et <em>) doivent être utilisées pour indiquer l'importance supplémentaire ou l'emphase d'un mot ou d'une phrase par rapport à sa copie environnante. Utilisez <strong>pour l'importance et <em>pour l'accent mis sur le stress .

Mise en évidence dans un paragraphe

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mécène faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Remarque : Vous pouvez toujours utiliser les balises <b>et <i>dans HTML5 et elles ne doivent pas nécessairement être en gras et en italique, respectivement (bien que s'il existe un élément plus sémantique, utilisez-le). <b>est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire, tandis qu'il <i>est principalement destiné à la voix, aux termes techniques, etc.

Adresses

L' <address>élément est utilisé pour les informations de contact de son ancêtre le plus proche ou de l'ensemble de l'œuvre. Voici deux exemples d'utilisation possible :

Remarque : Chaque ligne d'un <address>doit se terminer par un saut de ligne ( <br />) ou être enveloppée dans une balise de niveau bloc (par exemple, <p>) pour structurer correctement le contenu.

Abréviations

Pour les abréviations et les acronymes, utilisez la <abbr>balise ( <acronym>est obsolète en HTML5 ). Mettez la forme abrégée dans la balise et définissez un titre pour le nom complet.

Citations en bloc

<blockquote> <p> <small>

Comment citer

Pour inclure un blockquote, wrap <blockquote>around <p>et <small>tags. Utilisez l' <small>élément pour citer votre source et vous obtiendrez un tiret em —avant.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr Julius Hibbert </small>
</blockquote>

Non ordonné<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing élite
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Sans style<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing élite
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Commandé<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing élite
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

La descriptiondl

Listes de descriptions

Une liste de description est parfaite pour définir les termes.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida et eget metus.

Porte Malesuada

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Personnalisez votre code avec style grâce à deux balises simples. Pour encore plus de génialité grâce à javascript, déposez dans la bibliothèque de code prettify de Google et vous êtes prêt.

Code de présentation

Le code, des blocs ou simplement des extraits en ligne, peut être affiché avec style simplement en l'enveloppant dans la bonne balise. Pour les blocs de code s'étendant sur plusieurs lignes, utilisez l' <pre>élément. Pour le code en ligne, utilisez l' <code>élément.

<div>
  <h1>Titre</h1>
  <p>Quelque chose ici...</p>
</div>

<div> <h1> Titre </h1> <p> Quelque chose juste ici... </p> </div>
  
  

Étiquettes en ligne

<span class="label">

Attirez l'attention sur une phrase dans votre corps de texte ou signalez-la.

Étiquetez n'importe quoi

Avez-vous déjà eu besoin d'un de ces nouveaux fantaisistes ! ou Indicateurs importants lors de l'écriture de code ? Eh bien, maintenant vous les avez. Voici ce qui est inclus par défaut :

Grille média

Affichez des vignettes de différentes tailles sur des pages avec une faible empreinte HTML et des styles minimaux.

Exemples de vignettes

Les miniatures dans .media-gridpeuvent être de n'importe quelle taille, mais elles fonctionnent mieux lorsqu'elles sont mappées directement sur le système de grille Bootstrap intégré. Les largeurs d'image telles que 90, 210 et 330 se combinent avec quelques pixels de remplissage pour égaler les tailles de colonne .span2, .span4et ..span6

Grand

Moyen

Petit

Les coder

Les grilles de médias sont faciles à utiliser et plutôt simples du côté du balisage. Leurs dimensions sont purement basées sur la taille des images incluses.

<ul class = "media-grid" > 
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Construire des tableaux

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Les tables sont parfaites pour beaucoup de choses. Les grands tableaux, cependant, ont besoin d'un peu d'amour pour le balisage pour être utiles, évolutifs et lisibles (au niveau du code). Voici quelques conseils pour vous aider.

Enveloppez toujours vos en-têtes de colonne dans une <thead>hiérarchie telle que <thead>> <tr>> <th>.

Semblable aux en-têtes de colonne, tout le contenu du corps de votre tableau doit être enveloppé dans un <tbody>afin que votre hiérarchie soit <tbody>> <tr>> <td>.

Exemple : Styles de tableau par défaut

Tous les tableaux seront automatiquement stylisés avec uniquement les bordures essentielles pour assurer la lisibilité et maintenir la structure. Pas besoin d'ajouter des classes ou des attributs supplémentaires.

<tableau>
  ...
</table>

Exemple : tableau condensé

Pour les tables qui nécessitent plus de données dans des espaces plus restreints, utilisez la saveur condensée qui réduit de moitié le rembourrage. Il peut également être utilisé en conjonction avec des bordures et des rayures zébrées, tout comme les styles de tableau par défaut.

Exemple : tableau bordé

Rendez vos tables un peu plus élégantes en arrondissant leurs coins et en ajoutant des bordures de tous les côtés.

<table class = "bordered-table" > 
  ...
</table>

Exemple : zébré

Obtenez un peu de fantaisie avec vos tables en ajoutant des rayures zébrées - ajoutez simplement la .zebra-stripedclasse.

Remarque : Zebra-striping est une amélioration progressive non disponible pour les navigateurs plus anciens comme IE8 et inférieurs.

<table class = "zébré" > 
  ...
</table>

Exemple : Zebra-striped avec TableSorter.js

En reprenant l'exemple précédent, nous améliorons l'utilité de nos tables en fournissant une fonctionnalité de tri via jQuery et le plugin Tablesorter . Cliquez sur l'en-tête de n'importe quelle colonne pour modifier le tri.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( fonction () { 
    $ ( "table#sortTableExemple" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zébré" > 
  ...
</table>

Styles par défaut

Tous les formulaires reçoivent des styles par défaut pour les présenter de manière lisible et évolutive. Des styles sont fournis pour les entrées de texte, les listes de sélection, les zones de texte, les boutons radio et les cases à cocher, et les boutons.

Formulaires empilés

Ajoutez .form-stackedau code HTML de votre formulaire et vous aurez des étiquettes au-dessus de leurs champs plutôt qu'à leur gauche. Cela fonctionne très bien si vos formulaires sont courts ou si vous avez deux colonnes d'entrées pour des formulaires plus lourds.

Tailles des champs de formulaire

Personnalisez n'importe quelle forme input, selectou textarealargeur en ajoutant seulement quelques classes à votre balisage.

Depuis la v1.3.0, nous avons ajouté les classes de dimensionnement basées sur la grille pour les éléments de formulaire. Veuillez utiliser ceux-ci sur les classes existantes .mini, .small, etc.

Boutons

Par convention, les boutons sont utilisés pour les actions tandis que les liens sont utilisés pour les objets. Par exemple, « Télécharger » pourrait être un bouton et « Activité récente » pourrait être un lien.

Tous les boutons ont par défaut un style gris clair, mais un certain nombre de classes fonctionnelles peuvent être appliquées pour différents styles de couleur. Ces classes comprennent une .primaryclasse bleue, une .infoclasse bleu clair, une classe verte .successet une classe rouge .danger.

Exemples de boutons

Les styles de bouton peuvent être appliqués à tout ce qui .btnest appliqué. En règle générale, vous souhaiterez les appliquer uniquement aux éléments <a>, <button>et select <input>. Voici à quoi ça ressemble :

Tailles alternatives

Envie de boutons plus grands ou plus petits ? Ayez-y!

État désactivé

Pour les boutons qui ne sont pas actifs ou qui sont désactivés par l'application pour une raison ou une autre, utilisez l'état désactivé. C'est .disabledpour les liens et :disabledpour les <button>éléments.

Liens

Boutons

Qu'est-ce que c'est

Notre barre supérieure est une barre fixe qui abrite le logo ou le nom d'un site Web, la navigation principale et le formulaire de recherche.

Personnalisable

Tous les éléments à l'intérieur, ainsi que l'ensemble de la barre supérieure, sont facultatifs. Vous pouvez choisir d'inclure un logo/nom, une navigation, une recherche et une navigation secondaire, ou toute combinaison de ceux-ci.

Listes déroulantes incluses

Dans le cadre de la navigation principale, nous avons inclus la possibilité pour vous d'ajouter des listes déroulantes à votre navigation. Consultez la navigation secondaire ci-dessus (alignée à droite) pour voir comment c'est fait. liLes balises de liste déroulante prennent également en charge l' .activeaffichage de la sélection de page actuelle.

Comprimés et pilules

Créez une navigation secondaire simple avec un fichier <ul>. Permutez entre les onglets ou les pilules en ajoutant la classe appropriée.

Idéal pour les sous-sections de contenu comme nos pages de paramètres de compte et les chronologies des utilisateurs pour basculer entre les pages de contenu similaire. Disponible dans les styles d'onglets ou de pilules.

Exemple d'onglets de base

Les onglets peuvent être utilisés comme navigation normale (chargement de pages externes dans le même onglet) ou comme zones de contenu tabulables pour échanger des volets de contenu. Nous avons un plugin d'onglets qui peut être utilisé pour intégrer ce dernier.

• Maison
• Profil
• messages
• Réglages
• Contact
• Menu déroulant
  • Lien secondaire
  • Quelque chose d'autre ici
  • Un autre lien

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Accueil </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messagerie </a></li> 
  <li><a href = "#" > Paramètres </a></li> 
  <li><a href = "#" > Contacter </a></li> 
</ul>

Exemple de pilules de base

• Maison
• Profil
• messages
• Réglages
• Contact

<ul class = "pilules" > 
  <li class = "active" ><a href = "#" > Accueil </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messagerie </a></li> 
  <li><a href = "#" > Paramètres </a></li> 
  <li><a href = "#" > Contacter </a></li> 
</ul>

Chapelure

La navigation par fil d'Ariane est utilisée pour montrer aux utilisateurs où ils se trouvent dans une application ou un site, mais pas pour la navigation principale.

• Maison

• Accueil /
• Page du milieu

• Accueil /
• Page du milieu /
• Un autre

• Accueil /
• Page du milieu /
• Un autre /
• Tu es là

<ul class = "fil d'Ariane" > 
  <li><a href = "#" > Accueil </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Page du milieu </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Un autre </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Vous êtes ici </li> 
</ul>

Pagination

Pagination ultra simpliste et minimaliste inspirée de Rdio. Le grand bloc est difficile à manquer, facilement évolutif et offre de grandes zones de clic.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Précédent </a></li>  
    <li classe = "actif" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "suivant" ><a href = "#" > Suivant → </a></li>  
  </ul>
</div>

Alertes de base

.alert-message

Messages d'une ligne pour mettre en évidence l'échec, l'échec possible ou le succès d'une action. Particulièrement utile pour les formulaires.

Obtenir le javascript »

Exemple de code

<div class = "alerte-message d'avertissement" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sacré guacamole ! </strong> Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien. </p>
</div>

Bloquer les messages

.alert-message.block-message

Pour les messages qui nécessitent un peu d'explication, nous avons des alertes de style paragraphe. Ceux-ci sont parfaits pour générer des messages d'erreur plus longs, avertir un utilisateur d'une action en attente ou simplement présenter des informations pour mettre davantage l'accent sur la page.

Obtenir le javascript »

Exemple de code

<div class = "alert-message block-message avertissement" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sacré guacamole ! C'est un avertissement ! </strong> Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Effectuez cette action </a> <a class = "btn small" href = "#" > Ou faites ceci </a>     
  </div>
</div>

Modaux

Les modaux (boîtes de dialogue ou lightboxes) sont parfaits pour les actions contextuelles dans les situations où il est important que le contexte d'arrière-plan soit conservé.

Obtenir le javascript »

Info-bulles

Les Twipsies sont super utiles pour aider un utilisateur confus et le diriger dans la bonne direction.

Obtenir le javascript »

popovers

Utilisez les popovers pour fournir des informations sous-textuelles à une page sans affecter la mise en page.

Obtenir le javascript »

Commencer

L'intégration de javascript à la bibliothèque Bootstrap est très simple. Ci-dessous, nous passons en revue les bases et vous fournissons des plugins géniaux pour vous aider à démarrer !

Afficher les documents javascript »

Ce qui est inclu

Donnez vie à certains des principaux composants de Bootstrap avec de nouveaux plugins personnalisés qui fonctionnent avec jQuery et Ender . Nous vous encourageons à les étendre et à les modifier pour répondre à vos besoins de développement spécifiques.

Est-ce que javascript est nécessaire ?

Non! Bootstrap est avant tout conçu pour être une bibliothèque CSS. Ce javascript fournit une couche interactive de base au-dessus des styles inclus.

Cependant, pour ceux qui ont besoin de javascript, nous avons fourni les plugins ci-dessus pour vous aider à comprendre comment intégrer Bootstrap à javascript et pour vous offrir immédiatement une option rapide et légère pour les fonctionnalités de base.

Pour plus d'informations et pour voir des démos en direct, veuillez vous référer à notre page de documentation sur les plugins .