Algunos visitantes me han preguntado si utilizo algún recurso para realizar el Frontend de mis aplicaciones web, siempre he utilizado Bootstrap ya que me parece bastante sencillo de implementar, en las nuevas versiones de Visual Studio viene el Bootstrap como un
NuGet o puedes crear un sitio web con la plantilla de Bootstrap, para el ejemplo crearemos un sitio web vació.
En el diseño de nuestra Form inicial creamos la siguiente estructura.
Si ejecutamos veremos un diseño sencillo.
Ahora ingresaremos al código fuente de nuestra Form y teclearemos los siguientes link para hacer referencia al
Bootstrap y
jQuery.
Bootstrap trabaja con
jQuery por eso es importante agregarlo.
Utilizaremos la versión 4.1 de Bootstrap y la versión 3.2.1 de jQuery.
Puedes descargar los archivos de Bootstrap y jQuery para cópialos directamente a tu sitio web o solo utilizar los link de referencia.
En el diseño de nuestra Form seleccionamos todos lo campos
TextBox y en el evento
CssClass tecleamos
form-control.
En el botón seleccionamos el evento
CssClass y tecleamos
btn btn-primary, los más utilizados son:
- btn btn-primary - (color azul)
- btn btn-info - (color cian)
- btn btn-danger - (color rojo)
- btn btn-warning - (color amarillo)
Al utilizar el prefijo btn en los botones se visualizara el efecto de mayor proporción en el botón.
Después de teclear las clases veremos que el diseño ha cambiado y todos los campos han quedado en líneas independientes.
Si ejecutamos la Form veremos que diseño actual con las propiedades del Bootstrap.
Para crear un mejor diseño debemos agregar unas tablas y acomodampos los campos.
Si ejecutamos la Form veremos un mejor diseño.
También podemos crear un mensaje de alerta una vez que agreguemos el código de validación de los campos TextBox.
Podemos crear tablas con la información necesaria y en el evento
CssClass de la tabla agregar las siguientes clases de Bootstrap:
- alert-danger - (color rojo)
- alert-warning - (color amarillo)
- alert-success - (color verde)
- alert-info - (color cian)
Si ejecutamos el sitio web veremos el resultado final.
0 Comentarios