Button Group Foundation

Button Group

Fundação pode criar uma série de botões na mesma linha.

Você pode usar o <ul> elemento e adicionar .button-group classe para criar um grupo de botões:

Exemplos

<Class Ul = "button-grupo ">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

tente »

grupo de botões Vertical

grupo de botões de uso Vertical .stack classe para criar. Note-se que o botão se estende por toda a largura do elemento pai:

Exemplos

<Class Ul = "button-grupo pilha">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

tente »

.stack-for-small classe para o pequeno tamanho do ecrã, existem botões dispostos horizontalmente alinhamento vertical torna-se:

Exemplos

< "-Grupo de botões de Ul class = empilhar-for-small">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

tente »

grupo de botões arredondados

Botão uso de grupo .radius e .round botão de classe para adicionar cantos arredondados:

Exemplos

<Class Ul = "button-grupo raio">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

<Class Ul = "button-grupo rodada">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

tente »

grupo de botões de extensão uniforme

.even-num classe para a largura do botão grupo de botões e uma distribuição uniforme em toda a largura do elemento pai de 100%.

num é o número de botões no grupo de botão, 1-8:

Exemplos

<Ul class = "-grupo de botões de even-3">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "-grupo de botões de even-5">
<Li> <tipo botão = " botão" class = "button"> Apple </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Samsung </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Sony </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> HTC </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> Huawei </ button> </ li>
</ Ul>

<Ul class = "-grupo de botões de even-8">
<Li> <tipo botão = " botão" class = "button"> A </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> B </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> C </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> D </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> E </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> F </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> G </ button> </ li>
<Li> <tipo botão = " botão" class = "button"> H </ button> </ li>
</ Ul>

tente »

botão drop-down

botão de menu drop-down permite que o usuário selecione o bom valor definido:

Exemplos

<! - Acionar o suspenso ->
<A Href = "#" dados -dropdown = "id01" class = "button dropdown"> suspensa Botão </ a>

<! - O menu suspenso real ->
<Ul id = dados "ID01" -dropdown-content class = "f-suspenso">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
</ Ul>

<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>

tente »

Exemplos de analítico

.dropdown classe para criar um botão de menu drop-down.

Use com data-dropdown=" id " botão atributo ou link para abrir o menu drop-down.

id valor precisa corresponder o conteúdo (ID01) menu suspenso.

Na <ul> Adicionar na .f-dropdown classes e data-dropdown-content atributo para criar menu drop-down conteúdo.

Última Fundação inicialização JS.

botão de divisão

Podemos também criar menu drop-down do botão de divisão. Só é necessário adicionar o botão .split classe e usar o elemento span para gerar um botão de seta de direção:

Exemplos

<Button class = "split botão" > Botão de Split
<Span data-suspenso = "ID01 "> </ span>
</ Button>

<Ul id = dados "ID01" -dropdown-content class = "f-suspenso">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
</ Ul>

<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>

tente »