Groupe de boutons Fondation

Groupe de boutons

Fondation peut créer une série de boutons dans la même rangée.

Vous pouvez utiliser le <ul> élément et ajouter .button-group classe pour créer un groupe de boutons:

Exemples

<Class Ul = "button-groupe ">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

Essayez »

groupe de boutons Vertical

groupe de boutons vertical utilisation .stack classe pour créer. Notez que le bouton couvre toute la largeur de l'élément parent:

Exemples

<Class Ul = "button-groupe pile">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

Essayez »

.stack-for-small classe pour la petite taille de l'écran, il y a des boutons disposés horizontalement devient alignement vertical:

Exemples

<Class = Ul "bouton-groupe pile-for-small">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

Essayez »

groupe de boutons Arrondi

l' utilisation du groupe Button .radius et .round touche de classe pour ajouter des coins arrondis:

Exemples

<Class Ul = "button-groupe rayon">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

<Class Ul = "button-groupe round">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

Essayez »

l'extension uniforme groupe de boutons

.even-num classe pour la largeur du bouton de groupe de boutons et d' une répartition uniforme sur toute la largeur de l'élément parent de 100%.

num est le nombre de boutons dans le groupe de boutons, 1-8:

Exemples

<Class = Ul "bouton-groupe , même-3">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
</ Ul>

<Class = Ul "bouton-groupe , même-5">
<Li> <type de bouton = " classe" bouton "bouton" => Apple </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Samsung </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Sony </ button> </ li>
<Li> <type = "button bouton" class = "button"> HTC </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => Huawei </ button> </ li>
</ Ul>

<Class = Ul "bouton-groupe , même-8">
<Li> <type de bouton = " classe" bouton "bouton" => A </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => B </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => C </ button> </ li>
<Li> <type de bouton = " classe bouton" = "button"> D </ button> </ li>
<Li> <type = "button bouton" class = "button"> E </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => F </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => G </ button> </ li>
<Li> <type de bouton = " classe" bouton "bouton" => H </ button> </ li>
</ Ul>

Essayez »

bouton déroulant

Déroulant bouton de menu permet à l'utilisateur de choisir la bonne valeur définie:

Exemples

<! - Déclencher la liste déroulante ->
<A Href = "#" données -dropdown = "id01" class = "button dropdown"> Dropdown Bouton </ a>

<! - La liste déroulante réelle ->
<Ul id = données "ID01" -dropdown contenu class = "f-déroulant">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Essayez »

Des exemples d'analyses

.dropdown classe pour créer un bouton de menu déroulant.

Utiliser avec data-dropdown=" id " bouton ou un lien attribut pour ouvrir le menu déroulant.

identifiant doit correspondre au contenu (ID01) de menu déroulant.

Dans le <ul> Ajoutez dans .f-dropdown des classes et des data-dropdown-content attribut pour créer du contenu menu déroulant.

Dernière Fondation d'initialisation JS.

bouton de Split

Nous pouvons également créer le menu déroulant d'un bouton partagé. Seulement vous devez ajouter le bouton .split classe et utiliser l'élément span pour générer un bouton sens de la flèche:

Exemples

<Bouton class = "button split" > Bouton de Split
<Span données déroulante = "ID01 "> </ span>
</ Button>

<Ul id = données "ID01" -dropdown contenu class = "f-déroulant">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Essayez »