[Bootstrap 4] Phần 2: Cài đặt Bootstrap 4

Cập nhật lần cuối: 17/05/2019 lúc 17:45:17

Thể loại: Bootstrap

Cài đặt Bootstrap

Có hai cách chính để cài đặt Bootstrap đó là: nhúng Bootstrap 4 từ CDN (mạng phân phối nội dung) và tải từ trang getbootstrap.com.

Nhúng Bootstrap 4 từ CDN

Khi triển khai website trên mạng, đa số các lập trình viên đều sử dụng nhúng Bootstrap thông qua CDN vì cách này giúp tiết kiệm băng thông cho website. MaxCDN cung cấp các CDN cho CSS và JavaScript của Bootstrap cũng như thư viện jQuery. Ví dụ nhúng các tập tin cần thiết để xây dựng một website dùng BS4 như sau:

<!-- CSS được tối ưu và biên dịch mới nhất -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- Thư viện jQuery (dammio.com) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- JavaScript biên dịch mới nhất -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Trong ví dụ trên bạn thấy xuất hiện hai thư viện JavaScript: jQuery và Popper. Vậy tại sao chúng ta nên dùng thư viện này? Lý do là jQuery và Popper dùng để tạo các thành phần website như hộp thoại (modal), chú thích (tooltip), popover,… giúp website có nhiều tính năng và nâng cao trải nghiệm người dùng hơn.

Tải Bootstrap 4

Nếu bạn muốn tải BS4 và sử dụng riêng trên host, hãy truy cập trang getbootstrap.com.

Xây dựng giao diện cơ bản

Thêm dạng tài liệu (doctype) là HTML5

Bootstrap 4 dùng các thuộc tính CSS và phần tử HTML yêu cầu tài liệu HTML phải là phiên bản HTML5. Việc thêm này rất dễ như sau.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Bootstrap 4 ưu tiên thiết bị di động

Bootstrap 4 được thiết kế đáp ứng trên các màn hình thiết bị di động. Do đó, các phong cách ưu tiên di động là phần lõi chính trong framework. Để chắc chắn việc hiển thị thu phóng thích hợp, bạn thêm thẻ meta sau bên trong phần tử head.

<meta name="viewport" content="width=device-width, initial-scale=1">

Phần này tương tự như BS3, phần width=device-width đặt độ rộng trang theo độ rộng màn hình. Khi giao diện website chạy trên các thiết bị màn hình khác nhau thì trang web sẽ có độ rộng khác nhau. Phần initial-scale=1 thiết lập mức thu phóng ban đầu, thông thường là 1 (tức 100%).

Tạo các vùng chứa

Vùng chứa là vùng chứa toàn bộ giao diện website. Theo cách thiết kế website cũ, vùng chứa chính là thẻ div chính bao toàn bộ nội dung website. Không khác gì BS3, BS4 cũng chứa 2 dạng vùng chứa:

Lớp .container cung cấp vùng chứa có độ rộng cố định
Lớp .container-fluid cung cấp độ rộng toàn phần, tùy theo kích thước màn hình.

Tùy theo yêu cầu thiết kế, bạn có thể chọn 1 trong hai lớp này để tạo vùng chứa cho website. Chẳng hạn, website DAMMIO sử dụng lớp .container-fluid là vùng chứa cho độ rộng màn hình bé hơn khoảng 1200px.

Giao diện website dùng lớp .container và lớp .container-fluid

Giao diện đầu tiên chúng ta sẽ dùng lớp .container, nhận xét thấy giao diện này không thể trải rộng toàn bộ màn hình.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="background-color:yellow">
  <h1>Trang Boostrap 4 đầu tiên --- dammio.com</h1>
  <p>Đây là văn bản ví dụ</p> 
</div>

</body>
</html>

Tiếp theo đây là giao diện dùng lớp .container-fluid được trải rộng toàn bộ màn hình.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid" style="background-color:yellow">
  <h1>Trang Bootstrap đầu tiên</h1>
  <p>Đây là nội dung văn bản. --- dammio.com</p> 
</div>

</body>
</html>

Kết luận

Bài này giúp bạn nắm được cách cài đặt và tạo giao diện BS4 cơ bản. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2018). [Bootstrap 4] Phần 2: Cài đặt Bootstrap 4. https://www.dammio.com/2018/06/19/bootstrap-4-phan-2-cai-dat-bootstrap-4.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 2: Cài đặt Bootstrap 4}, year = {2018}, url = {https://www.dammio.com/2018/06/19/bootstrap-4-phan-2-cai-dat-bootstrap-4}, urldate = {2024-09-08} }