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

Nhập thành phần Nút React Bootstrap 5

Bạ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

import { CDBBtn } from "cdbreact";

Nút mặc định

Giá trị color ảnh hưởng đến màu nền của nút

Tiểu học Trung họcThành côngNguy hiểmCảnh báoThông tinÁnh sángTối

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

Nút tròn

Thuộ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

import { CDBBtn, CDBContainer } from "cdbreact";

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

import { CDBBtn, CDBContainer } from "cdbreact";

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

import { CDBBtn, CDBContainer } from "cdbreact";

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

import { CDBBtn, CDBContainer } from "cdbreact";

Các nút có biểu tượng

Thành phần chuyên nghiệp

Trong 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

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

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

import { CDBBtn, CDBIcon, CDBContainer } from "cdbreact";

Kích thước nút

Sử 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'

import { CDBBtn, CDBContainer } from "cdbreact";

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

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

1 class, works with Cards

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2activeBooleanfalseAdds active class

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2blockBooleanfalseCreate block level buttons

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2circleBooleanfalseAdds

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

5 class, works with stepper

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2classNameStringAdds custom classes

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2colorStringprimaryDetermines button color, accepts CDB predefined color classes

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2disabledBooleanfalseDisables button from being clicked

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2downloadStringAdds download attribute with provided url

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2endingTextStringPositions the button text in one of the selected positions. Những vị trí này bao gồm

import { CDBBtn, CDBContainer } from "cdbreact";

1,

import { CDBBtn, CDBContainer } from "cdbreact";

2,

import { CDBBtn, CDBContainer } from "cdbreact";

3,

import { CDBBtn, CDBContainer } from "cdbreact";

4,

import { CDBBtn, CDBContainer } from "cdbreact";

5,

import { CDBBtn, CDBContainer } from "cdbreact";

6,

import { CDBBtn, CDBContainer } from "cdbreact";

7.

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

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

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2văn bản nút nhãnStringPositions

import { CDBBtn, CDBContainer } from "cdbreact";

1 hoặc

import { CDBBtn, CDBContainer } from "cdbreact";

2.

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

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

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2sizeStringmediumXác định kích thước nút, giá trị khả dụng.

import { CDBBtn, CDBContainer } from "cdbreact";

6.

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2socialStringThêm biểu tượng mạng xã hội.

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2tagStringbuttonThay đổi thẻ mặc định

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2targetString_selfNếu được sử dụng làm liên kết, hãy đặt thuộc tính đích

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2typeStringbuttonThêm thuộc tính loại vào nút

import { CDBBtn, CDBContainer } from "cdbreact";

Primary

Secondary

Danger

Success

Dark

Warning

Info

2

Xây dựng các dự án hiện đại bằng Bootstrap 5 và Contrast

Cố 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 .