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
Este comentario ha sido eliminado por el autor.
ResponderEliminarSabes como le puedo montar una plantilla para q se vea lindo?
ResponderEliminarHola deberías montar la pagina como masterpage para editar los colores de la pagina .
EliminarBuenos dias tengo un inconveniente al ejecutar la aplicacion me sale el siguiente error "Failed to load resource: the server responded with a status of 404 (Not Found)", estoy usando version de jquery2.1.4 y de BS 3.3.5 y la referencia esta en la masterpage a la ruta
ResponderEliminarAl tratar de hacer el ejemplo aparece todo bien, pero al presionar el boton que abre el menu no se visualiza nada, no genera ninguna accion, te agradezco cualquier colaboracion
ResponderEliminarEstimado me puede compartir la estructura de su menú, lo ideal es que las referencias apunten a su paginas correctamente
EliminarHola una pregunta, sabes como podria apadaptar los mensajes modal como mensaje de confirmacion en una aplicacion asp ?
ResponderEliminarhola buenas tarde, hice tu ejemplo y lo publique en un sitio, en la pc jala normal todo, al hacer resize , pero el probelma esta que al verlo en el movil( celular) se ve como si fuera un apc normal , es decir no hace el efecto de resize
ResponderEliminarhola buenas tarde, hice tu ejemplo y lo publique en un sitio, en la pc jala normal todo, al hacer resize , pero el probelma esta que al verlo en el movil( celular) se ve como si fuera un apc normal , es decir no hace el efecto de resize
ResponderEliminarPerfecto, todo bien
ResponderEliminarEste ejemplo ya lo había visto en otro blog. Me hubiera gustado que lo aplicaras para hacer algo diferente.
ResponderEliminartodo quieres hijo de tu puta madre pendejo
EliminarMuchas gracias por tu conocimientos. Me sirvió al 100%
ResponderEliminar