Cách tốt nhất để sử dụng React-Bootstrap là thông qua gói npm mà bạn có thể cài đặt với 1 (hoặc 2 nếu bạn thích) Show
Nếu bạn định tùy chỉnh các tệp Bootstrap Sass hoặc không muốn sử dụng CDN cho biểu định kiểu, thì cũng có thể hữu ích khi cài đặt vanilla Bootstrap npm install react-bootstrap bootstrap Nhập khẩu các thành phần #Bạn nên nhập các thành phần riêng lẻ như. 3 chứ không phải toàn bộ thư viện. Làm như vậy sẽ chỉ lấy các thành phần cụ thể mà bạn sử dụng, điều này có thể làm giảm đáng kể số lượng mã bạn gửi cho máy khách Toàn cầu trình duyệt #Chúng tôi cung cấp các gói 4 và 5 với tất cả các thành phần được xuất trên đối tượng 0. Các gói này có sẵn trên jsDelivr, cũng như trong gói npm Ví dụ#React-Bootstrap đã bắt đầu repo với một vài ví dụ cơ bản về CodeSandbox. Nhấn vào đây để kiểm tra chúng biểu định kiểu #Vì React-Bootstrap không phụ thuộc vào phiên bản Bootstrap rất chính xác nên chúng tôi không gửi kèm theo bất kỳ CSS nào. Tuy nhiên, một số biểu định kiểu được yêu cầu để sử dụng các thành phần này CSS#Cách thức và kiểu Bootstrap nào bạn đưa vào tùy thuộc vào bạn, nhưng cách đơn giản nhất là đưa vào các kiểu mới nhất từ CDN. Bạn có thể tìm thêm một chút thông tin về lợi ích của việc sử dụng CDN tại đây hỗn xược#Trong trường hợp bạn đang sử dụng Sass, cách đơn giản nhất là đưa các tệp Sass nguồn của Bootstrap vào tệp Sass chính của bạn và sau đó yêu cầu nó trên tệp 1 hoặc 2 của bạn. Điều này áp dụng cho một ứng dụng 3 điển hình trong các trường hợp sử dụng khác, bạn có thể phải thiết lập gói theo lựa chọn của mình để biên dịch biểu định kiểu Sass/SCSS thành CSS Tùy chỉnh Bootstrap#Nếu bạn muốn tùy chỉnh chủ đề Bootstrap hoặc bất kỳ biến Bootstrap nào, bạn có thể tạo tệp Sass tùy chỉnh Và nhập nó vào tệp Sass chính Cách sử dụng nâng cao#Xem tài liệu Bootstrap để biết các trường hợp sử dụng nâng cao hơn và chi tiết về cách tùy chỉnh biểu định kiểu 4 Dự luật API#Với một số thành phần React-Bootstrap nhất định, bạn có thể muốn sửa đổi thành phần hoặc thẻ HTML được hiển thị Nếu bạn muốn giữ tất cả kiểu dáng của một thành phần React-Bootstrap cụ thể nhưng chuyển đổi thành phần được hiển thị cuối cùng (cho dù đó là thành phần React-Bootstrap khác, thành phần tùy chỉnh khác hay thẻ HTML khác), bạn có thể sử dụng prop 4 Ví dụ bên dưới chuyển một anchor đến chỗ dựa 4 trong thành phần 7. Điều này cuối cùng khiến thẻ 8 được hiển thị nhưng có cùng kiểu với thành phần 7 3 Dưới đây là hình minh họa về việc truyền một thành phần React Bootstrap. Nó chứa một thành phần 0 và một thành phần7 đã được cung cấp cho giá đỡ 4. Điều này cuối cùng dẫn đến việc hiển thị thành phần 7 có cùng kiểu với thành phần 0 9 Chủ đề #React-Bootstrap tương thích với các chủ đề Bootstrap hiện có. Chỉ cần làm theo hướng dẫn cài đặt cho chủ đề bạn chọn Nhánh mặc định của chúng tôi là để phát triển bản phát hành Bootstrap 5 của chúng tôi. Đi đến nhánh 6 để xem readme, tài liệu và mã nguồn cho Bootstrap 4 Mục lục
Bắt đầu nhanhMột số tùy chọn bắt đầu nhanh có sẵn
Đọc trang Bắt đầu để biết thông tin về nội dung khung, mẫu, ví dụ, v.v. Trạng thái Bao gồm những gìTrong quá trình tải xuống, bạn sẽ tìm thấy các thư mục và tệp sau đây, nhóm các nội dung chung một cách hợp lý và cung cấp cả các biến thể được biên dịch và rút gọn Nội dung tải xuống0 Chúng tôi cung cấp CSS và JS đã biên dịch ( 3), cũng như CSS và JS đã biên dịch và rút gọn (4). Bản đồ nguồn (60) có sẵn để sử dụng với các công cụ dành cho nhà phát triển của một số trình duyệt nhất định. Các tệp JS đi kèm ( 61 và 62 được rút gọn) bao gồm Popper Lỗi và yêu cầu tính năngCó một lỗi hoặc một yêu cầu tính năng? . Nếu vấn đề hoặc ý tưởng của bạn chưa được giải quyết, vui lòng mở một vấn đề mới Tài liệuTài liệu của Bootstrap, được bao gồm trong repo này trong thư mục gốc, được xây dựng bằng Hugo và được lưu trữ công khai trên Trang GitHub tại https. //getbootstrap. com/. Các tài liệu cũng có thể được chạy cục bộ Tìm kiếm tài liệu được cung cấp bởi Algolia's DocSearch. Làm việc trên tìm kiếm của chúng tôi? Chạy tài liệu cục bộ
Tìm hiểu thêm về cách sử dụng Hugo bằng cách đọc tài liệu của nó Tài liệu cho các phiên bản trướcBạn có thể tìm thấy tất cả các tài liệu phát hành trước đây của chúng tôi trên https. //getbootstrap. com/docs/phiên bản/ Các bản phát hành trước và tài liệu của chúng cũng có sẵn để tải xuống Đóng gópVui lòng đọc qua hướng dẫn đóng góp của chúng tôi. Bao gồm các hướng dẫn để mở các vấn đề, tiêu chuẩn mã hóa và ghi chú về phát triển Ngoài ra, nếu yêu cầu kéo của bạn chứa các bản vá hoặc tính năng JavaScript, bạn phải bao gồm các bài kiểm tra đơn vị có liên quan. Tất cả HTML và CSS phải tuân theo Hướng dẫn về mã do Mark Otto duy trì Tùy chọn trình chỉnh sửa có sẵn trong cấu hình trình chỉnh sửa để dễ dàng sử dụng trong các trình soạn thảo văn bản phổ biến. Đọc thêm và tải xuống plugin tại https. // biên tập viên. tổ chức/ Cộng đồngNhận thông tin cập nhật về quá trình phát triển của Bootstrap và trò chuyện với những người bảo trì dự án và thành viên cộng đồng
lập phiên bảnĐể minh bạch chu kỳ phát hành của chúng tôi và cố gắng duy trì khả năng tương thích ngược, Bootstrap được duy trì theo nguyên tắc Phiên bản ngữ nghĩa. Đôi khi chúng tôi làm hỏng việc, nhưng chúng tôi tuân thủ các quy tắc đó bất cứ khi nào có thể Xem phần Bản phát hành của dự án GitHub của chúng tôi để biết các thay đổi cho từng phiên bản phát hành của Bootstrap. Các bài đăng thông báo phát hành trên blog Bootstrap chính thức chứa các bản tóm tắt về những thay đổi đáng chú ý nhất được thực hiện trong mỗi bản phát hành người sáng tạoĐánh dấu Otto
Jacob Thornton
Cảm ơnCảm ơn BrowserStack đã cung cấp cơ sở hạ tầng cho phép chúng tôi thử nghiệm trên các trình duyệt thực Cảm ơn Netlify đã cung cấp cho chúng tôi Bản xem trước triển khai nhà tài trợHỗ trợ dự án này bằng cách trở thành nhà tài trợ. Logo của bạn sẽ hiển thị ở đây với một liên kết đến trang web của bạn. [Trở thành nhà tài trợ] ủng hộCảm ơn tất cả những người ủng hộ chúng tôi. 🙏[Trở thành người ủng hộ] Bản quyền và giấy phépBản quyền về mã và tài liệu 2011–2022 Bootstrap Authors và Twitter, Inc. Mã được phát hành theo Giấy phép MIT. Tài liệu được phát hành theo Creative Commons Bootstrap trong JS là gì?Bootstrap là khung giao diện người dùng miễn phí để phát triển web nhanh hơn và dễ dàng hơn . Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác, cũng như các plugin JavaScript tùy chọn.
Bootstrap CSS hay JS?Bootstrap là khung CSS phổ biến nhất để phát triển các trang web đáp ứng và ưu tiên thiết bị di động.
Làm cách nào để đưa Bootstrap vào JS?Nhập JavaScript
. Bootstrap phụ thuộc vào jQuery và Popper, chúng được định nghĩa là peerDependencies, điều này có nghĩa là bạn sẽ phải đảm bảo thêm cả hai vào gói của mình. json bằng cách sử dụng npm install --save jquery popper. js. import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/dropdown'; .. Bootstrap is dependent on jQuery and Popper, these are defined as peerDependencies , this means that you will have to make sure to add both of them to your package. json using npm install --save jquery popper. js .
Bootstrap JS hoạt động như thế nào?Nói một cách đơn giản, Bootstrap là một bộ sưu tập lớn các đoạn mã linh hoạt và có thể tái sử dụng được viết bằng CSS, HTML và JavaScript . Vì nó cũng là một khung nên tất cả các nền tảng đã được đặt sẵn để phát triển web đáp ứng và tất cả những gì nhà phát triển phải làm là chèn mã vào hệ thống lưới được xác định trước. |
