Botones
Los botones son una herramienta muy útil cuando se trata de acciones más tradicionales. Para ello, Foundation incluye un montón de estilos de botones fáciles de usar que se pueden personalizar o anular.
Botones de Foundation tiene una serie de parámetros y estilos - usted puede ver algunos ejemplos a continuación. La salida de las clases de caja incluyen el tamaño, el tipo (color) y el estilo (cuadrado, ligeramente redondeado, y se redondea por completo).
<a href="#" class="[tiny, small, medium, large] button" > Button Text</a>
<a href="#" class="[radius, round] button" > Button Text</a>
<a href="#" class="[success, alert, secondary] button" > Button Text</a>
Clases Button también se puede aplicar a elementos button , así como a elementos input type="submit".
Button Groups
Cuando usted necesita un conjunto de acciones, grupos de botones le dará algunas opciones fáciles de usar.
Button Group - Radius
Un grupo de botones es simplemente una ul.button-group en el que cada
li contiene un botón. Puede adjuntar un estilo de botón, como radius o rounded, para todo el grupo, y Foundation aplica el estilo a los botones del primero a la último en el grupo.
<ul class="button-group [radius, rounded]" >
<li><a href="#" class="button radius" > Button 1</a></li>
<li><a href="#" class="button radius" > Button 2</a></li>
<li><a href="#" class="button radius" > Button 3</a></li>
</ul>
Even Button Groups
Si desea un grupo de botones para llenar una columna de cuadrícula con las acciones de tamaño uniforme, sólo tiene que añadir dos clases para el grupo: .even y bien .two-up, .three-up, .four-up, ó .five-up.
<ul class="button-group even three-up" >
<li><a href="#" class="button" > Button 1</a></li>
<li><a href="#" class="button" > Button 2</a></li>
<li><a href="#" class="button" > Button 3</a></li>
</ul>
Button Bars
Una barra de botones es un grupo de grupos de botones (inicio), ideal para situaciones donde usted quiere los grupos de acciones que están relacionados con un elemento similar o página. Sólo tienes que colocarte dos o más grupos de botones en un
div.button-bar y de la Fundación se encarga del resto.
<div class="button-bar" >
<ul class="button-group" >
<li><a href="#" class="button" > Button 1</a></li>
<li><a href="#" class="button" > Button 2</a></li>
<li><a href="#" class="button" > Button 3</a></li>
</ul>
<ul class="button-group" >
<li><a href="#" class="button" > Button 1</a></li>
<li><a href="#" class="button" > Button 2</a></li>
<li><a href="#" class="button" > Button 3</a></li>
</ul>
</div>
Botones dentro de los grupos o barras también se pueden configurar individualmente a un tipo particular (color) o el tamaño. Obviamente, si crea una barra de botones con diferentes botones de tamaño la presentación visual puede sufrir un poco, pero queríamos que éstos sean muy flexibles.
Dropdown Buttons
Foundation 3 incluye dos tipos de botones: Los botones desplegables que crean un menú desplegable al hacer clic en los botones que tienen un menú desplegable al hacer clic específicamente en la parte de flecha hacia abajo del botón (un botón de división). Son útiles cuando una acción tiene varios resultados posibles para elegir, o cuando hay elecciones secundarias que usted puede hacer en lugar de una acción primaria.
Dropdown Buttons
Botones desplegables utilizar las mismas clases que cualquier otro botón, pero una estructura diferente.
<div href="#" class="large button dropdown" >
Dropdown Button
<ul>
<li><a href="#" > Dropdown Item</a></li>
<li><a href="#" > Another Dropdown Item</a></li>
<li class="divider"></li>
<li><a href="#" > Last Item</a></li>
</ul>
</div>
Split Button
Botones divididos a su vez utilizar las clases similares, y una estructura diferente que los botones regulares o desplegables.
<div href="#" class="large alert button split dropdown">
<a href="#">Split Button</a>
<span></span>
<ul>
<li><a href="#">Dropdown Item</a></li>
<li><a href="#">Another Dropdown Item</a></li>
<li class="divider"></li>
<li><a href="#">Last Item</a></li>
</ul>
</div>
Tenga en cuenta que en un botón de división, el span es el affordance desplegable y el ancla principal es la acción del botón principal.
