Xin chào các bạn, hôm nay chúng ta tiếp tục đến với bài 2 trong series học Bootstrap 4 nhé, bài trước thì đã giới thiệu rất nhiều về Bootstrap 4 rồi, từ bài hôm nay, chúng ta sẽ học cách cài đặt bootstrap
Bootstrap là gì?
Bootstrap là một framework bao gồm các hàm html, css, javascript được code sẵn nhằm hỗ trợ lập trình viên phát triển website responsive dễ dàng hơn.
Bootstrap hỗ trợ cho quá trình code giao diện của các lập trình viên thuận lợi hơn, nhờ những code có sẵn và coder chỉ việc sử dụng mà không mất thời gian code từ đầu, đây có thể xem là ưu điểm nổi bật nhất mà framework bootstrap mang lại cho khi lập trình.
Tuy nhiên, các công ty lập trình web chuyên nghiệp thường không sử dụng bootstrap cho các dự án của mình. Nếu bạn thiết kế website riêng tại Mona Media, giao diện hầu như chỉ sử dụng Javascript để xử lý mà không dùng đến framework Bootstrap, bởi dù có nhiều ưu điểm nhưng Bootstrap có thể khiến cho dung lượng website tăng lên đáng kể, ảnh hưởng đến tốc độ load trang.
Cách cài đặt Bootstrap 4
Chúng ta có 2 cách cài đặt bootstrap 4, đó 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 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ụ sau mình sẽ nhúng các tập tin cần thiết để thiết kế 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 BS4jquery.min.js: thư viện jQuery, bắt buộc phải gọi trước thư viện js của BS4popper.min.js: thư viện popper đã nénbootstrap.min.js: bản JS đã nén của BS4, để sau các thư viện JS ngoài
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 theo yêu cầu 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:
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.
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 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.Chúc các bạn học tập tốt!