20% OFF OFF FOR NEW LICENSES AND RENEWALS →

Como sabemos, Bootstrap es un framework front-end que ayuda a los desarrolladores web a desarrollar páginas con tecnología móvil (responsive) 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 bootstrap.

Los botones se crean mediante la etiqueta <button> </ button>, pero 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 Boton</button>
botonessc4

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 bootstrap 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>

botonessc5

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:

botonessc6

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”.

botonessc

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

botonessc8

botonessc9

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

botonessc3

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 Scriptcase.

You might also like…

PROCESAMIENTO AJAX EN SCRIPTCASE

Ajax en los formularios de Scriptcase puede usarse para recargar un campo de tipo de select basado e...

IMPORTAR IMAGENES DE LA BASE DE DATOS Y UTILIZAR CLASES DE BOOSTRAP

Como muchas personas ya saben, Bootstrap es una biblioteca de front-end libre y de código abierto p...

TENDENCIAS DE DESARROLLO WEB PARA 2017

Usted verá en este post tendencias para 2017 en Diseño Web, en el medio digital y en el desarrollo...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.