Défaut

Barre de boutons

Groupe Boutons + Dropdown

Taille d'un groupe de boutons

Groupe de boutons vertical

Groupe de boutons justifié (fonctionne uniquement sur des <a>)

Source

Couleur et taille de bouton dropdowns

Source

Couleur et taille de split bouton dropdowns

Source

Ouverture du menu vers le haut

Source

Préfixe et/ou suffixe d'un champ

@
@ .00
.00



Source

Champ texte et bouton avec bord arrondi sp

Source

Ajouter un icone dans un champ sp

Source

Ajouter un icone dans un champ à droite sp

Source

Taille de champ avec préfixe et/ou suffixe

.00
.00

.00
.00

.00
.00

Source

Classe pagination-sm

par défaut

Classe pagination-lg

pagination-success sp

pagination-info sp

pagination-warning sp

pagination-danger sp

pagination-inverse sp

pagination-purple sp

pagination-pink sp

Classe pagination-sm pagination-alt sp

par défaut pagination-alt sp

Classe pagination-lg pagination-alt sp

pagination-success pagination-alt sp

pagination-info pagination-alt sp

pagination-warning pagination-alt sp

pagination-danger pagination-alt sp

pagination-inverse pagination-alt sp

pagination-purple pagination-alt sp

pagination-pink pagination-alt sp

Pager par défaut

Pager alternatif

Label

Default Primary Success Info Warning Danger Inverse Purple Pink

Badges

1 2 3 4 5 6 7 8 9

Lien avec la classe badge

1 2 3 4 5 6 7 8 9

Label dans des balises h1-h6

Titre h1 New

Titre h2 New

Titre h3 New

Titre h4 New

Titre h5 New
Titre h6 New

Jumbotron

Récapitulatif Bootstrap v3.0.0

Sur cette page vous trouverais tous ce qui est possible de faire avec bootstrap v3.0.0. Le systéme de grille, la typographie, les boutons, les formulaire, les tableaux, les images, la barre de navigation, les alerts ...

Exemple de bouton

Source

Page header

Source

Avec bordure de couleur au passage de la souris sp

Source

Avec bordure de couleur + ombre au passage de la souris sp

Source

Version avec texte

Image 1

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 2

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 3

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Image 4

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

Source

Le bouton × s'ajoute automatiquement dès que l'on ajoute la classe alert-dismissable à une alert.

Alert par défaut

Succès ! message de reussite.
Info ! message d'information.
Attention ! message d'alert.
Erreur ! message d'erreur.
Inverse ! message gris. sp
Purple ! message violet. sp
Pink ! message rose. sp

Alert avec bouton fermer

Succès ! message de reussite.
Info ! message d'information.
Attention ! message d'alert.
Erreur ! message d'erreur.
Inverse ! message gris. sp
Purple ! message violet. sp
Pink ! message rose. sp

Alert avec lien

Succès ! message de reussite lien.
Info ! message d'information lien.
Attention ! message d'alert lien.
Erreur ! message d'erreur lien.
Inverse ! message gris lien. sp
Purple ! message violet lien. sp
Pink ! message rose lien. sp

Alert block

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Source

Block message

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Source

Défaut

90% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
50% Complete
70% Complete
40% Complete

Striped

90% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
50% Complete
70% Complete
40% Complete

Animated

90% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
50% Complete
70% Complete
40% Complete

Dépard à droite sp

90% Complete (success)
40% Complete (success)
20% Complete
60% Complete
80% Complete
50% Complete
70% Complete
40% Complete

Avec label

0%
2%
60%

Source

Cumuler

5% Complete (défaut)
10% Complete (success)
15% Complete (info)
20% Complete (warning)
25% Complete (danger)
8% Complete (inverse)
12% Complete (inverse)
5% Complete (pink)

Source

Par défaut

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
64x64

Media list

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

  • 64x64

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    64x64

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

Positionnement de l'image v 3.3.2

64x64

Image en haut à gauche

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Image au center à gauche

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Image en bas à gauche

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Image en haut à droite

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Image au center à droite

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Image en bas à droite

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Par défaut

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Avec badges

  • 14 Cras justo odio
  • 20 Dapibus ac facilisis in
  • 10 Morbi leo risus
  • 25 Porta ac consectetur ac
  • 80 Vestibulum at eros

Avec lignes colorées

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Cliquable

Juste le corps

panel-default
panel-primary
panel-success
panel-info
panel-warning
panel-danger
panel-inverse
panel-purple
panel-pink

Entête + corps

Panel entête
panel-default
Panel entête
panel-primary
Panel entête
panel-success
Panel entête
panel-info
Panel entête
panel-warning
Panel entête
panel-danger
Panel entête
panel-inverse
Panel entête
panel-purple
Panel entête
panel-pink

Entête + titre + corps

Panel titre

panel-default

Panel titre

panel-primary

Panel titre

panel-success

Panel titre

panel-info

Panel titre

panel-warning

Panel titre

panel-danger

Panel titre

panel-inverse

Panel titre

panel-purple

Panel titre

panel-pink

Entête + titre + corps + pied

Panel titre

panel-default

Panel titre

panel-primary

Panel titre

panel-success

Panel titre

panel-info

Panel titre

panel-warning

Panel titre

panel-danger

Panel titre

panel-inverse

Panel titre

panel-purple

Panel titre

panel-pink

Panel + corps + tableau

Panel titre

Some default panel content here. Nulla vitae elit libero, a pharetra augue.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Panel sans corps + tableau

Panel titre

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry the Bird @twitter

Panel + List group

Panel titre

  • 14 Cras justo odio
  • 20 Dapibus ac facilisis in
  • 10 Morbi leo risus
  • 25 Porta ac consectetur ac
  • 80 Vestibulum at eros

Panel + List group cliquable

Vidéo responsive

Format 16:9


Format 4:3

Source

Taille de well

well well-sm.
well par défaut.
well well-lg.

Source