Nút Bootstrap phản ứng
Người dùng có thể tương tác với trang web của bạn bằng nút React Bootstrap 5. Về kích thước, hình thức và màu sắc, chúng rất dễ thay đổi. Chúng bao gồm một số kiểu nút được xác định trước, mỗi kiểu có chức năng ngữ nghĩa riêng và một số điều khiển khác Show
Nhập thành phần Nút React Bootstrap 5Bạn bắt đầu bằng cách nhập thành phần CDBButton vào dự án của mình để sử dụng thành phần Nút React Bootstrap 5
Nút mặc địnhGiá trị Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
Nút trònThuộc tính 'circle' được sử dụng trên các nút React Bootstrap 5 để làm cho chúng tròn trịa hơn Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
Các nút phác thảoĐể cung cấp cho nút của bạn chỉ là một đường viền, hãy sử dụng nút 'đường viền' Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
Các nút viền ngoài hình trònĐể tạo các nút viền ngoài hình tròn, chúng tôi sẽ sử dụng các thành phần React Bootstrap 5 cho các nút Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối
nút phẳngĐặt thuộc tính 'phẳng' cho thành phần 'CDBBtn' để tạo các nút không có bóng nút Tiểu học Trung họcThành côngNguy hiểmTốiCảnh báoThông tin
Các nút có biểu tượngThành phần chuyên nghiệpTrong hướng dẫn này, chúng tôi cũng sử dụng thành phần CDBIcon cùng với thành phần 0. Thành phần 'CDBIcon' được lồng trong thành phần 'CDBBtn'. Các nút của chúng tôi hiện có các biểu tượng được liên kết với chúng do điều này
Kích thước nútSử dụng thuộc tính'size' để chỉ định mức độ lớn hay nhỏ của nút của bạn ________số 8_______ Nút bị vô hiệu hóaĐể tắt nút của bạn, hãy sử dụng thuộc tính 'đã tắt'
Các đạo cụ bạn có thể sử dụng với thành phần Nút React Bootstrap 5 sẽ được mở rộng trong phần này. Bạn sẽ tìm hiểu những công cụ này làm gì, cách sử dụng chúng trong mã của bạn và giá trị mặc định của chúng là gì Các khả năng hỗ trợ khác cho thành phần 'CDBButton' được bao gồm trong bảng bên dưới NameTypeDefaultDescriptionExampleactionBooleanfalseAdds 1 class, works with Cards 2activeBooleanfalseAdds active class 2blockBooleanfalseCreate block level buttons 2circleBooleanfalseAdds 5 class, works with stepper 2classNameStringAdds custom classes 2colorStringprimaryDetermines button color, accepts CDB predefined color classes 2disabledBooleanfalseDisables button from being clicked 2downloadStringAdds download attribute with provided url 2endingTextStringPositions the button text in one of the selected positions. Những vị trí này bao gồm 1, 2, 3, 4, 5, 6, 7. 2flatBooleanfalseThêm hiệu ứng phẳng cho nút. Đó là nút không có nền và đường viền_______1_______2innerReffunction hoặc StringCho phép truyền chuỗi Tham chiếu, chuỗi này sẽ đính kèm vào nút được hiển thị hoặc phần tử DOM 2văn bản nút nhãnStringPositions 1 hoặc 2. 2onClickfunctionSẽ gọi một chức năng khi nút được nhấp_______1_______2roleStringThêm thuộc tính vai trò cho nút 2sizeStringmediumXác định kích thước nút, giá trị khả dụng. 6. 2socialStringThêm biểu tượng mạng xã hội. 2tagStringbuttonThay đổi thẻ mặc định 2targetString_selfNếu được sử dụng làm liên kết, hãy đặt thuộc tính đích 2typeStringbuttonThêm thuộc tính loại vào nút 2 Xây dựng các dự án hiện đại bằng Bootstrap 5 và ContrastCố gắng tạo các thành phần và trang cho ứng dụng web hoặc trang web từ đầu trong khi duy trì giao diện Người dùng hiện đại có thể rất tẻ nhạt. Đây là lý do tại sao chúng tôi tạo ra Độ tương phản, để giúp giảm đáng kể lượng thời gian chúng tôi dành cho việc đó. để chúng ta có thể tập trung xây dựng một số khía cạnh khác của dự án Chúng ta có thể sử dụng nút trong React không?Các nút cho phép người dùng thực hiện hành động và đưa ra lựa chọn chỉ bằng một lần nhấn. UI UI cho React có sẵn thành phần này cho chúng tôi và nó rất dễ tích hợp. Chúng ta có thể sử dụng thành phần Nút trong ReactJS bằng phương pháp sau.
Làm cách nào để nhóm nút phản hồi nhanh trong Bootstrap?Tôi có thể sử dụng Bootstrap với React không?Bootstrap có thể được sử dụng trực tiếp trên các thành phần 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 . |