Formulario básico responsive en bootstrap usando ASP.NET

En este post vamos a elaborar un formulario básico en bootstrap usando la herramienta ASP.NET. Siempre había realizado un rol de desarrollador backend, no había tocado algo de diseño nunca, pero llego un día donde por cuestiones de trabajo toco aprender, la verdad al principio estaba algo desorientado, el diseño es todo un mundo, pero por algo se inicia y con la practica se logran hacer buenos diseños.

Vamos a empezar por algo básico, hacer una pantalla con unos cuantos controles, iniciamos:

1. como primer paso vamos a agregar todo lo que es bootstrap a nuestro proyecto en asp.net:

descargamos bootstrap desde la pagina oficial http://getbootstrap.com/.  una vez que entremos a la pagina nos aparece la siguiente pantalla:



Damos click en la opcion "download Bootstrap". Se nos despliega la siguiente pantalla:



Ahora damos click en el boton Download para descargar los elementos que vamos a utilizar.

Una vez descargado, se nos presenta un archivo .zip que contiene los elementos que vamos a utilizar, como lo son los archivos css, los fonts y los js.



Ahora si vamos a crear un proyecto web en visual Studio 2013.

Abrimos visual Studio y buscamos la opción nuevo proyecto.




En la columna izquierda seleccionamos la categoría web y en la columna central seleciconamos ASP.NET Web Application, seleccionamos un nombre y le damos click en ok:





Ahora copiamos y pegamos los archivos que descomprimimos del bootstrap y los colocamos en la siguiente ruta del proyecto que acabamos de crear:




Una vez que tenemos los archivos en el proyecto, nos vamos al visual studio, podremos apreciar que los archivos que acabamos de agregar desde la carpeta no se ven aun. para incluirlos en el proyecto seleccionamos el proyecto web y damos en la opcion "show all files".





Cuando habilitemos esa opcion nos apareceran las carpetas que acabamos de incluir con el siguiente aspecto en color blanco o transparente. Ahora seleccionamos ese carpeta, damos click derecho y damos click en la opcion incluir al proyecto o en inglish Include in project:









Ahora si estamos listo para trabajar en el formulario. Agregamos un formulario nuevo, seleccionamos la web aplication , damos click derecho , agregar new item, en la ventana que se nos abre seleccionamos webform, le asignamos un nombre y damos click en el boton add.





Agregamos la referencia del bootstrap al formulario, solo seleccionamos el archivo y los arrastramos al formulario y el visual studio 2013 automáticamente crear la referencia:







Como primer paso, le vamos a asignar la clase container a la etiqueta form, la clase container permite centrar los elementos que vamos a colocar dento de las etiquetas form, si no ponemos esa clase, los controles se saldrian del rango de la pantalla y se cotarian.





Aplicaremos un estilo de formulario horizontal, asi que vamos a agregar un div con la clase "form-horizontal", cabe destacar que este tipo de formulario es el mas versatil, ya que nos ofrece infinidad de combinaciones. Posteriormente agregamos otro div con class "row", esta clase nos ayudará a que los controles se acomoden de una mejor manera a la hora de visualizar la pagina en pantallas mas pequeñas.




Vamos a proceder a agregar el div donde se agruparan los controles.


   <div class="form-group">


  </div>


Esta clase nos permite agrupar controles como textbox, input o label.
Una vez que tenemos este div, ahora si agregamos los controles que vamos a utilizar. en mi caso agregare un label , un textbox y un boton. Cabe destacar que por cada control que vayamos a agregar debemos ponerlos en un div class form-group, para darle un espacio entre cada control.

Aqui podemos apreciar como quedo el codigo html de este formulario:





Pueden apreciar que cada par de controles, los agrupe dentro de un div class "form-group".

Ahora procedemos a correr el ejemplo y visualizarlo en en navegador:





Como pueden apreciar sale un poco desordenado. Solo tenemos que jugar un poco con los espacios, asi que le agregamos unos cuantos saltos de linea.





Volvemos a probar.







Como pueden observar sale mas ordenado, solo arreglamos el boton.


Le agregamos un "col-lg-offset-4", esta clase nos permite desplazar el boton a la derecha.




Nos queda asi:




y cuando hacemos pequeña a pantalla nos queda asi:





Y esto es todo por este post.

 gracias por consultarlo