Bắt đầu nhanh
Bắt đầu bằng cách bao gồm CSS sẵn sàng sản xuất Bootstrap và JavaScript 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 codepen bootstrap này.
Tạo một tệp
index.html
mới trong root dự án của bạn. Bao gồm thẻcũng như hành vi phản hồi thích hợp trong thiết bị di động. Include the
tag as well for proper responsive behavior in mobile devices.
Bootstrap demo Hello, world!
Bao gồm Bootstrap từ CSS và JS. Đặt thẻ
trong
cho CSS của chúng tôi và thẻ
0 cho gói JavaScript của chúng tôi [bao gồm Popper để định vị thả xuống, poppers và chú giải công cụ] trước khi đóngBootstrap demo Hello, world!
1. Tìm hiểu thêm về các liên kết CDN của chúng tôi. Place theBootstrap demo Hello, world!
tag in the
for our CSS, and the
0 tag for our JavaScript bundle [including Popper for positioning dropdowns, poppers, and tooltips] before the closingBootstrap demo Hello, world!
1. Learn more about our CDN links.Bootstrap demo Hello, world!
Bootstrap demo Hello, world!
Bạ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 có kế hoạch sử dụng thả xuống, popover hoặc chú giải công cụ, hãy lưu 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 của bạn để xem trang Bootstrapping của bạn. Bây giờ 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 bạn, thêm hàng tá thành phần và sử dụng các ví dụ chính thức của chúng tôi. Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout, adding dozens of components, and utilizing our official examples.
Liên kết CDN
Để tham khảo, đây là các liên kết CDN chính của chúng tôi.
CSS | 2 |
JS | 3 |
Bạ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
Đọc thêm một chút về một số cài đặt môi trường toàn cầu quan trọng mà Bootstrap sử dụng.
Đọc về những gì mà bao gồm trong bootstrap trong phần Nội dung của chúng tôi và danh sách các thành phần yêu cầu JavaScript dưới đây.
Cần thêm một chút sức mạnh? Xem xét việc xây dựng với Bootstrap bằng cách bao gồm các tệp nguồn thông qua Trình quản lý gói.
Tìm cách sử dụng bootstrap làm mô -đun với
4? Vui lòng tham khảo chúng tôi bằng cách sử dụng bootstrap làm phần mô -đun.Bootstrap demo Hello, world!
Thành phần JS
Tò mò những thành phần nào rõ ràng yêu cầu JavaScript và Popper của chúng tôi? Nhấp vào liên kết Hiển thị thành phần bên dưới. Nếu bạn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc cho một mẫu trang ví dụ.
- Cảnh báo cho việc bác bỏ
- Các nút để chuyển đổi trạng thái và chức năng kiểm tra/radio
- Băng chuyền cho tất cả các hành vi, điều khiển và chỉ số trượt
- Sụp đổ vì khả năng hiển thị nội dung
- 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
- Navbar để mở rộng các plugin sụp đổ và offcanvas của chúng tôi để thực hiện các hành vi đáp ứng
- NAVS với plugin tab để chuyển đổi các tấm nội dung
- Offcanvase để 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
- Bánh mì nướng để hiển thị và loại bỏ
- Tooltips và PopoVers để hiển thị và định vị [cũng yêu cầu Popper]
Quả cầu quan trọng
Bootstrap sử dụng một số ít các phong cách và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy để lặn trong.
HTML5 DOCTYPE
Bootstrap yêu cầu sử dụng HTML5 DocType. Không có nó, bạn sẽ thấy một số kiểu dáng vui nhộn và không hoàn chỉnh.
...
Thẻ meta đáp ứng
Bootstrap được phát triển di động trước tiên, một chiến lược trong đó chúng tôi tối ưu hóa mã cho các thiết bị di động trước và sau đó mở rộng các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS. Để đảm bảo kết xuất và chạm vào phù hợp cho tất cả các thiết bị, hãy thêm thẻ Meta Viewport đáp ứng vào của bạn.
Bạn có thể thấy một ví dụ về điều này trong hành động trong khởi đầu nhanh chóng.
Kích thước hộp
Để có kích thước đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu
Bootstrap demo
Hello, world!
6 từ
Bootstrap demo
Hello, world!
7 sang
Bootstrap demo
Hello, world!
8. Điều này đảm bảo
Bootstrap demo
Hello, world!
9 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à Google Custom Search Engine.Trong dịp hiếm hoi, bạn cần phải ghi đè nó, sử dụng một cái gì đó như sau:
.selector-for-some-widget {
box-sizing: content-box;
}
Với đoạn trích trên, các phần tử lồng nhau, bao gồm nội dung được tạo ra thông qua
0 và ________ 21, tất cả sẽ được thừa hưởng
Bootstrap demo
Hello, world!
6 được chỉ định cho
3 đó.Tìm hiểu thêm về mô hình hộp và kích thước tại các thủ thuật CSS.
Khởi động lại
Để kết xuất trình duyệt chéo được cải thiện, chúng tôi sử dụng khởi động lại để sửa chữa sự không nhất quán trên các trình duyệt và thiết bị trong khi cung cấp các thiết lập lại có ý kiến hơn một chút cho các yếu tố HTML thông thường.
Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận với cộng đồng với các tài nguyên hữu ích này.
- Đọc và đăng ký blog Bootstrap chính thức.
- Hỏi và khám phá các cuộc thảo luận github của chúng tôi.
- Trò chuyện với đồng nghiệp bootstrappers trong IRC. Trên máy chủ
4, trong kênh
5. - Trợ giúp thực hiện có thể được tìm thấy tại Stack Overflow [được gắn thẻ
6]. - Các nhà phát triển nên sử dụng từ khóa
7 trên các gói sửa đổi hoặc thêm vào chức năng của Bootstrap khi phân phối thông qua NPM hoặc các cơ chế phân phối tương tự để khám phá tối đa.
Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết những video âm nhạc mới nhất và tuyệt vời.