Nút kích thước Bootstrap

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ị

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

1

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ể

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

2 không có màu nền

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ử

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

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

import Button from 'react-bootstrap/Button';
function TagTypesExample() {
      

Nút liên kết{' '}

{''}{''}

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ị

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

8 của thành phần

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ị

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

9 vào

import Button from 'react-bootstrap/Button';
function DisabledExample() {
      

xuất khẩu mặc định DisabledExample;

Coi chừng.

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

4phần tử không tự nhiên hỗ trợ thuộc tính

import 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ểu

import Button from 'react-bootstrap/Button';
function TagTypesExample() {
      

2 nhưng không phải tất cả các trình duyệt đều hỗ trợ nó

React Bootstrap sẽ ngăn bất kỳ trình xử lý

import Button from 'react-bootstrap/Button';
function TagTypesExample() {
      

3 nào kích hoạt bất kể phần tử được hiển thị

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 đây

import 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

import Button from 'react-bootstrap/Button';
function TagTypesExample() {
      

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 HTML

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

import Button from 'react-bootstrap/Button';
function TagTypesExample() {
      

6 cho mỗi đài hoặc hộp kiểm trong nhóm

Để 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

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

4 thay vì thành phần

import 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 TagTypesExample() {
      

9 là một mảng gồm các

import 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ột

import 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ự

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

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

0

API

import Button from 'react-bootstrap/Button';
        

2Sao chép mã nhập cho thành phần Nút

TênLoạiMặc địnhMô tảhoạt động

import Button from 'react-bootstrap/Button';
        

3

Đặt thủ công trạng thái trực quan của nút thành

import Button from 'react-bootstrap/Button';



 

4

như

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ật

import Button from 'react-bootstrap/Button';
        

3

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

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

4

href

Cung cấp một

import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
      Primary{' '}
      Secondary{' '}
      Success{' '}
      Warning{' '}
      Danger{' '}
      Info{' '}
      Light{' '}
      Dark
export default OutlineTypesExample;

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út

kích thước

Chỉ định một nút lớn hoặc nhỏ

loại

import Button from 'react-bootstrap/Button';
        

9.

import Button from 'react-bootstrap/Button';
    
      

0.

import Button from 'react-bootstrap/Button';
    
      

1.

import Button from 'react-bootstrap/Button';
    
      

2

import Button from 'react-bootstrap/Button';
        

9

Xác định thuộc tính loại nút HTML

biến thể

import Button from 'react-bootstrap/Button';
    
      

4

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ư

import Button from 'react-bootstrap/Button';
    
      

5

cũng như các phiên bản "phác thảo" (có tiền tố là 'outline-*')

import Button from 'react-bootstrap/Button';
    
      

6

bsPrefix

import Button from 'react-bootstrap/Button';
    
      

7

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

Làm cách nào để cung cấp kích thước nút trong Bootstrap?

Làm cách nào để thay đổi độ rộng của nút trong Bootstrap 5?

Làm cách nào để nút nhỏ hơn trong Bootstrap?

Làm cách nào để tạo kiểu cho một nút trong Bootstrap?