Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất trên thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và một trang bắt đầu mẫu
Bắt đầu nhanh
Tìm cách nhanh chóng thêm Bootstrap vào dự án của bạn? . Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn?
CSS
Sao chép-dán biểu định kiểu
Hello, world!
Hello, world!
1 vào trước tất cả các biểu định kiểu khác của bạn để tải CSS của chúng tôi
JS
Nhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, họ yêu cầu jQuery, Popper. js và các plugin JavaScript của riêng chúng tôi. Đặt sau
Hello, world!
Hello, world!
1Tò mò không biết thành phần nào yêu cầu jQuery, JS và Popper của chúng tôi một cách rõ ràng. js? . 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
Hello, world!
Hello, world!
3 và
Hello, world!
Hello, world!
4 của chúng tôi bao gồm Popper, nhưng không bao gồm jQuery. Để biết thêm thông tin về những gì có trong Bootstrap, vui lòng xem phần của chúng tôiHiển thị các thành phần yêu cầu JavaScript- 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. js]
- 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 plugin Thu gọn của chúng tôi nhằm triển khai hành vi phản hồi
- 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. js]
- Scrollspy cho hành vi cuộn và cập nhật điều hướng
Mẫu dành cho người mới bắt đầu
Đảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem cho các hành vi phản hồi phù hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này
Hello, world!
Hello, world!
Đó là tất cả những gì bạn cần cho các yêu cầu trang tổng thể. Truy cập tài liệu Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn
Toàn cầu quan trọng
Bootstrap sử dụng một số kiểu và cài đặt chung quan trọng mà bạn cần lưu ý khi sử dụng nó, tất cả chúng 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 không hoàn chỉnh vui nhộn, nhưng việc bao gồm nó sẽ không gây ra bất kỳ trục trặc đáng kể nào
...
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 trong thực tế
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
Hello, world!
Hello, world!
5 từ
Hello, world!
Hello, world!
0 thành
Hello, world!
Hello, world!
1. Điều này đảm bảo rằng
Hello, world!
Hello, world!
2 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
Hello, world!
Hello, world!
3 và
Hello, world!
Hello, world!
4—tất cả sẽ kế thừa
Hello, world!
Hello, world!
5 đã chỉ định cho
Hello, world!
Hello, world!
6 đó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