Bouton Fondation
style de bouton
Fondation propose six styles de boutons. .button classe crée un bouton bleu avec rembourrage. Différentes couleurs pour la classe de bouton: .secondary , .success , .info , .warning ou .alert :
Exemples
<Type Bouton = "button" class = "button"> Par défaut </ button>
<Type de bouton = classe "bouton" = "bouton secondaire"> secondaire </ button>
<Bouton type = "button" class = "succès bouton"> Succès </ button>
<Bouton type = "button" class = "info bouton"> Info </ button>
<Bouton type = "button" class = "warning bouton"> Attention </ button>
<Bouton type = "button" class = "alert bouton"> Alert </ button>
<Type de bouton = classe "bouton" = "bouton secondaire"> secondaire </ button>
<Bouton type = "button" class = "succès bouton"> Succès </ button>
<Bouton type = "button" class = "info bouton"> Info </ button>
<Bouton type = "button" class = "warning bouton"> Attention </ button>
<Bouton type = "button" class = "alert bouton"> Alert </ button>
Essayez »
classe Button peut être utilisé dans <a> , <button> ou <input> élément:
Exemples
<A Href = "#" class = "button rôle info" = "button"> Lien Bouton </ a>
<Type = "button" classe Button = "info bouton"> Bouton </ button>
<Input type = "button" class = "button info" value = "Bouton d'entrée">
<Input type = "submit" class = valeur "bouton info" = "Soumettre Bouton">
<Type = "button" classe Button = "info bouton"> Bouton </ button>
<Input type = "button" class = "button info" value = "Bouton d'entrée">
<Input type = "submit" class = valeur "bouton info" = "Soumettre Bouton">
Essayez »
 | Pourquoi un tag href # serait? Lorsque nous ne voulons pas sauter et cliquer sur le lien pour obtenir la page "404", nous pouvons définir une balise href #. |
|---|
Bouton Taille
Nous pouvons utiliser .large , .small ou .tiny classe pour définir la taille du bouton:
Exemples
<Type de bouton = classe "bouton" = "grand bouton"> Grand </ button>
<Type Bouton = "button" class = "button"> Par défaut </ button>
<Type de bouton = classe "bouton" = "petit bouton"> Petit </ button>
<Type de bouton = classe "bouton" = "minuscule bouton"> minuscule </ button>
<Type Bouton = "button" class = "button"> Par défaut </ button>
<Type de bouton = classe "bouton" = "petit bouton"> Petit </ button>
<Type de bouton = classe "bouton" = "minuscule bouton"> minuscule </ button>
Essayez »
bouton arrondi
Vous pouvez utiliser .radius et .round classe pour définir le bouton rond:
Exemples
<Type = "button" classe Button = "button"> Bouton Default </ button>
<Bouton type = "button" class = "rayon de bouton"> Rayon Bouton </ button>
<Bouton type = "button" class = "round bouton"> Bouton rond </ button>
<Bouton type = "button" class = "rayon de bouton"> Rayon Bouton </ button>
<Bouton type = "button" class = "round bouton"> Bouton rond </ button>
Essayez »
extension Bouton
Vous pouvez utiliser .expand classe pour définir le bouton à 100% haut débit:
Exemples
<Type = "button" classe Button = "button"> Bouton Default </ button>
<Type de bouton = classe "bouton" = "bouton de développement"> Bouton expansée </ button>
<Type de bouton = classe "bouton" = "bouton de développement"> Bouton expansée </ button>
Essayez »
bouton Désactiver
Vous pouvez utiliser .disabled classe de cliquer sur le bouton Paramètres ne sont pas disponibles:
Exemples
<Type = "button" classe Button = "button"> Bouton Default </ button>
<Type de bouton = classe "bouton" = "button désactivé"> Bouton Désactivé </ button>
<Type de bouton = classe "bouton" = "button désactivé"> Bouton Désactivé </ button>
Essayez »