Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này
Tạo một tệp
5 mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ
6 để có hành vi phản hồi thích hợp trong thiết bị di độngBootstrap demo Hello, world!
Bao gồm CSS và JS của Bootstrap. Đặt thẻ
6 vào CSS của chúng tôi và thẻ
6Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper
Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi
Để tham khảo, đây là các liên kết CDN chính của chúng tôi
Mô tảURLCSS
9JS
0Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung
Bước tiếp theo
thành phần JS
Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu
- Cảnh báo sa thải
- Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
- Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
- Thu gọn để chuyển đổi mức độ hiển thị của nội dung
- Danh sách thả xuống để hiển thị và định vị [cũng yêu cầu Popper]
- Các phương thức để hiển thị, định vị và hành vi cuộn
- Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
- Điều hướng với plugin Tab để chuyển đổi bảng nội dung
- Offcanvases để hiển thị, định vị và hành vi cuộn
- Scrollspy cho hành vi cuộn và cập nhật điều hướng
- Chúc mừng để hiển thị và loại bỏ
- Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị [cũng yêu cầu Popper]
Toàn cầu quan trọng
Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng tới việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào
loại tài liệu HTML5
Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ
...
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này đang hoạt động trong phần bắt đầu nhanh
kích thước hộp
Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu
1 từ
2 thành
3. Điều này đảm bảo rằng
4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
.selector-for-some-widget {
box-sizing: content-box;
}
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua
5 và
6—tất cả sẽ kế thừa
1 đã chỉ định cho
8 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS
khởi động lại
Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến
Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này
Với trình chỉnh sửa trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và nhấp vào nút để xem kết quả
Nhấn vào nút " Please yourself try" để xem nó hoạt động như thế nào
Bootstrap 5 so với Bootstrap 3 & 4
Bootstrap 5 là phiên bản mới nhất của Bootstrap;
Bootstrap 5 hỗ trợ các bản phát hành mới nhất, ổn định của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ
Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4, là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery
Lưu ý. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ cho các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ không được thêm vào chúng. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng
Bootstrap 5 Bài tập
Kiểm tra bản thân với các bài tập
Tập thể dục
Sử dụng lớp bootstrap để tập trung vào văn bản sau
4Start the file
Bootstrap 5 Bài kiểm tra
Kiểm tra kỹ năng bootstrap 5 của bạn tại W3Schools
Start Bootstrap 5 đố vui
Việc làm của tôi
Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools
Đăng nhập vào tài khoản của bạn và bắt đầu tìm kiếm điểm
Đây là một tùy chọn tính năng. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi
W3Schools được tối ưu hóa cho học tập và đào tạo. Các ví dụ có thể được đơn giản hóa để cải thiện việc đọc và học. Các hướng dẫn, tài liệu tham khảo và ví dụ được xem xét liên tục để tránh lỗi, nhưng chúng tôi không thể đảm bảo tính chính xác hoàn toàn của tất cả nội dung. Trong khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng, cookie và chính sách quyền riêng tư của chúng tôi
Bản quyền 1999-2022 của Refsnes Data. Đã đăng ký Bản quyền. W3Schools được cung cấp bởi W3. CSS.
W3Schools được cung cấp bởi W3. CSS.
Hãy tự mình lấy ví dụ
Hướng dẫn bootstrap này bao gồm hàng trăm ví dụ bootstrap
Với trình soạn thảo trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã đã chỉnh sửa và nhấp vào nút để xem kết quả