Tôi có thể sử dụng phương thức Bootstrap trong React không?

Phương thức là các thành phần web hữu ích để tạo bố cục hấp dẫn cho thông báo người dùng, hộp đèn hoặc nội dung tùy chỉnh. Chúng tôi có thể giữ bất cứ thứ gì bên trong thành phần phương thức. Phương thức là một thành phần bật lên được kích hoạt bằng bất kỳ hành động cụ thể nào

Bootstrap hỗ trợ một thành phần phương thức được xác định trước với ba phần. tiêu đề phương thức, chân trang phương thức và nội dung phương thức. Mỗi phần được tùy chỉnh theo cách như tên của chúng. Phần tiêu đề sẽ được đặt ở trên cùng và phần chân trang sẽ được đặt ở dưới cùng của vùng chứa

Thành phần phương thức yêu cầu JavaScript để chuyển đổi trạng thái;

Các phương thức được hiển thị trên đầu mọi thành phần khác và loại bỏ cuộn trong khi hiển thị nó để nội dung phương thức có thể cuộn thay vì thành phần khác. Khi chúng ta chọn phần tử đóng của phương thức, nó sẽ không được đếm

Bootstrap không hỗ trợ các phương thức lồng nhau; . Đối với các phương thức lồng nhau, chúng tôi có thể sử dụng bất kỳ thư viện bên thứ ba nào, chẳng hạn như @restart/ui

Hãy hiểu cách sử dụng thành phần phương thức bằng React Bootstrap

Làm cách nào để tạo Modal bằng React Bootstrap?

React Bootstrap hỗ trợ thành phần để tạo phương thức. Chúng tôi có thể sử dụng,, và thành phần để chỉ định nội dung phương thức

Thành phần được nhập như sau

Xem xét ví dụ dưới đây

Ứng dụng. js

đầu ra

Từ đầu ra trên, chúng tôi đã tạo một thùng chứa phương thức. Tuy nhiên, hiện tại nó là một thùng chứa tĩnh vì chúng tôi không chỉ định trạng thái mở và đóng cho nó. Vì vậy, nó sẽ được hiển thị trên trang web. Để ẩn nó theo mặc định, chúng ta cần đặt trạng thái của nó thành false theo mặc định;

Hãy hiểu cách hiển thị và ẩn một phương thức

Làm cách nào để chuyển đổi Bootstrap Modal?

Để chuyển đổi một phương thức, chúng ta cần xử lý trạng thái phương thức. Chúng ta sẽ tạo một trạng thái [show, setShow] bằng cách sử dụng hook useState để hiển thị và ẩn thành phần phương thức

Hãy hiểu nó với ví dụ dưới đây

đầu ra

Đoạn mã trên sẽ hiển thị một thành phần nút vì chúng tôi đã đặt trạng thái mặc định của thành phần phương thức là sai

Khi ta click vào nút Launch modal nó sẽ cập nhật trạng thái của modal và hiển thị như sau

Tương tự khi chúng ta click vào nút close nó sẽ cập nhật trạng thái modal bằng cách dùng hàm modalClose và đóng nó lại

Do đó, chúng ta có thể tạo và chuyển đổi một thành phần phương thức bằng cách sử dụng React Bootstrap và hook useEffect

Phương thức với phông nền tĩnh

Theo mặc định, phương thức của Bootstrap được thiết kế để nếu chúng ta nhấp vào bên ngoài thành phần phương thức, nó sẽ bị đóng. Tuy nhiên, chúng ta có thể ghi đè hành vi này bằng cách tạo phông nền tĩnh

Để tạo phông nền ở dạng tĩnh, chúng ta có thể chuyển giá trị chống đỡ phông nền là tĩnh. Khi phông nền được chỉ định là tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài thành phần

Xem xét ví dụ dưới đây

đầu ra

Thành phần phương thức trên sẽ được mở bằng cách nhấp vào nút Khởi chạy Mô hình và sẽ chỉ đóng bằng cách nhấp vào nút đóng hoặc biểu tượng loại bỏ. Nó sẽ đóng khi nhấp vào bên ngoài cửa sổ bật lên

Xóa Hoạt ảnh khỏi Cửa sổ Phương thức

Theo mặc định, nếu một phương thức Bootstrap được khởi chạy, nó sẽ mở dễ dàng bằng hoạt ảnh. Chúng tôi có thể loại bỏ nó bằng cách chuyển giá trị prop hoạt hình là sai

Để khởi chạy và đóng một phương thức không có hoạt ảnh, hãy chuyển giá trị bên dưới cho thành phần phương thức

Nó sẽ khởi chạy và đóng hoạt ảnh mà không có bất kỳ hoạt ảnh nào

Xem xét ví dụ dưới đây

Phương thức căn giữa theo chiều dọc

Chúng ta có thể căn giữa cửa sổ phương thức theo chiều dọc bằng cách chuyển giá đỡ được căn giữa cho thành phần phương thức. Chúng tôi không cần phải viết thủ công bất kỳ mã CSS nào để căn giữa cửa sổ bật lên phương thức

Xem xét ví dụ dưới đây

đầu ra

Kích thước phương thức

React Bootstrap cho phép chúng tôi chỉ định kích thước phương thức bằng cách chuyển size prop trong thành phần phương thức. Chúng ta có thể chỉ định sm và lg làm giá trị để chỉ định kích thước của phương thức

Xem xét ví dụ dưới đây

phương thức nhỏ

đầu ra

phương thức lớn

đầu ra

Chế độ toàn màn hình

Chống đỡ toàn màn hình cho phép chúng tôi hiển thị phương thức trên toàn màn hình. Trong Bootstrap 5, chúng ta có thể chỉ định các điểm dừng khác nhau để tạo chế độ toàn màn hình

Chế độ Bootstrap có hoạt động trong React không?

Làm cách nào để nhập phương thức trong bootstrap React?

Làm cách nào để đáp ứng chế độ khởi động React?

Bootstrap có tốt cho React không?