Fundación Grupo de botones

Grupo de botones

Fundación puede crear una serie de botones en la misma fila.

Puede utilizar el <ul> elemento y añadir .button-group clase para crear un grupo de botones:

Ejemplos

<Ul class = "botón-grupo ">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

Trate »

grupo de botones vertical

grupo de botones de uso vertical .stack clase para crear. Tenga en cuenta que el botón se extiende por toda la anchura del elemento padre:

Ejemplos

<Ul class = "botón-grupo de pila">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

Trate »

.stack-for-small clase para el pequeño tamaño de la pantalla, hay botones dispuestos horizontalmente se convierte en alineación vertical:

Ejemplos

<Ul class = "botón-grupo de la pila para la pequeña">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

Trate »

grupo de botones redondeados

un grupo del uso del botón .radius y .round botón de clase para agregar esquinas redondeadas:

Ejemplos

<Ul class = "botón-grupo de radio">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

<Ul class = "botón-grupo redonda">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

Trate »

grupo de botones de extensión uniforme

.even-num clase para la anchura del botón de grupo de botones y una distribución uniforme en toda la anchura del elemento de matriz de 100%.

num es el número de botones en el grupo de botones, a partir de 1-8:

Ejemplos

<Class = Ul "botón de grupo , incluso-3">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
</ Ul>

<Class = Ul "botón de grupo , incluso-5">
<Li> <tipo botón = " clase" botón "botón" => Apple </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => Samsung botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Sony botón </> </ li>
<Li> <botón type = " botón" class = "botón"> HTC botón </> </ li>
<Li> <tipo botón = " clase" botón "botón" => Huawei botón </> </ li>
</ Ul>

<Class = Ul "botón de grupo , incluso-8">
<Li> <tipo botón = " clase" botón "botón" => A </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => B </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => C </ button> </ li>
<Li> <botón type = " botón" class = "botón"> D </ button> </ li>
<Li> <botón type = " botón" class = "botón"> E </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => F </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => G </ button> </ li>
<Li> <tipo botón = " clase" botón "botón" => H </ button> </ li>
</ Ul>

Trate »

botón desplegable

botón de menú desplegable permite al usuario seleccionar el valor fijado:

Ejemplos

<! - Active el menú desplegable ->
<A Href = "#" datos -dropdown = "id01" class = "button dropdown"> desplegable del botón </ a>

<! - El menú desplegable real ->
<Ul id = "datos" ID01 -dropdown-contenido de clase = "f-desplegable">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>

Trate »

Ejemplos de analítica

.dropdown clase para crear un botón de menú desplegable.

El uso con data-dropdown=" id " botón o enlace de atributo para abrir el menú desplegable.

Identificación del valor debe coincidir con el contenido (ID01) menú desplegable.

En el <ul> Añadir en .f-dropdown clases y data-dropdown-content de atributos para crear el contenido del menú desplegable.

Fundación última inicialización JS.

botón de división

También podemos crear el menú desplegable del botón de división. Sólo es necesario agregar el botón .split clase y utilizar el elemento span para generar un botón de flecha de dirección:

Ejemplos

<Botón class = "botón de división" > botón de división
<Span datos desplegable = "ID01 "> </ span>
</ Button>

<Ul id = "datos" ID01 -dropdown-contenido de clase = "f-desplegable">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>

<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>

Trate »