Typographie de base

Rubriques

Toutes les rubriques HTML,

à travers
, sont disponibles. Les classes .h1 à .h6 sont également disponibles, lorsque vous souhaitez faire correspondre le style de police d'un titre mais que vous souhaitez toujours que votre texte s'affiche en ligne.

h1. En-tête bootstrap

 Semi-gras 36px

h2. En-tête bootstrap

 Semi-gras 30px

h3. En-tête bootstrap

 Semi-gras 24px

h4. En-tête bootstrap

 Semi-gras 18px
h5. En-tête bootstrap
 Semi-gras 14px
h6. En-tête bootstrap
 Semi-gras 12px 
h1. En-tête bootstrap

 h2. En-tête bootstrap

 h3. En-tête bootstrap

 h4. En-tête bootstrap

 h5. En-tête bootstrap

 h6. En-tête bootstrap

Créez un texte secondaire plus léger dans n'importe quel titre avec un générique tag ou la classe .small .

h1. Titre bootstrap Texte secondaire

h2. Titre bootstrap Texte secondaire

h3. Titre bootstrap Texte secondaire

h4. Titre bootstrap Texte secondaire

h5. Titre bootstrap Texte secondaire
h6. Titre bootstrap Texte secondaire 
h1. En-tête bootstrap Texte secondaire

 h2. En-tête bootstrap Texte secondaire

 h3. En-tête bootstrap Texte secondaire

 h4. En-tête bootstrap Texte secondaire

 h5. En-tête bootstrap Texte secondaire

 h6. En-tête bootstrap Texte secondaire

Corps du texte

font-size globale par défaut de Bootstrap est de 14px , avec une line-height de 1,428 . Ceci est appliqué au et tous les paragraphes. En outre,

(paragraphes) reçoivent une marge inférieure de la moitié de leur hauteur de ligne calculée (10px par défaut).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mécène sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida et eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

 ...

Copie du corps principal

Faites ressortir un paragraphe en ajoutant .lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 class= "leader" > ...

Construit avec moins

L'échelle typographique est basée sur deux variables LESS dans variables.less : @font-size-base et @line-height-base . 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 simples pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore. Personnalisez-les et Bootstrap s'adapte.

Accent

Utilisez les balises d'emphase par défaut de HTML avec des styles légers.

Petit texte

Pour désaccentuer une ligne ou des blocs de texte, utilisez la tag pour définir le texte à 85% de la taille du parent. Les éléments d'en-tête reçoivent leur propre font-size pour les éléments imbriqués éléments.

Vous pouvez également utiliser un élément en ligne avec .small à la place de n'importe quel

Cette ligne de texte doit être traitée comme des petits caractères.

This line of text is meant to be treated as fine print.

Audacieux

Pour mettre en valeur un extrait de texte avec un poids de police plus lourd.

L'extrait de texte suivant est affiché en gras .

 rendered as bold text

Italique

Pour mettre en évidence un extrait de texte en italique.

L'extrait de texte suivant est rendu sous forme de texte en italique .

 rendered as italicized text

Éléments alternatifs

N'hésitez pas à utiliser et en HTML5. est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire tout en est principalement pour la voix, les termes techniques, etc.

Cours d'alignement

Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte.

Texte aligné à gauche.

Texte aligné au centre.

Texte aligné à droite.

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


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


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

Cours d'accentuation

Transmettez le sens à travers la couleur avec une poignée de classes utilitaires d'accentuation. Ceux-ci peuvent également être appliqués aux liens et s'assombrissent au survol, tout comme nos styles de lien par défaut.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Mécène sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

 class= "text-muted" > ...


 class= "texte-primaire" > ...


 class= "texte-succès" > ...


 class= "info-texte" > ...


 class= "texte-avertissement" > ...

 
class= "texte-danger" > ...

Faire face à la spécificité

Parfois, les classes d'emphase ne peuvent pas être appliquées en raison de la spécificité d'un autre sélecteur. Dans la plupart des cas, une solution de contournement suffisante consiste à envelopper votre texte dans un avec la classe.

Abréviations

Implémentation stylisée de HTML élément pour les abréviations et les acronymes pour afficher la version développée au survol. Les abréviations avec un attribut title ont une bordure inférieure en pointillé clair et un curseur d'aide au survol, fournissant un contexte supplémentaire au survol.

Abréviation de base

