Histoire

Aux premiers jours de Twitter, les ingénieurs utilisaient presque toutes les bibliothèques qu'ils connaissaient pour répondre aux exigences du front-end. Bootstrap a commencé comme une réponse aux défis qui se présentaient et le développement s'est rapidement accéléré lors de la première Hackweek de Twitter.

Avec l'aide et les commentaires de nombreux ingénieurs de Twitter, Bootstrap s'est considérablement développé pour englober non seulement des styles de base, mais aussi des modèles de conception frontaux plus élégants et durables.

En savoir plus sur dev.twitter.com ›

Prise en charge du navigateur

Bootstrap est testé et pris en charge dans les principaux navigateurs modernes tels que Chrome, Safari, Internet Explorer et Firefox.

• Dernier Safari
• Dernier Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opéra 11

Ce qui est inclu

Bootstrap est livré avec des modèles CSS compilés, non compilés et des exemples.

• Tous les fichiers originaux .less
• CSS entièrement compilé et minifié
• Documentation complète du guide de style
• Exemple de modèle de page (plus à venir bientôt)

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" > 
  <div class = "colonnes span6" > 
    ...
  </div>
  <div class = "colonnes span10" > 
    ...
  </div>
</div>

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 preboot.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 à quoi ça ressemble :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Téléphone
: (123) 456-7890

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

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.

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.

#	Prénom	Nom de famille	Langue
1	Quelques	Une	Anglais
2	Jo	Pack de six	Anglais
3	Stu	Bosse	Code

<tableau>
  ...
</table>

Exemple : zébré

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

#	Prénom	Nom de famille	Langue
1	Quelques	Une	Anglais
2	Jo	Pack de six	Anglais
3	Stu	Bosse	Code

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.

#	Prénom	Nom de famille	Langue
1	Ton	Une	Anglais
2	Jo	Pack de six	Anglais
3	Stu	Bosse	Code

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

Exemple de légende de formulaire

Entrée X-Large

Sélectionner

1 2 3 4 5

Sélectionner

1 2 3 4 5

Entrée non modifiable

Une certaine valeur ici

Entrée désactivée

Entrée X-Large

Petit extrait du texte d'aide

Exemple de légende de formulaire

Texte ajouté

@

Case à cocher ajoutée

Case à cocher annexée

Entrée de fichier

Exemple de légende de formulaire

Liste d'options

• La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial
• La deuxième option peut également être cochée et incluse dans les résultats du formulaire
• L'option trois peut - oui, vous l'avez deviné - également être cochée et incluse dans les résultats du formulaire
• L'option 4 ne peut pas être cochée car elle est désactivée.

Remarque : les étiquettes entourent toutes les options pour des zones de clic beaucoup plus grandes et une forme plus utilisable.

Plage de dates

à Toutes les heures sont indiquées en heure normale du Pacifique (GMT -08:00).

Zone de texte

Bloc de texte d'aide pour décrire le champ ci-dessus si nécessaire.

Liste d'options

• La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial
• La deuxième option peut également être cochée et incluse dans les résultats du formulaire

Sauvegarder les modifications  Annuler

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.

Exemple de légende de formulaire

Entrée X-Large

Sélectionner

1 2 3 4 5

Exemple de légende de formulaire

Entrée X-Large

Petit extrait du texte d'aide

Liste d'options

• La première option est ceci et cela - assurez-vous d'inclure pourquoi c'est génial
• La deuxième option peut également être cochée et incluse dans les résultats du formulaire

Remarque : les étiquettes entourent toutes les options pour des zones de clic beaucoup plus grandes et une forme plus utilisable.

Sauvegarder les modifications  Annuler

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. De plus, rouler vos propres styles est facile.

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.

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.

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

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

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

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

div.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.

Bloquer les messages

div.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.

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

Info-bulles

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

popovers

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

Bootstrap a été construit avec Preboot , un pack open source de mixins et de variables à utiliser conjointement avec Less , un préprocesseur CSS pour un développement Web plus rapide et plus facile.

Découvrez comment nous avons utilisé Preboot dans Bootstrap et comment vous pouvez l'utiliser si vous choisissez d'exécuter Less sur votre prochain projet.

Comment l'utiliser

