1. ASP.NET MVC 5 Hello World
  2. ASP.NET MVC 5 Create Shared Layout Razor & ViewStart
  3. ASP.NET MVC 5 Install Bootstrap
  4. ASP.NET MVC 5 Using DBContext Connect Database
  5. ASP.NET MVC 5 CRUD Tutorial With Example For Beginners
  6. Pagination For Search Results ASP.NET MVC 5
  7. ASP.NET MVC 5 Ajax Pagination For Search Results
  8. ASP.NET MVC 5 Render Sections with RenderSection
  9. ASP.NET MVC 5 Html.Partial & Html.RenderPartial
  10. ASP.NET MVC 5 Html.Action and Html.RenderAction
  11. ASP.NET MVC 5 LinQ to SQL
  12. ASP.NET MVC 5 FORM VALIDATION
  13. ASP.NET MVC 5 Partial View with Ajax Form
  14. ASP.NET MVC 5 Login and Register
  15. ASP.NET MVC 5 Repository Pattern
  16. ASP.NET MVC 5 Stored Procedure
  17. ASP.NET MVC 5 - Multiple Comment
  18. Build Angular + ASP.NET MVC 5
  19. Build Web API using Angular with ASP.NET MVC5 (Part 1)
  20. Build Web API using Angular with ASP.NET MVC 5 (Part 2)

ASP.NET MVC 5 Install Bootstrap

min read

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

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)