Cách sử dụng bootstrap 4

11-06-2020 15:44:23
by: baobinhnet

Trong bài trước, các bạn đã hiểu về Bootstrap là gì và tổng quan về Bootstrap 4, trong bài này, chúng ta lại tiếp tục học cách sử dụng bootstrap trong dự án web của chúng ta nhé.

Cài đặt Bootstrap 4

Chúng ta có 2 cách chính để cài đặt BS4, đó là:

Nhúng Bootstrap 4 từ CDN (mạng phân phối nội dung)
Tải từ trang chủ của Bootstrap là getbootstrap.com

Nhúng Bootstrap 4 từ CDN

Khi triển khai website trên mang, đ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ụ sau mình sẽ nhúng các tập tin cần thiết để xây dựng 1 website sử dụng Bootstrap 4. Để sử dụng Bootstrap 4, các bạn cần nhúng các file thư viện sau:

bootstrap.min.css: bản CSS đã nén của BS4
jquery.min.js: thư viện jQuery, bắt buộc phải gọi trước thư viện js của BS4
popper.min.js: thư viện popper đã nén
bootstrap.min.js: bản JS đã nén của BS4, để sau các thư viện JS ngoài

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Trong ví dụ trên bạn thấy xuất hiện hai thư viện JavaScript là jQuery và Popper. Vậy tại sao chúng ta nên dùng thư viên này? Lý do là vì 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 từ trang chủ

Nếu các bạn muốn tải Bootstrap 4 và sử dụng riêng trên host thì hãy truy cập trang chủ của Bootstrap là getbootstrap.com

Các bạn lên trang chủ của bootstrap 4 tại đây và download về cho mình bộ source ở link đầu tiên (Compiled Css and Js).

Sau khi download về, các bạn sẽ thu được cấu trúc gồm 2 thư mục là CSS và JS:

Trong thư mục CSS, các bạn chỉ cần quan tâm 2 file: thứ nhất là file bootstrap.css và thứ 2 là file bootstrap.min.css. Nội dung 2 file thì như nhau nhưng 1 bản là bản đầy đủ, và 1 bản là bản nén để khi sử dụng gọi vào sẽ giúp website load nhanh hơn.
Tương tự, trong thư mục JS các bạn cũng chỉ quan tâm tới 2 file, đó là: file đầy đủ bootstrap.js và file nén là file bootstrap.min.js. Ngoài ta, trong folder này, các bạn cần thêm thư viện popper và thư viện jquery bằng cách lên trang chủ của các thư viện tải về và để file thư viện trong folder JS nhé.

Dưới đây, mình sẽ để cấu trúc thư mục chuẩn để các bạn tham khảo và sử dụng vào xây dựng giao diện website với Bootstrap 4 nhé:

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

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

Bootstrap 4 sử dụng các thuộc tính CSS và các phần tử HTML yêu cầu HTML phải là phiên bản HTML5.
Vì vậy, để sử dụng Bootstrap 4, các bạn cần thêm dạng tài liệu (doctype) là HTML5 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, các bạn cần thêm thẻ meta sau bên trong phần tử head để reponsive web design trên các thiết bị chuẩn nhất.

<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%).

Kết luận

Như vậy qua bài hôm nay, mình đã giúp các bạn nắm được cách cài đặt và nhúng thư viện Bootstrap 4 vào xây dựng giao diện website. Mời bạn tiếp tục theo dõi bài tiếp theo.

Xem thêm: bootstrap bootstrap 4 cách sử dụng bootstrap cách sử dụng bootstrap 4

Học Bootstrap 4