Utilisez cette option pour tirer pleinement parti des variables Less de Bootstrap, des mixins et de l'imbrication dans CSS via javascript dans votre navigateur.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Vous ne ressentez pas la solution .js ? Essayez l'application Less Mac ou utilisez Node.js pour compiler lorsque vous déployez votre code.

Ce qui est inclu

Voici quelques-uns des points forts de ce qui est inclus dans Twitter Bootstrap dans le cadre de Bootstrap. Rendez-vous sur le site Web Bootstrap ou sur la page du projet Github pour télécharger et en savoir plus.

variables

Les variables dans Less sont parfaites pour maintenir et mettre à jour votre CSS sans maux de tête. Lorsque vous souhaitez modifier une valeur de couleur ou une valeur fréquemment utilisée, mettez-la à jour en un seul endroit et vous êtes prêt.

// Liens
@linkColor : #8b59c2;         
@linkColorHover :     assombrir ( @linkColor , 10 ); 
 
// Gris
@noir : #000;             
@grayDark :           éclaircit ( @black , 25 %) ; 
@gray :               éclaircit ( @black , 50 %) ; 
@grayLight :          éclaircit ( @black , 70 %) ; 
@grayLighter :        éclaircit ( @black , 90 %) ; 
@white : #fff;             
 
// Couleurs d'accentuation
@bleu : #08b5fb;              
@vert : #46a546;             
@red : #9d261d;               
@jaune : #ffc40d;            
@orange : #f89406;            
@rose : #c3325f;              
@violet : #7a43b6;            
 
// Grille de base
@basefont : 13px ;          
@baseline : 18px ;          

Commentant

Less fournit également un autre style de commentaire en plus de la /* ... */syntaxe normale de CSS.

// Ceci est un commentaire
/* Ceci est aussi un commentaire */

Mélange le wazoo

Les mixins sont essentiellement des inclusions ou des partiels pour CSS, vous permettant de combiner un bloc de code en un seul. Ils sont parfaits pour les propriétés préfixées par le fournisseur telles que box-shadow, les dégradés entre navigateurs, les piles de polices, etc. Vous trouverez ci-dessous un échantillon des mixins inclus avec Bootstrap.

Piles de polices

#Police de caractère {
  . raccourci ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
taille de     police : @size ; 
    font - weight : @weight ; 
hauteur de     ligne : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
famille     de polices : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
taille de     police : @size ; 
    font - weight : @weight ; 
hauteur de     ligne : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
famille     de polices : " Georgia" , Times New Roman , Times , sans - serif ;     
taille de     police : @size ; 
    font - weight : @weight ; 
hauteur de     ligne : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
famille     de polices : " Monaco" , Courier New , monospace ;   
taille de     police : @size ; 
    font - weight : @weight ; 
hauteur de     ligne : @lineHeight ; 
  }
}

Dégradés

#pente {
  . horizontale ( @startColor : #555, @endColor : #333) { 
    fond - couleur : @endColor ; 
    arrière -plan - répéter : répéter - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( left , @startColor , @endColor ); //FF 3.6+    
    background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); //Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( left , @startColor , @endColor ); // Opéra 11.10    
    background - image : linear - gradient ( left , @startColor , @endColor ); // La norme   
  }
  . verticale ( @startColor : #555, @endColor : #333) { 
    fond - couleur : @endColor ; 
    arrière -plan - répéter : répéter - x ;
    background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); //FF 3.6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); //Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Opéra 11.10   
    background - image : linear - gradient ( @startColor , @endColor ); // Le standard  
  }
  . directionnelle ( @startColor : #555, @endColor : #333, @deg : 45deg) { 
    ...
  }
  . vertical - trois - couleurs ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop : 50%, @endColor : #c3325f) { 
    ...
  }
}

Opérations et système de réseau

Soyez fantaisiste et effectuez des calculs pour générer des mixins flexibles et puissants comme celui ci-dessous.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterLargeur : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Système de grille
. conteneur {
  largeur : @siteWidth ; 
  marge : 0 auto ;  
  . clearfix ();
}
. colonnes ( @columnSpan : 1 ) {  
  largeur : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. décalage ( @columnOffset : 1 ) {  
  marge - gauche : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}