ASP.NET MVC 5 Install Bootstrap

ASP.NET MVC 5 Install Bootstrap

Tiếp tục với các chia sẻ trước, này mình tiếp tục chia sẻ cách cài đặt Bootstrap trong ASP.NET MVC 5 dùng phần mềm Visual Studio 2019
Bài trước mình đã tạo một project đơn giản, cùng với cách tạo Layout Razor & ViewStart để cấu hình bố cục cho website. Mọi người có thể xem lại tại đây ASP.NET MVC 5 Hello World

Setup Bootstrap 3.3.1 trong ASP.NET MVC 5

Click right Project -> Manager NuGet Packages -> Bạn chọn như hình bên dưới đây, bằng cách thêm một package mới
https://api.nuget.org/v3/index.json

ASP.NET MVC 5 Install Bootstrap

Bạn cần thêm một package source, bạn bấm vào đấu + add thêm vào như hình bên dưới

ASP.NET MVC 5 Install Bootstrap

Xong bạn chỉ cần gõ vào khung tìm kiếm Bootstrap và cài đặt nó thôi

ASP.NET MVC 5 Install BootstrapSau khi cài đặt xong, bạn sẽ nhìn thấy trong Project sẽ thấy các file bootstrap được đặt trong thư mục: Content và Scripts
Để sử dụng bootstrap cho bố cục giao diện, bạn mở file layout razor trong Views/Shared cần dùng thêm vào thư viện css,javascript như sau:

<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Ví dụ: Views/Shared/_LayoutHome.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>

</html>

Vào Views/Home/Index.cshtml viết bootstrap cho giao diện

<div class="container">
    <div class="row">

        <div class="col-md-12">
            <h2>@ViewBag.title</h2>
            <a href="https://hoanguyenit.com" class="btn btn-success">https://hoanguyenit.com</a>
        </div>
    </div>
</div>

Vậy là xong, bạn có thể sử dụng được bootsrap ở bất cứ giao diện nào nếu bạn muốn

Tag: ASP.NET MVC