22.Cómo instalar y usar Bootstrap.
- Hola a todos. En este curso, analizaremos todos los conceptos básicos, intermedios y avanzados de ASP.NET Core que nos ayudan a crear aplicaciones web basadas en datos.Al final de este curso, podremos realizar todas las operaciones de un CRUD, es decir, crear, leer, actualizar y eliminar datos utilizando SQL Server como nuestra base de datos.
- En este vídeo discutiremos cómo instalar y usar Bootstrap en ASP.NET Core.. Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales.
- Para instalar el paquete de Bootstrap utilizaremos Library Manager (LibMan para abreviar). Library Manager es una herramienta ligera de adquisición de bibliotecas del lado del cliente. Para poder usar LibMan, debe tener Visual Studio 2017 versión 15.8 o posterior.
- En el siguiente vídeo podemos ver como instalarlo:
- Os dejo parte del código visto en el vídeo:
libman.json
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "twitter-bootstrap@4.3.1",
"destination": "wwwroot/lib/twitter-bootstrap/"
}
]
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/css/sitio.css" rel="stylesheet" />
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
@RenderSection("Scripts",required:false)
</body>
</html>
Index.cshtml
@model List<Amigo>
@{
ViewBag.Title = "Amigos indice";
}
<div class="card-deck">
@foreach (var amigo in Model)
{
<div class="card m-3">
<div class="card-header">
<h3>@amigo.Nombre</h3>
</div>
<img class="card-img-top" src="~/images/ChicaCodigo.jpg" />
<div class="card-footer text-center">
<a href="#" class="btn btn-primary">Ver</a>
<a href="#" class="btn btn-primary">Editar</a>
<a href="#" class="btn btn-danger">Borrar</a>
</div>
</div>
}
</div>
DetallesView.cshtml
@model DetallesView
@{
ViewBag.Title = "Amigos Detalles";
}
<div class="row justify-content-center m-3">
<div class="col-sm-8">
<div class="card">
<div class="card-header">
<h1>@Model.amigo.Nombre</h1>
</div>
<div class="card-body text-center">
<img class="card-img-top" src="~/images/ChicaCodigo.jpg" />
<h4>Amigo ID : @Model.amigo.Id</h4>
<h4>Email: @Model.amigo.Email</h4>
<h4>Ciudad: @Model.amigo.Ciudad</h4>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-primary">Volver</a>
<a href="#" class="btn btn-primary">Editar</a>
<a href="#" class="btn btn-danger">Borrar</a>
</div>
</div>
</div>
</div>
@section Scripts
{
<script src="~/js/MiScript.js"></script>
}
No hay comentarios:
Publicar un comentario