Scribd
Cargar
3 vistas3 páginas

Guia BootstrapMVC ASPNET

Esta guía práctica enseña a crear una página web moderna utilizando Bootstrap y ASP.NET Web Forms, incluyendo la configuración del proyecto y la estructura de dos páginas interconectadas: index.aspx y landing.aspx. La página de inicio presenta un banner y un botón que redirige a la página de presentación, que incluye un diseño más elaborado con tarjetas y un estilo animado. Además, se proporciona un ejercicio final para personalizar el diseño mediante CSS y el uso de imágenes.

Cargado por

tomiohiga5
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
3 vistas3 páginas

Guia BootstrapMVC ASPNET

Esta guía práctica enseña a crear una página web moderna utilizando Bootstrap y ASP.NET Web Forms, incluyendo la configuración del proyecto y la estructura de dos páginas interconectadas: index.aspx y landing.aspx. La página de inicio presenta un banner y un botón que redirige a la página de presentación, que incluye un diseño más elaborado con tarjetas y un estilo animado. Además, se proporciona un ejercicio final para personalizar el diseño mediante CSS y el uso de imágenes.

Cargado por

tomiohiga5
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Guía Práctica: Página Web con Bootstrap en ASP.

NET Web Forms


En esta guía, aprenderás a crear una página web moderna con Bootstrap utilizando
[Link] Framework (Web Forms). El proyecto estará compuesto por dos páginas
interconectadas: una página de inicio ([Link]) y una página de presentación o landing
([Link]).

1. Creación del Proyecto Base


1. Abre Visual Studio (2019 o 2022).
2. Crea un nuevo proyecto seleccionando 'Aplicación Web [Link] (.NET Framework)'.
3. Nombra el proyecto como BootstrapMVC.
4. Elige la plantilla 'Empty' y marca 'Web Forms'.
5. Crea la estructura de carpetas: assets/css y assets/img.

2. Estructura de la Página [Link]


Esta página servirá como la pantalla inicial del sitio. Mostrará un banner central con un
botón que redirige a la página Landing.

Código para [Link]:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"


Inherits="[Link]" %>

<!DOCTYPE html>
<html xmlns="[Link]
<head runat="server">
<title>Página Principal</title>
<link href="[Link]
rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container text-center mt-5">
<h1 class="display-4">Bienvenido a mi sitio web</h1>
<p class="lead">Explora un diseño moderno con Bootstrap</p>
<button class="btn btn-primary btn-lg" onclick="[Link]='[Link]'">Ver
más</button>
</div>
</form>
</body>
</html>

3. Creación de la Página [Link]


La página Landing mostrará un diseño más completo, con un banner, tarjetas con imágenes
y un estilo animado.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"
Inherits="[Link]" %>

<!DOCTYPE html>
<html xmlns="[Link]
<head runat="server">
<title>Landing Page</title>
<link href="[Link]
rel="stylesheet" />
<link href="assets/css/[Link]" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<section class="banner text-white text-center d-flex align-items-center justify-content-
center">
<h1>Bienvenido a la Landing Page</h1>
</section>

<section class="container py-5">


<div class="row">
<div class="col-md-4">
<div class="card">
<img src="assets/img/[Link]" class="card-img-top" alt="Imagen 1" />
<div class="card-body">
<h5 class="card-title">Diseño Moderno</h5>
<p class="card-text">Aprende a crear interfaces limpias y atractivas.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="assets/img/[Link]" class="card-img-top" alt="Imagen 2" />
<div class="card-body">
<h5 class="card-title">Código Limpio</h5>
<p class="card-text">Mantén buenas prácticas de desarrollo web.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="assets/img/[Link]" class="card-img-top" alt="Imagen 3" />
<div class="card-body">
<h5 class="card-title">Bootstrap + [Link]</h5>
<p class="card-text">Integra tecnologías para crear sitios dinámicos.</p>
</div>
</div>
</div>
</div>
</section>
</form>
</body>
</html>

4. Estilos CSS
.banner {
background-image: url('../img/[Link]');
background-size: cover;
background-position: center;
height: 60vh;
animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.card:hover {
transform: scale(1.05);
transition: 0.3s;
}

5. Ejercicio Final
Modifica los colores, tipografías y efectos en el archivo [Link] para personalizar tu
propio diseño. Agrega tus imágenes en la carpeta assets/img y experimenta con las clases
de Bootstrap.

También podría gustarte