El mejor tutorial de Fundación Grupo de botones Fundación Grupo de botones en 2024. En este tutorial podrás aprender
Grupo de botones,grupo de botones vertical,grupo de botones redondeados,grupo de botones de extensión uniforme,botón desplegable,botón de división,
Fundación Grupo de botones
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 » | Sugerencia: Más adelante en este tutorial vamos a aprender más sobre el menú desplegable es el conocimiento. |
---|