Kết nối

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

1.364 lượt xem 
 Cập nhật lần cuối: 21/06/2018 lúc 16:47:28
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ình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
[Bootstrap 4] Phần 3: Hệ thống lưới Bootstrap 4 | | DAMMIO Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

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