Asp .net con Bootstrap 3.0.0 paso a paso

En esta publicación estoy considerando la creación de un formulario web vacío, aplicando el Framework Twiter Bootstrap 3.0.0 en ASP.NET paso a paso considerando los links de descarga de los archivos necesarios para el funcionamiento de nuestra nueva aplicación,
Los pasos están descritos de forma simple para que usted construya su aplicación.
Manos a la obra :
Herramientas y Framework utilizados:
Pasos para usar 3.0.0 Bootstrap con ASP.NET Web Forms:
  1. Inicie Visual Studio (Estoy usando Visual Studio Express 2012 para Web).
  2. Crear una nueva aplicación Web ASP.NET vacía.
Bootstrap-ASP.NET-StepByStep-01
      3.En el nuevo proyecto, cree una carpeta Scripts para almacenar la escritura de Java y archivos de jQuery.
     4. Cree otro contenido con una  carpeta para almacenar los archivos CSS y los archivos de imagen. Luego de crear las nuevas carpetas de la solución deberia aparecer de esta forma la estructura de archivos.
Bootstrap-ASP.NET-StepByStep-02
     5. Bootstrap necesita jQuery asi que debemos descargar la última versión de jQuery desde la siguiente página http: //jquery.com/download/. Debemos descargar el archivo comprimido y la producción de jQuery 2.0.3. o superior.
     6. Guarde el archivo Jquery descargado en la carpeta Scripts en el proyecto. Luego de incluir el archivo jquery-2.0.3.min.js al proyecto desde el explorador de soluciones.
Bootstrap-ASP.NET-StepByStep-03
   7. Descargue la versión más reciente.
   8. Extraiga el archivo zip descargado (bs-v3.0.0-rc1-dist.zip). He descargado la versión 3.0.0 RC1. Habrá 2 carpetas, una con archivos js y otro con archivos CSS.

bootstrap-ASP.NET-StepByStep-04
bootstrap-ASP.NET-StepByStep-05

9.Coloque los 2 archivos de arranque js en la carpeta Scripts e incluirlos en el proyecto desde el explorador de soluciones.

Bootstrap-ASP.NET-StepByStep-06
10.Copia la carpeta Css desde el archivo zip de arranque y colocarlo dentro de la carpeta de contenido del proyecto. Entonces incluir la carpeta css y su contenido al proyecto.
11.Después de incluir los archivos, el explorador de soluciones se parece a esto.

Bootstrap-ASP.NET-StepByStep-07
12. Debemos descargar la plantilla de arranque de arranque de examples.getbootstrap.com.
13. Crear una página principal para el proyecto y cambiar el nombre si es necesario. Para crear una página maestra, haga clic en el proyecto en el explorador de soluciones, seleccione Agregar, seleccione Nuevo elemento … y crear nueva página maestra.

Bootstrap-ASP.NET-6
14. Edite la nueva página maestra y vincular el Css de arranque en el interior del bloque de título.
Bootstrap-ASP.NET-StepByStep-08

   15 Retire la etiqueta <form> configurar desde la página principal.
16.Aplicar las referencias de nuestro archivo Boorstrap.css
   17.Agregar las clases a los divs que están encerrados en rojo.
18.Agregar las referencias de script al final
Bueno como en esta imagen:

Bootstrap-ASP.NET-StepByStep-09a

20 Crear una página por defecto, para la creación de la página Default.aspx, haciendo clic derecho en el proyecto, seleccione Agregar, seleccione Nuevo elemento … y seleccione Formulario Web con Master Page. En la pantalla de selección de páginas principales, seleccione la nueva página maestra que ha creado anteriormente.
21. Editar la página Default.aspx y escribir algo dentro de la sección de contenido ContentPlaceHolder1.
Bootstrap-ASP.NET-StepByStep-10
     22.Ahora la solución está lista para ser construir.
     23.Genere la solución de formularios Web Forms ASP.NET, ya sea pulsando la tecla F5 o haciendo clic en el build flecha verde en la barra de herramientas de Visual Studio. En la construcción satisfactoria, la página web se pondrá en marcha en el navegador similar al que se muestra a continuación.
Bootstrap-ASP.NET-StepByStep-11
 24.Este diseño de interfaz de usuario de arranque es sensible en la naturaleza. Esto es, al abrir esta interfaz de usuario en pantallas pequeñas, como los teléfonos inteligentes o tabletas, el menú y el contenido reordenarse para ajustarse a la pantalla. Esto se puede comprobar por la modificación del tamaño de la pantalla del navegador en el PC.
Bootstrap-ASP.NET-StepByStep-12

ver mas:
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s