Fondazione Pulsante Gruppo

pulsante Gruppo

Fondazione può creare una serie di pulsanti nella stessa riga.

È possibile utilizzare il <ul> elemento e aggiungere .button-group classe per creare un gruppo di pulsanti:

Esempi

<Ul class = "button-gruppo ">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

Prova »

gruppo di pulsanti verticale

gruppo di pulsanti verticale uso .stack classe per creare. Notare che il pulsante copre l'intera larghezza dell'elemento genitore:

Esempi

<Ul class = "button-gruppo stack">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

Prova »

.stack-for-small classe per le piccole dimensioni dello schermo, ci sono dei pulsanti disposti orizzontalmente diventa allineamento verticale:

Esempi

<Ul class = "button-gruppo Stack-per-small">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

Prova »

gruppo di pulsanti arrotondato

uso gruppo di pulsanti .radius e .round pulsanti di classe per aggiungere gli angoli arrotondati:

Esempi

<Ul class = "button-gruppo raggio">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

<Ul class = "button-gruppo rotonda">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

Prova »

gruppo di pulsanti di estensione uniforme

.even-num classe per la larghezza del pulsante gruppo pulsante e una distribuzione uniforme attraverso la larghezza dell'elemento principale del 100%.

num è il numero di pulsanti nel gruppo di pulsanti, 1-8:

Esempi

<Ul class = "button-gruppo anche-3">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
</ Ul>

<Ul class = "button-gruppo anche-5">
<Li> <tipo di pulsante = " =" button "pulsante" class> Mela </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Samsung </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" classe> Sony </ button> </ li>
<LI> <button type = " class =" button "tasto"> HTC </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> Huawei </ button> </ li>
</ Ul>

<Ul class = "button-gruppo anche-8">
<Li> <tipo di pulsante = " =" button "pulsante" class> A </ button> </ li>
<Li> <tipo di pulsante = " =" button "bottone" di classe> B </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> C </ button> </ li>
<Li> <tipo di pulsante = " pulsante" class = "tasto"> D </ button> </ li>
<LI> <button type = " class =" button "tasto"> E </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> F </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> G </ button> </ li>
<Li> <tipo di pulsante = " =" button "pulsante" class> H </ button> </ li>
</ Ul>

Prova »

pulsante a discesa

A discesa pulsante del menu permette all'utente di selezionare il set un buon rapporto:

Esempi

<! - Attivare il menu a discesa ->
<A Href = "#" dati -dropdown = "id01" class = "button dropdown"> discesa pulsante </ a>

<! - L'attuale discesa ->
<Ul id = dati "ID01" -dropdown-content class = "F-discesa">
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

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

Prova »

Esempi di analitica

.dropdown classe per creare un pulsante del menu a discesa.

Usare con data-dropdown=" id " pulsante attributo o un link per aprire il menu a discesa.

valore id deve corrispondere il contenuto (ID01) menu a discesa.

Nel <ul> Aggiungi nella .f-dropdown classi e data-dropdown-content attributo per creare menu a discesa contenuti.

Ultima inizializzazione Fondazione JS.

pulsante Dividi

Possiamo anche creare menu a discesa di un pulsante di divisione. Solo è necessario aggiungere il pulsante .split di classe e utilizzare l'elemento arco di generare un tasto freccia di direzione:

Esempi

<Pulsante class = "tasto split" > Pulsante Split
<Span data-discesa = "ID01 "> </ span>
</ Button>

<Ul id = dati "ID01" -dropdown-content class = "F-discesa">
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

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

Prova »