Sử dụng các kiểu nút tùy chỉnh của Bootstrap cho các hành động trong biểu mẫu, hộp thoại, v.v. với sự hỗ trợ cho nhiều kích cỡ, trạng thái, v.v.
ví dụ
Sử dụng bất kỳ loại kiểu nút có sẵn nào để nhanh chóng tạo nút được tạo kiểu. Chỉ cần sửa đổi giá trị
1import Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
import Button from 'react-bootstrap/Button';
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
Link
export default TypesExample;
các nút phác thảo
Để có cảm giác chạm nhẹ hơn, các Nút cũng có các biến thể
2 không có màu nềnimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
import Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
Thông thường các thành phần sẽ hiển thị một phần tử HTML. Tuy nhiên, bạn có thể kết xuất bất cứ thứ gì bạn muốn, thêm phần tử
3 sẽ tự động hiển thị phần tửimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
4. Bạn có thể sử dụng giá đỡimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
5 để hiển thị bất cứ điều gì trái tim bạn mong muốn. React Bootstrap sẽ đảm nhận các vai trò ARIA thích hợp cho bạnimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
Nút liên kết{' '}import Button from 'react-bootstrap/Button';
function TagTypesExample[] {
{''}{''}
xuất TagTypesExample mặc định;
kích thước
Fancy nút lớn hơn hoặc nhỏ hơn?
import Button from 'react-bootstrap/Button';
xuất SizesExample mặc định;
nút chặn
Tạo các ngăn xếp đáp ứng các “nút chặn” có chiều rộng đầy đủ, giống như trong Bootstrap 4 với sự kết hợp giữa các tiện ích hiển thị và khoảng cách của chúng tôi
import Button from 'react-bootstrap/Button';
xuất BlockExample mặc định;
trạng thái hoạt động
Để đặt trạng thái hoạt động của nút, chỉ cần đặt giá trị
8 của thành phầnimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
import Button from 'react-bootstrap/Button';
xuất ActiveExample mặc định;
trạng thái bị vô hiệu hóa
Làm cho các nút trông không hoạt động bằng cách thêm giá trị
9 vàoimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
import Button from 'react-bootstrap/Button';
function DisabledExample[] {
xuất khẩu mặc định DisabledExample;
Coi chừng.
4phần tử không tự nhiên hỗ trợ thuộc tínhimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
9. Trong các trình duyệt hỗ trợ nó, điều này được xử lý theo kiểuimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
2 nhưng không phải tất cả các trình duyệt đều hỗ trợ nóimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
React Bootstrap sẽ ngăn bất kỳ trình xử lý
3 nào kích hoạt bất kể phần tử được hiển thịimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
Trạng thái tải nút
Khi kích hoạt một hành động không đồng bộ từ một nút, đó là một mẫu UX tốt để cung cấp cho người dùng phản hồi về trạng thái tải, điều này có thể dễ dàng thực hiện bằng cách cập nhật
s props từ một thay đổi trạng thái như dưới đâyimport React, { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';
function simulateNetworkRequest[] {
return new Promise[[resolve] => setTimeout[resolve, 2000]];
const [isLoading, setLoading] = useState[false];
simulateNetworkRequest[].then[[] => {
const handleClick = [] => setLoading[true];
onClick={!isLoading ? handleClick : null}
{isLoading ? 'Loading…' : 'Click to load'}
render[];
Hộp kiểm / Radio
Các nút cũng có thể được sử dụng để tạo kiểu cho các thành phần biểu mẫu
4 vàimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
5. Điều này hữu ích khi bạn muốn một nút chuyển đổi hoạt động gọn gàng bên trong biểu mẫu HTMLimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
import React, { useState } from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ToggleButton from 'react-bootstrap/ToggleButton';
function ToggleButtonExample[] {
const [checked, setChecked] = useState[false];
const [radioValue, setRadioValue] = useState['1'];
{ name: 'Active', value: '1' },
{ name: 'Radio', value: '2' },
{ name: 'Radio', value: '3' },
onChange={[e] => setChecked[e.currentTarget.checked]}
{radios.map[[radio, idx] => [
checked={radioValue === radio.value}
onChange={[e] => setRadioValue[e.currentTarget.value]}
variant="outline-primary"
onChange={[e] => setChecked[e.currentTarget.checked]}
{radios.map[[radio, idx] => [
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
checked={radioValue === radio.value}
onChange={[e] => setRadioValue[e.currentTarget.value]}
render[];
Phần trên xử lý kiểu dáng, nhưng yêu cầu điều khiển thủ công trạng thái
6 cho mỗi đài hoặc hộp kiểm trong nhómimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
Để có trải nghiệm tốt hơn với quản lý trạng thái được kiểm tra, hãy sử dụng thành phần
4 thay vì thành phầnimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
4. Nhóm hoạt động như một thành phần biểu mẫu, trong đóimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
9 là một mảng gồm cácimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
9 đã chọn cho một nhóm hộp kiểm được đặt tên hoặc mộtimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
9 được bật tắt trong một nhóm radio có tên tương tựimport Button from 'react-bootstrap/Button';
function TagTypesExample[] {
không kiểm soát
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
function ToggleButtonGroupUncontrolled[] {
export default ToggleButtonGroupUncontrolled;
kiểm soát
0import Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
API
2Sao chép mã nhập cho thành phần Nútimport Button from 'react-bootstrap/Button';
TênLoạiMặc địnhMô tảhoạt động
3import Button from 'react-bootstrap/Button';
Đặt thủ công trạng thái trực quan của nút thành
4nhưimport Button from 'react-bootstrap/Button';
Bạn có thể sử dụng loại phần tử tùy chỉnh cho thành phần này
khuyết tật3import Button from 'react-bootstrap/Button';
Vô hiệu hóa Nút, ngăn sự kiện chuột, ngay cả khi thành phần cơ bản là thành phần
4hrefimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
Cung cấp một
3 sẽ hiển thị một phần tửimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
4, được tạo kiểu như một nútkích thướcimport Button from 'react-bootstrap/Button';
function OutlineTypesExample[] {
Primary{' '}
Secondary{' '}
Success{' '}
Warning{' '}
Danger{' '}
Info{' '}
Light{' '}
Dark
export default OutlineTypesExample;
Chỉ định một nút lớn hoặc nhỏ
loại9.import Button from 'react-bootstrap/Button';
0.import Button from 'react-bootstrap/Button';
1.import Button from 'react-bootstrap/Button';
2import Button from 'react-bootstrap/Button';
9import Button from 'react-bootstrap/Button';
Xác định thuộc tính loại nút HTML
biến thể4import Button from 'react-bootstrap/Button';
Một hoặc nhiều kết hợp biến thể nút
các nút có thể là một trong nhiều biến thể trực quan, chẳng hạn như
5import Button from 'react-bootstrap/Button';
cũng như các phiên bản "phác thảo" [có tiền tố là 'outline-*']
6bsPrefiximport Button from 'react-bootstrap/Button';
7import Button from 'react-bootstrap/Button';
Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều