Curso .NET Core en C# - 24.Creamos un menú con BootStrap.

24.Creamos un menú con 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 veremos como configurar nuestra aplicación para que coja nuestro fichero de bootstrap de un lugar u otro. Para facilitar la depuración, en nuestra máquina de desarrollo local (es decir, en el entorno de desarrollo) queremos que la aplicación cargue el archivo css de nuestra ruta local. En los entornos de producción o staging queremos que la aplicación cargue el archivo de arranque de CSS (bootstrap.min.css) desde un CDN (Red de distribución de contenidos) para un mejor rendimiento.Sin embargo, si el CDN está caído o por alguna razón, nuestra aplicación no puede llegar al CDN, queremos que nuestra aplicación se repliegue y cargue el archivo de arranque desde nuestro propio servidor web de aplicaciones.

• Además creamos un menú aplicando bootstrap.En el siguiente vídeo lo podemos ver con más detalles:

• Os dejo parte del código visto en el vídeo:

   <environment exclude="Development">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"

              crossorigin="anonymous"

        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

        asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.css"

        asp-fallback-test-class="sr-only" 

        asp-fallback-test-property="position"

        asp-fallback-test-value="absolute"

        asp-suppress-fallback-integrity="true" />

    <div class="container">

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

            <a class="navbar-brand" asp-controller="home" asp-action="index">

                <img src="~/images/Amigos.png" width="30" height="30">

            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="collapsibleNavbar">

                <ul class="navbar-nav">

                    <li class="nav-item">

                        <a class="nav-link" asp-controller="home" asp-action="index">Listado</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" asp-controller="home" asp-action="create">Crear</a>

                    </li>

                </ul>

            </div>

        </nav>

        <div>

            @RenderBody()

        </div>

            @RenderSection("Scripts", required: false)

      

    </div>