Bootstrap 4 tính đến thời điểm chính thức tung ra thị trường đến nay đã hơn 4 tuổi. Có thể thấy, phiên bản 4 này được coi là 1 CSS framework giúp đắc lực trong việc xây dựng và cắt giao diện Website rất hiệu quả
Nội dung chính Hiển thị
- Cách cài đặt Bootstrap 4
- Cách nhúng Bootstrap 4 từ CDN
- Tải Bootstrap 4 từ trang chủ
- Cách sử dụng Bootstrap 4
- Thêm định dạng tài liệu HTML5 vào
- Như vậy, bạn có thể nhận thấy ví dụ trên có sự hiện diện của 2 thư viện JavaScript là jQuery và Popper. Bởi họ có khả năng tạo nên các phần Website giống như hộp thoại [modal], chú thích [tooltip], hay popover,… Từ đó, trang Web sẽ sở hữu vô số tính năng và nâng cao trải nghiệm dành cho người sử dụng
Để bắt đầu làm việc với Boostrap, bạn cần nhúng thư viện Bootstrap vào trang web của bạn. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách nhúng Boostrap vào trang web và giải thích các tệp trong bộ thư viện này
Tìm hiểu các tập tin trong thư viện Bootstrap
Đầu tiên, các bạn truy cập vào trang chủ Boostrap để tải bộ thư viện bootstrap này về máy tính. Sau khi tải về máy tính thành công, bạn tiến hành giải nén ra bạn sẽ thấy các tệp của bootstrap với cấu trúc như sau
Trong bài viết này, tôi xin phép bỏ qua file bootstrap.css.map
và bootstrap.min.css.map
nhé. Tôi sẽ chia sẻ về nó vào một bài viết khác
CSS
- khởi động. css. Bộ mã chứa đầy đủ CSS của Bootstrap
- khởi động. tối thiểu. css. Chứa bộ mã đầy đủ CSS của Bootstrap nhưng đã loại bỏ các khoảng trắng, chú thích,… để giảm dung lượng tệp
- bootstrap-theme. css. Chứa các hiệu ứng của Boostrap [gradient, animation]
- bootstrap-theme. tối thiểu. css. Chứa các hiệu ứng của Boostrap [gradient, animation] nhưng đã loại bỏ các khoảng trắng, chú thích,… để giảm dung lượng tệp
JS
- khởi động. js. Chứa bộ đầy đủ lõi Javascript của Bootstrap
- khởi động. tối thiểu. js. Chứa đầy đủ bộ lõi Javascript của Bootstrap nhưng đã loại bỏ các khoảng trắng, chú thích để giảm dung lượng tệp
Phông chữ
Thư mục chứa toàn bộ phông chữ của thư viện glyphicons giúp việc trang trí trang web bằng biểu tượng phông chữ
Lưu ý. Khi nhúng vào trang web, bạn nên sử dụng tệp. min để trang web tải nhanh hơn
Hướng Nhúng Thư Viện Boostrap Vào Website
Cách 1. Nhúng liên kết từ Bootstrap
Bootstrap cung cấp sẵn cho chúng ta các liên kết để nhúng trực tiếp vào trang web nhưng chúng ta hạn chế sử dụng nó vì khi đó trang web phải tải các liên kết bên ngoài, dẫn đến việc trang web bị chậm
Chào mừng bạn đến với website HoangAn.netChào mừng bạn đến với website Hoangan.Net
cách 2. Nhúng bằng cách tự động lưu trữ
Tôi khuyến nghị các bạn nên sử dụng cách này, trang web của bạn sẽ tối ưu hơn, tải nhanh hơn. Bạn chủ động làm việc với nó
Trước tiên, bạn hãy tải xuống cả bộ Boostrap về máy tính và thư mục cấu trúc thiết lập như sau
Tiếp theo, bạn mở chỉ mục tệp. html and file cấu trúc định vị như sau
Chào mừng bạn đến với website HoangAn.netChào mừng bạn đến với website Hoangan.Net
- Phong cách. css. Sử dụng tùy chỉnh lại Class CSS mà bạn không muốn sử dụng mặc định của Bootstrap
- jquery. tối thiểu. js. Thư viện jQuery [tải xuống trên http. // jquery. com]. Bootstrap Javascript muốn hoạt động phải có thư viện jQuery
Kết luận
Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào trang web. Sau khi thực hiện nhúng xong Boostrap vào trang web, bạn có thể làm việc với các thành phần của Bootstrap