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