0
(0)
Hướng dẫn sử dụng Bootstrap 4 cơ bản
Nếu bạn tìm được nội dung hữu ích,
vui lòng đánh giá 5 sao nhé.
Điểm trung bình 0 / 5. Phiếu bầu 0
Cảm ơn bạn đã bình chọn.
Chia sẻ
Leave an answer
You must login to add an answer.
Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.
Hướng dẫn sử dụng Bootstrap 4 cơ bản
Thêm HTML5 doctype
Bootstrap 4 ứng dụng các phần tử HTML và các thuộc tính CSS. Bootstrap đòi hỏi người dùng bổ sung thẻ HTML5 doctype. Để sử dụng Bootstrap, bạn cần đảm bảo Bootstrap được cài đặt đã bao gồm HTML5 doctype ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác.
Bootstrap 4 mobile-first là gì?
Bootstrap 4 được thiết kế để đáp ứng cho các thiết bị di động. Mobile-first Index là một phần cốt lõi của Bootstrap 4. Để đảm bảo hiển thị đúng và thu phóng khung của website linh hoạt với khung browser, hãy thêm thẻ <meta> sau vào bên trong phần tử <head>:
Bootstrap 4 containers là gì?
Khi sử dụng trên webiste của riêng mình, người dùng cần bọc toàn bộ nội dung trong webiste bằng thẻ container (class container hoặc container-fluid). Trong đó:
Ví dụ trang Bootstrap 4 cơ bản
Để chạy thử các ví dụ dưới đây bạn có thể sử dụng WAMP hay XAMPP để chạy localhost và tạo file example.html. Cụ thể bạn có thể tham khảo ở bài viết sau:
Hoặc bạn chỉ cần mở notepad sau đó copy các đoạn code dưới đây vào. Đừng quên đổi đuôi file khi lưu là .html và đổi Encoding thành UTF-8 để không bị lỗi font. Sau đó bạn chỉ cần dùng trình duyệt (browser) của mình mở file này để kiểm tra.
Đây là ví dụ Bootstrap 4 sử dụng Container-fluid class (Responsive fixed width container):
Đây là ví dụ sử dụng Container-fluid class (full width container)
Bootstrap 4 Grid System là gì?
Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện (web responsive) của Bootstrap. Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới dạng lưới (grid). Bootstrap được chia thành 12 cột đặt trong một class row. Trong đó, mỗi cột sẽ bao gồm các Padding tương ứng với từng độ phân giải của mỗi thiết bị (điện thoại, tablet, máy tính).
Bootstrap 4 Grid System có 5 lớp
.col-(extra small devices – chiều rộng màn hình < 576px).col-sm-(small devices – chiều rộng màn hình >= 576px).col-md-(medium devices – chiều rộng màn hình >= 768px).col-lg-(large devices – chiều rộng màn hình >= 992px).col-xl-(xlarge devices – chiều rộng màn hình >= 1200px)Cấu trúc Bootstrap 4 Grid System là gì?
Dưới đây là cấu trúc đơn giản nhất của Bootstrap 4 Grid System
Với:
Bootstrap là một framework tối ưu và sẽ được sử dụng rất nhiều trong tương lai. Đặc biệt là trong quá trình thiết kế website chuyên nghiệp. Hy vọng, bài viết này đã giúp bạn có cái nhìn tổng quát về Bootstrap là gì? – giải pháp hiệu quả và tiết kiệm thời gian thiết kế web cho nhiều doanh nghiệp.
Tham khảo thêm: Bootstrap là gì? Cài đặt Bootstrap, web chuẩn responsive