Creación de botones con clases de arranque

Como sabemos, Bootstrap es un framework front-end que ayuda a los desarrolladores web a desarrollar páginas con tecnología móvil (responsivo) sin tener que escribir una línea de CSS. Además, Bootstrap posee una diversidad de componentes (plugins) en JavaScript (jQuery) que ayudan al diseñador a implementar tootlip, menú desplegable, modal, carousel, slideshow, entre otros, sin la menor dificultad; sólo añadiendo algunas configuraciones en el código, sin la necesidad de crear scripts y más scripts.

Entonces hablaremos sobre cómo crear y configurar botones usando el bootstrap.

Los botones se crean mediante la etiqueta <button> </ button>, pero el bootstrap siempre da un aspecto más armonioso para el front-end. De esta forma sólo incluye clases de esa biblioteca, transformamos un botón común y sin estilo, en un botón con estilo. Para crear un botón, debemos usar el código:

<button type="button">Nombre del Botón</button>

Para añadir las clases de bootstrap, necesitamos incluir los enlaces de la biblioteca de arranque. Son estos tres:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Las clases de arranque que definen el patrón de color son: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

También podemos definir el tamaño de los botones añadiendo una clase al botón, usando btn-lg, btn-md, btn-sm, btn-xs:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

De esta forma, tendremos botones más presentables utilizando bootstrap. Para usar dentro del scriptcase, puede crear un campo de etiqueta recibiendo el código del botón o sustituyendo la clase del botón utilizando Jquery.

Para más información, visite: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Botones de Scriptcase

Recientemente separamos los temas de las aplicaciones generadas por el scriptcase de las configuraciones de CSS de los botones. Hoy son dos cosas totalmente independientes una de la otra. Para ayudar a nuestros clientes a crear temas avanzados para sus botones, creamos una herramienta de creación de temas que se puede encontrar en el menú Diseño -> “CSS de los botones”.

La herramienta le permite subir imágenes, iconos y configurar los elementos principales de CSS posibles en un botón.

Con la plantilla creada, debemos habilitarlo dentro de la aplicación deseada en el menú Layout de la aplicación -> Vista -> Botón.

De esta forma usted tiene la posibilidad de crear sus temas para botones dentro de Scriptcase incluso sin tener un conocimiento avanzado en el asunto.¿Desea saber más sobre la mejor herramienta de desarrollo web del mercado? Haga clic aquí y conozca el Scriptcase.