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
0 [hoặc
1 nếu bạn thích]
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ài đặt cũng có thể hữu ích
npm install react-bootstrap bootstrap
Nhập thành phần
Bạn nên nhập các thành phần riêng lẻ như.
2 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
3 và
4 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
Bạn bao gồm cách thức và kiểu Bootstrap nào tùy thuộc vào bạn, nhưng cách đơn giản nhất là bao gồm 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
ngổ ngáo
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
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 Prop 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
Bootstrap sử dụng tập lệnh npm cho hệ thống xây dựng của nó. gói của chúng tôi. json bao gồm các phương thức thuận tiện để làm việc với khung, bao gồm biên dịch mã, chạy thử nghiệm, v.v.
Để sử dụng hệ thống xây dựng của chúng tôi và chạy tài liệu của chúng tôi cục bộ, bạn sẽ cần một bản sao các tệp nguồn của Bootstrap và Nút. Thực hiện theo các bước sau và bạn sẽ sẵn sàng khuấy động
Khi hoàn thành, bạn sẽ có thể chạy các lệnh khác nhau được cung cấp từ dòng lệnh
Sử dụng tập lệnh npm
gói của chúng tôi. json bao gồm nhiều nhiệm vụ để phát triển dự án. Chạy
5 để xem tất cả các tập lệnh npm trong thiết bị đầu cuối của bạn. Nhiệm vụ chính bao gồmMô tả nhiệm vụ
6Biên dịch CSS và JavaScript, xây dựng tài liệu và khởi động máy chủ cục bộ.
7Tạo thư mục
8 với các tệp đã biên dịch. Yêu cầu Sass, Autoprefixer và terser.
9Chạy thử nghiệm cục bộ sau khi chạy
7____31Xây dựng và chạy tài liệu cục bộ
Bắt đầu với Bootstrap qua npm với dự án khởi động của chúng tôi. Truy cập kho lưu trữ mẫu twbs/bootstrap-npm-starter để xem cách xây dựng và tùy chỉnh Bootstrap trong dự án npm của riêng bạn. Bao gồm trình biên dịch Sass, Autoprefixer, Stylelint, PurgeCSS và Biểu tượng Bootstrap
ngổ ngáo
Bootstrap sử dụng Dart Sass để biên dịch các tệp nguồn Sass của chúng tôi thành các tệp CSS [có trong quy trình xây dựng của chúng tôi] và chúng tôi khuyên bạn nên làm như vậy nếu bạn đang biên dịch Sass bằng đường dẫn nội dung của riêng mình. Trước đây chúng tôi đã sử dụng Node Sass cho Bootstrap v4, nhưng LibSass và các gói được xây dựng trên nó, bao gồm cả Node Sass, hiện không được dùng nữa
Dart Sass sử dụng độ chính xác làm tròn là 10 và vì lý do hiệu quả không cho phép điều chỉnh giá trị này. Chúng tôi không hạ thấp độ chính xác này trong quá trình xử lý thêm CSS đã tạo của chúng tôi, chẳng hạn như trong quá trình thu nhỏ, nhưng nếu bạn chọn làm như vậy, chúng tôi khuyên bạn nên duy trì độ chính xác ít nhất là 6 để tránh sự cố với việc làm tròn trình duyệt
tự động sửa lỗi
Bootstrap sử dụng Autoprefixer [có trong quy trình xây dựng của chúng tôi] để tự động thêm tiền tố của nhà cung cấp vào một số thuộc tính CSS khi xây dựng. Làm như vậy giúp chúng tôi tiết kiệm thời gian và viết mã bằng cách cho phép chúng tôi viết các phần chính của CSS một lần duy nhất trong khi loại bỏ nhu cầu sử dụng mixin của nhà cung cấp như các mixin được tìm thấy trong v3
Chúng tôi duy trì danh sách các trình duyệt được hỗ trợ thông qua Autoprefixer trong một tệp riêng trong kho lưu trữ GitHub của chúng tôi. Nhìn thấy. browserslistrc để biết chi tiết
RTLCSS
Bootstrap sử dụng RTLCSS để xử lý CSS đã biên dịch và chuyển đổi chúng thành RTL – về cơ bản thay thế các thuộc tính nhận biết hướng ngang [ví dụ:.
2] với đối diện của họ. Nó cho phép chúng tôi chỉ viết CSS của mình một lần duy nhất và thực hiện các chỉnh sửa nhỏ bằng cách sử dụng các chỉ thị giá trị và điều khiển RTLCSSTài liệu địa phương
Chạy tài liệu của chúng tôi cục bộ yêu cầu sử dụng Hugo, được cài đặt thông qua gói npm hugo-bin. Hugo là trình tạo trang tĩnh cực nhanh và có thể mở rộng, cung cấp cho chúng tôi. cơ bản bao gồm, các tệp, mẫu dựa trên Markdown, v.v. Đây là cách để bắt đầu
- Chạy qua phần trên để cài đặt tất cả các phụ thuộc
- Từ thư mục gốc 3, chạy 1 trong dòng lệnh
- Mở
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ó
Xử lý sự cố
Nếu bạn gặp sự cố khi cài đặt các phần phụ thuộc, hãy gỡ cài đặt tất cả các phiên bản phần phụ thuộc trước đó [toàn cầu và cục bộ]. Sau đó, chạy lại
61