Pour un texte développé lors d'un long survol d'une abréviation, incluez l'attribut title avec le élément.

Une abréviation du mot attribut est attr .

title= "attribute" > attr

Initialisme

Ajoutez .initialism à une abréviation pour une taille de police légèrement plus petite.

HTML est la meilleure chose depuis le pain en tranches.

 title= "HyperText Markup Language" class= "initialism" > HTML

Adresses

Présentez les coordonnées de l'ancêtre le plus proche ou de l'ensemble de l'œuvre. Conserver la mise en forme en terminant toutes les lignes par
 .

Twitter, Inc.
795, avenue Folsom, bureau 600
San Francisco, Californie 94107
T. : (123) 456-7890
Nom et prénom
premier.nom@exemple.com 

 Twitter, Inc.

 795, avenue Folsom, bureau 600

 San Francisco, Californie 94107

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




 Nom et prénom

 href= "mailto:#" > first.last@example.com

Citations en bloc

Pour citer des blocs de contenu provenant d'une autre source dans votre document.

Citation par défaut

Envelopper autour de n'importe quel code HTML comme citation. Pour les citations directes, nous recommandons un

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 



 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Options de citation en bloc

Changements de style et de contenu pour des variations simples sur une norme

.

Nommer une source

Ajouter tag ou .small class pour identifier la source. Enveloppez le nom de l'œuvre source dans .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source 


 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
 Quelqu'un de célèbre dans title= "Titre source" > Titre source

Affichages alternatifs

Utilisez .pull-right pour un blockquote flottant et aligné à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source 
 class= "tirer vers la droite" >
 ...

Listes

Non ordonné

Une liste d'éléments dans lesquels l'ordre n'a pas d'importance explicite.

  • 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é
    


     Une liste d'éléments dans lesquels l'ordre importe explicitement.
    


    


      


    1.  Lorem ipsum dolor sit amet
      2. 


    2.  Consectetur adipiscing élite
      3. 


    3.  Integer molestie lorem at massa
      4. 


    4.  Facilisis in pretium nisl aliquet
      5. 


    5.  Nulla volutpat aliquam velit
      6. 


    6.  Faucibus porta lacus fringilla vel
      7. 


    7.  Aenean sit amet erat nunc
      8. 


    8.  Eget porttitor lorem
      9. 



    



    


     
      

      

    1. ...



      2. 

      



      Sans style
      


       Supprimez le list-style par défaut et la marge de gauche sur les éléments de liste (enfants immédiats uniquement). Cela s'applique uniquement aux éléments de liste enfants immédiats , ce qui signifie que vous devrez également ajouter la classe pour toutes les listes imbriquées.
      


      


        


      •  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
        • 



      



      


      

       
      

        
class= "liste sans style" >

      •  ... 



        • 

      



      



       En ligne
      


       Placez tous les éléments de la liste sur une seule ligne avec display: inline-block; et un rembourrage léger.
      


      


        


      •  Lorem ipsum
        • 


      •  Phasellus iaculis
        • 


      •  Nulla volutpat
        • 



      



      


      

      

         class= "liste en ligne" >

      •  ... 



        • 

      



      



       Description
      


       Une liste de termes avec leurs descriptions associées.
      


      


      


       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.
      



      



      


      

      

      


       ...

       ...



      



      Description horizontale
      


       Faites des termes et des descriptions dans
       alignez-vous côte à côte. Commence empilé comme par défaut
       s, mais lorsque la barre de navigation se développe, faites de même.
      


      


      


       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.
      


       Felis euismod semper eget lacinia
      


       Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      



      



      


      

       
      

      
class= "dl-horizontal" >

       ...

       ... 



      



      



      


       Troncature automatique
      


       Les listes de description horizontales tronqueront les termes trop longs pour tenir dans la colonne de gauche avec text-overflow . Dans les fenêtres plus étroites, elles adopteront la disposition empilée par défaut.
      



      




      


       les tables
      



      



       Exemple de base
      


       Pour un style de base (remplissage léger et séparateurs horizontaux uniquement), ajoutez la classe de base .table à n'importe quel fichier 
      . It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles. 
      

      
# First Name Last Name Username

       
      
1 Mark Otto

      

      
 

      
@mdo




 2

 Jacob

 Thornton

 @graisse






 3

 Larry

 l'oiseau

 @Twitter