CREACION DE BOTONES CON CLASES DE BOOSTRAP | Scriptcase Blog - Development, Web Design, Sales and Digital Marketing

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.

Tambien te puede interesar

Alternativa a visual basic

Scriptcase es la mejor alternativa a Microsoft Visual Basic. Si vienes programando con VB ó VB ...

Alternativa a phprunner, phpmaker

En el mundo de desarrollo PHP, los desarrolladores tienen ventajas sobre otros desarrollado...

Alternativa ASP.Net

ASP.NET es un entorno para aplicaciones web desarrollado y comercializado por ...

Comentar este post

Reciba los nuevos post, novedades y ofertas!

Ingresa tu e-mail para recibir orientaciones y asistencia técnica durante el período de evaluación, además de comunicaciones como novedades y ofertas especiales de Scriptcase. Tu información será utilizada de acuerdo con nuestra política de privacidad. Puedes optar por no participar en cualquier momento