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
38 [hoặc
39 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ũ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ư.
40 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
41 và
42 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ữ nguyên 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 chỗ dựa
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
Tôi đã hoàn thành khóa học và đang xây dựng trang web của riêng mình. Tuy nhiên, dường như tôi không thể tìm ra cách liên kết HTML, CSS và bootstrap với nhau. Đây là mã của tôi
0
Liên kết giữa HTML và CSS hoạt động, tên tệp HTML của tôi là 'mypage. html' và tên tệp CSS của tôi là 'bản định kiểu. css'. Xin vui lòng giúp đỡ?
Nhà phát triển web toàn diện học các mẹo mới mỗi ngày một lần. Người đam mê công nghệ web. Công cụ hack @theflutterwave. Sử dụng Bootstrap với React. Hướng dẫn với các ví dụNgày 23 tháng 6 năm 2022 13 phút đọc 3735
Ghi chú của biên tập viên. Bài đăng này đã được cập nhật vào ngày 23 tháng 6 năm 2022 để đảm bảo tất cả thông tin đều cập nhật và thêm một phần về cách khắc phục sự cố Bootstrap không hoạt động trong React
Sự phổ biến ngày càng tăng của các ứng dụng một trang trong vài năm qua đã dẫn đến một loạt các khung JavaScript, trong đó phổ biến nhất là React. Điều này trùng hợp với sự xuất hiện của các khung CSS được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng web đáp ứng
Nếu React là khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web, thì Bootstrap là khung CSS phổ biến nhất, cung cấp năng lượng cho hàng triệu trang web trên internet. Trong hướng dẫn này, chúng ta sẽ đi qua
- Giới thiệu sơ lược về JavaScript và CSS frameworks
- Cách thêm Bootstrap vào React
- Thêm Bootstrap vào React bằng Bootstrap CDN
- Nhập Bootstrap vào React dưới dạng phụ thuộc
- Cài đặt gói React Bootstrap như
- Sử dụng các lớp và thành phần Bootstrap tích hợp
- Ví dụ sử dụng
- Ví dụ sử dụng
- Ví dụ sử dụng
- Tạo một ứng dụng React chi tiết hơn với Bootstrap
- Cách khắc phục sự cố Bootstrap không hoạt động trong React
Nếu bạn mới bắt đầu với những framework này, tôi khuyên bạn nên đọc lướt qua tài liệu chính thức về React và Bootstrap. Tôi cũng khuyến khích bạn xem video hướng dẫn toàn diện bên dưới để tìm hiểu sâu hơn
Giới thiệu sơ lược về JavaScript và CSS frameworks
Có nhiều khung JavaScript bạn có thể chọn, bao gồm Angular, React, Vue. js, Ember — danh sách tiếp tục. Nhờ những tùy chọn phong phú này, không còn cần thiết phải sử dụng thư viện DOM, chẳng hạn như jQuery, để xây dựng các ứng dụng web
Ngoài ra, nếu bạn là nhà phát triển giao diện người dùng, gần như chắc chắn bạn đã sử dụng hoặc ít nhất đã nghe nói về Bootstrap, Foundation và Bulma. Đây đều là các khung CSS đáp ứng [ưu tiên thiết bị di động] với các tính năng mạnh mẽ và tiện ích tích hợp
Như chúng tôi đã đề cập, React và Bootstrap hiện là các khung JavaScript và CSS phổ biến nhất, tương ứng. Tiếp theo, hãy xem cách thêm Bootstrap vào React
Cách thêm Bootstrap vào React
Ba cách phổ biến nhất để thêm Bootstrap vào ứng dụng React của bạn là
- Sử dụng Bootstrap CDN
- Nhập Bootstrap vào React dưới dạng phụ thuộc
- Cài đặt gói React Bootstrap như
Hãy xem xét từng chi tiết này một cách chi tiết hơn
Thêm Bootstrap vào React bằng Bootstrap CDN
Bootstrap CDN là cách dễ nhất để thêm Bootstrap vào ứng dụng React của bạn. Không cần cài đặt thêm hoặc tải xuống
Bạn sẽ chỉ phải bao gồm một liên kết đến CDN trong phần đầu của tệp nhập ứng dụng của bạn. Trong một ứng dụng React điển hình được tạo bằng
16, ứng dụng đó sẽ nằm trong tệp
17
Vì chúng tôi muốn bao gồm phiên bản ổn định hiện tại của Bootstrap, liên kết của chúng tôi sẽ trông như thế này
9
Nếu dự án của bạn cũng yêu cầu sử dụng các thành phần JavaScript đi kèm với Bootstrap, chẳng hạn như chuyển đổi phương thức, trình đơn thả xuống hoặc thanh điều hướng, chúng tôi sẽ cần liên kết tệp
18, được biên dịch sẵn với Popper. js
Chúng tôi có thể làm điều này bằng cách đặt thẻ
19 sau đây ở gần cuối trang đánh dấu mục nhập của chúng tôi, ngay trước khi đóng thẻ 203
Sau khi liên kết CSS Bootstrap và CDN Javascript đi kèm, mã hoàn chỉnh cho tệp
17 của chúng ta sẽ như thế này
1
Giờ đây, bạn có thể bắt đầu sử dụng các lớp Bootstrap tích hợp sẵn và các thành phần JavaScript trong các thành phần ứng dụng React của mình
Nhập Bootstrap vào React dưới dạng phụ thuộc
Nếu bạn đang sử dụng công cụ xây dựng hoặc gói mô-đun, chẳng hạn như
22, thì đây sẽ là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React của bạn. Bạn có thể dễ dàng bắt đầu cài đặt bằng cách chạy bên dưới2Lệnh này sẽ cài đặt phiên bản Bootstrap mới nhất. Sau khi quá trình cài đặt hoàn tất, chúng tôi có thể đưa nó vào tệp mục nhập của ứng dụng
8Trong trường hợp dự án được xây dựng bằng
16, dự án đó sẽ nằm trong tệp 24. Toàn bộ nội dung của tệp sẽ trông như thế này sau khi nhập
1
Như được hiển thị trong mã ở trên, chúng tôi đã nhập cả Bootstrap CSS và tệp JavaScript được liên kết của nó. Chúng tôi cũng đảm bảo nhập Bootstrap trước tệp CSS chính của chúng tôi
25 để dễ dàng thay đổi kiểu dáng mặc định của Bootstrap với tệp này như mong muốnKhi quá trình này hoàn tất, chúng ta có thể tiếp tục và bắt đầu sử dụng các lớp Bootstrap tích hợp trong các thành phần ứng dụng React của mình
Cài đặt gói React Bootstrap như
14 hoặc
15
Cách thứ ba để thêm Bootstrap vào ứng dụng React là sử dụng gói đã xây dựng lại các thành phần Bootstrap được thiết kế để hoạt động như các thành phần React
Lợi ích của phương pháp này là trên thực tế, tất cả các thành phần Bootstrap đều được đóng gói dưới dạng thành phần React trong các thư viện này. Ví dụ: giờ đây, một thành phần phương thức Bootstrap đầy đủ có thể dễ dàng được nhập dưới dạng
28 trong ứng dụng React của chúng tôiMặc dù có nhiều gói khác nhau mà bạn có thể sử dụng để cài đặt Boostrap trong React, hai gói phổ biến nhất bao gồm
29 và 80. Cả hai gói đều là những lựa chọn tuyệt vời để sử dụng Bootstrap với các ứng dụng React và chia sẻ các đặc điểm rất giống nhauSử dụng các lớp và thành phần Bootstrap tích hợp
Bootstrap có thể được sử dụng trực tiếp trên các phần tử và thành phần trong ứng dụng React của bạn bằng cách áp dụng các lớp tích hợp giống như bất kỳ lớp nào khác. Để minh họa việc sử dụng các lớp và thành phần Bootstrap, hãy tạo một thành phần React của trình chuyển đổi chủ đề cơ bản
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Như được hiển thị trong bản trình diễn này, chúng tôi đang sử dụng một thành phần thả xuống có sẵn trong Bootstrap để triển khai trình chuyển đổi chủ đề của chúng tôi. Chúng tôi cũng đang sử dụng các lớp
81 tích hợp để đặt kích thước và màu sắc của nút thả xuốngChúng tôi sẽ tiếp tục và viết mã cho thành phần trình chuyển đổi chủ đề của chúng tôi. Đảm bảo bạn đã thiết lập ứng dụng React. Trong thư mục
82 của bạn, hãy tạo một tệp mới có tên là 83 cho thành phần này và thêm đoạn mã sau vào đó1
Trong đoạn mã trên, chúng tôi đã tạo một thành phần trình chuyển đổi chủ đề rất đơn giản bằng cách sử dụng thành phần thả xuống của Bootstrap và một vài lớp tích hợp
Sử dụng hook
84 của React, chúng ta đã tạo một trạng thái 85 và đặt giá trị ban đầu của nó thành null, cũng như xác định phương thức 86 để sửa đổi trạng thái này. Sau đó, chúng tôi cũng đã tạo một hàm 87, đặt lại giá trị của chủ đề thành nullTiếp theo, trong phần đánh dấu thành phần của chúng tôi, chúng tôi đã hiển thị danh sách thả xuống Bootstrap với bốn mục thả xuống. Ba mục đầu tiên cho phép chúng tôi chuyển đổi giữa các chủ đề khác nhau —
88, 89 và10 — và mục thả xuống cuối cùng cho phép chúng tôi đặt lại giá trị chủ đề thành null bằng hàm
11
Trong ví dụ này, chúng ta đã thấy việc sử dụng các lớp và thành phần tích hợp sẵn của Bootstrap trong ứng dụng React của chúng ta dễ dàng như thế nào. Để hiểu rõ hơn về cách hoạt động của các gói React Bootstrap, hãy tạo lại ứng dụng trình chuyển đổi chủ đề của chúng ta bằng cách sử dụng các thành phần do
14 và
15 cung cấp trong khi viết mã giới hạn
Ví dụ sử dụng
14
Giả sử rằng bạn đã thiết lập ứng dụng React, hãy cài đặt
14 trong ứng dụng của chúng ta bằng lệnh bên dưới
4
Điều đáng nói là
14 không được cài đặt sẵn Bootstrap; . e. , các tệp CSS và JavaScript của nó. Gói chỉ xuất Bootstrap phổ biến dưới dạng các thành phần React, đó là lý do tại sao chúng ta cũng có thể thấy Bootstrap được thêm vào trong lệnh cài đặt ở trên
Khi chúng tôi đã cài đặt
14, chúng tôi có thể nhập bất kỳ thành phần nào. Ví dụ: nhập thành phần
18 sẽ như thế này
8
Để tiếp tục với ví dụ về trình chuyển đổi chủ đề của chúng tôi, hãy tạo một tệp mới có tên
83 trong thư mục 82 của dự án của chúng tôi và đặt nội dung sau vào đó1
Trong đoạn mã trên, chúng tôi đã cố gắng sao chép ví dụ ban đầu của mình nhiều nhất có thể bằng cách sử dụng
14
Các bài viết hay khác từ LogRocket
- Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
- Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
- Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của Node
- Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
- Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
- So sánh NestJS với. Thể hiện. js
Chúng tôi đã nhập ba thành phần từ gói
14; . Và giống như chúng tôi đã làm trước đây, chúng tôi đã sử dụng móc nối 84 để tạo trạng thái chủ đề của mình và xác định một hàm đặt giá trị của 85 thành
18
Cuối cùng, chúng tôi sẽ sửa đổi tệp
19 để trông giống như đoạn mã sau30
Thay đổi duy nhất mà chúng tôi đã thực hiện đối với tệp này là loại bỏ trang bắt đầu
16 và làm cho nó hiển thị thành phần
41 của chúng tôi thay vào đó
Nếu chúng tôi chạy ứng dụng ngay bây giờ bằng lệnh
42 hoặc
43, ứng dụng của chúng tôi sẽ bắt đầu trên cổng
44 và sẽ trông giống như bản demo sau
Ví dụ sử dụng
15
Gói
15 khá giống với
14, với những khác biệt nhỏ ở những thứ như tên thành phần và tên chống đỡ. Tuy nhiên,
14 cũ hơn một chút so với
15, điều này có thể đã góp phần làm cho phạm vi áp dụng của nó rộng hơn
Chúng ta có thể dễ dàng thêm
15 vào dự án phản ứng của mình bằng lệnh bên dưới31
Mã cho thành phần
41 của chúng tôi sẽ như thế này32
Khi so sánh cả hai tệp mã từ ví dụ
82 và
14, đặc biệt là hành động kích hoạt chuyển đổi thả xuống của chúng tôi, chúng ta có thể thấy rằng
15 tận dụng React Hook để sử dụng các tính năng của React nhiều hơn, trong khi
14 phụ thuộc nhiều hơn vào thuộc tính thành phần
Nếu chúng tôi chạy ứng dụng ngay bây giờ bằng lệnh
42 hoặc
43, ứng dụng của chúng tôi sẽ bắt đầu trên cổng
44 và sẽ trông giống như bản demo sau
Tạo một ứng dụng React chi tiết hơn với Bootstrap
Hãy đẩy mạnh điều này hơn một chút để tạo một ứng dụng với một số chi tiết hơn. Chúng tôi sẽ cố gắng sử dụng càng nhiều lớp và thành phần Bootstrap càng tốt. Chúng tôi cũng sẽ sử dụng
15 để thêm Bootstrap vào React. Đây là kết quả cuối cùng của chúng ta sẽ như thế nào
Hãy bắt đầu bằng cách tạo một ứng dụng mới với
1633
Tiếp theo, hãy tiếp tục và cài đặt các phụ thuộc như sau
34Lưu ý ở đây rằng chúng tôi đã cài đặt
11 làm phụ thuộc. Axios là ứng dụng khách HTTP dựa trên lời hứa dành cho trình duyệt và Node. js. Nó sẽ cho phép chúng tôi tìm nạp các bài đăng từ API Bacon Ipsum JSON
Hãy sửa đổi một chút đối với tệp
24 để bao gồm các tệp CSS và JavaScript được rút gọn trong Bootstrap. Nó sẽ giống như đoạn mã sau35Tiếp theo, chúng tôi sẽ tạo một thư mục mới có tên
13 bên trong thư mục 82 của dự án của chúng tôi. Trong thư mục
13 mới này, hãy tạo một tệp mới có tên là
16 và cập nhật nó với nội dung sau36
Thành phần chúng ta vừa tạo trong đoạn mã trên là thành phần
17, chứa menu điều hướng. Tiếp theo, chúng ta sẽ tạo một tệp mới có tên là
18 — cũng nằm trong thư mục
13 — với nội dung như sau37
Khi đã xong, hãy tạo một tệp mới có tên
300 trong thư mục thành phần và thêm đoạn mã sau vào đó38Trong đoạn mã trên, chúng tôi đã tạo một thành phần
301 hiển thị một bài đăng trên trang. Chúng tôi đã khởi tạo trạng thái của thành phần bằng cách đặt thuộc tính post thành18
Sau khi thành phần được gắn kết, chúng tôi đã sử dụng móc nối
303 và Axios để truy xuất một bài đăng ngẫu nhiên gồm bốn đoạn từ API Bacon Ipsum JSON và thay đổi trường bài đăng của chúng tôi thành dữ liệu được trả về từ API nàyCuối cùng, sửa đổi tệp
19 để trông giống như đoạn mã sau39
Trong đoạn mã trên, chúng tôi chỉ đơn giản bao gồm các thành phần
17, 306 và 301 trong thành phần 308. Lưu ý cách chúng tôi sử dụng một vài lớp tiện ích đáp ứng do Bootstrap cung cấp để điều chỉnh ứng dụng của chúng tôi với các kích thước màn hình khác nhau
Nếu bạn chạy ứng dụng ngay bây giờ bằng lệnh
42 hoặc
43, ứng dụng của bạn sẽ bắt đầu trên cổng 3000 và trông giống hệt như ảnh chụp màn hình mà chúng ta đã thấy trước đó
Cách khắc phục sự cố Bootstrap không hoạt động trong React
Lý do duy nhất Bootstrap có thể không hoạt động bình thường trong ứng dụng React của bạn là nếu bạn chưa liên kết nó đúng cách
Nếu bạn đang sử dụng Bootstrap CDN, hãy kiểm tra kỹ xem URL CDN có hợp lệ không và URL đó có được thêm vào bằng cách sử dụng thẻ
311 trong phần đầu của trang nhập ứng dụng của bạn khôngNếu bạn đang sử dụng gói React Bootstrap, hãy đảm bảo rằng bạn đã cài đặt gói đó đúng cách và nhập gói đó vào trang nhập ứng dụng của mình, như chúng tôi đã đề cập trước đó
Phần kết luận
Trong hướng dẫn này, chúng tôi đã khám phá một số cách khác nhau để chúng tôi có thể tích hợp Bootstrap với các ứng dụng React của mình. Chúng tôi cũng đã thấy cách chúng tôi có thể sử dụng hai trong số các thư viện React Bootstrap phổ biến nhất, đó là
14 và
15
Chúng tôi chỉ sử dụng một vài thành phần Bootstrap trong hướng dẫn này, chẳng hạn như cảnh báo, huy hiệu, danh sách thả xuống, thanh điều hướng, điều hướng, biểu mẫu, nút, thẻ, v.v. Vẫn còn một vài thành phần Bootstrap mà bạn có thể thử nghiệm, chẳng hạn như bảng, phương thức, chú giải công cụ, băng chuyền, jumbotron, phân trang, tab, v.v.
Bạn có thể kiểm tra tài liệu về các gói mà chúng tôi đã sử dụng trong hướng dẫn này để tìm hiểu thêm các cách sử dụng chúng. Mã nguồn cho tất cả các ứng dụng demo trong hướng dẫn này có thể được tìm thấy trên GitHub
Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào các ứng dụng React sản xuất của bạn
Gỡ lỗi ứng dụng React có thể khó khăn, đặc biệt khi người dùng gặp sự cố khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux, tự động hiển thị các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket.LogRocket kết hợp tính năng phát lại phiên, phân tích sản phẩm và theo dõi lỗi – trao quyền cho các nhóm phần mềm để tạo ra trải nghiệm sản phẩm di động và web lý tưởng. Điều đó có ý nghĩa gì đối với bạn?
Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn để nhanh chóng hiểu điều gì đã xảy ra.
Không còn cảnh báo ồn ào. Theo dõi lỗi thông minh cho phép bạn phân loại và phân loại các vấn đề, sau đó học hỏi từ điều này. Nhận thông báo về các sự cố có ảnh hưởng đến người dùng, không phải thông báo sai. Ít cảnh báo hơn, nhiều tín hiệu hữu ích hơn
Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn
Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình — bắt đầu theo dõi miễn phí
Chia sẻ cái này
Vui mừng Chinda Theo dõi Nhà phát triển web toàn diện đang học các mẹo mới mỗi ngày một lần. Người đam mê công nghệ web. Công cụ hack @theflutterwave.
- Chưa được phân loại
- #phản ứng
« Thời điểm và cách chọn giữa truy vấn phương tiện và truy vấn vùng chứa
Hiệu suất trong Unity.
314, 315 và 316 so với. coroutines, Hệ thống công việc C# và trình biên dịch liên tục »