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:
- Visual Studio Express 2012 para Web.
- Dot Net Framework 4.5.
- jQuery 2.0.3
- Twitter Bootstrap 3.0.0 RC1 straight from GitHub.
- Twitter Bootstrap Starter Template desde http://getbootstrap.com/getting-started/#examples.
Pasos para usar 3.0.0 Bootstrap con ASP.NET Web Forms:
- Inicie Visual Studio (Estoy usando Visual Studio Express 2012 para Web).
- Crear una nueva aplicación Web ASP.NET vacía.
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.
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.
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.
9.Coloque los 2 archivos de arranque js en la carpeta Scripts e incluirlos en el proyecto desde el explorador de soluciones.
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.
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.
14. Edite la nueva página maestra y vincular el Css de arranque en el interior del bloque de título.
15 Retire la etiqueta <form> configurar desde la página principal.
16.Aplicar las referencias de nuestro archivo Boorstrap.css
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:
18.Agregar las referencias de script al final
Bueno como en esta imagen:
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.
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.
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.
Espero que les guste