按钮组

将一系列按钮组合在一起，放在一行或垂直排列。

基本示例

将一系列 <Button> 放在 <ButtonGroup> 中。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function BasicExample() { return ( <ButtonGroup aria-label="Basic example"> <Button variant="secondary">Left</Button> <Button variant="secondary">Middle</Button> <Button variant="secondary">Right</Button> </ButtonGroup> ); } export default BasicExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';

function BasicExample() {
  return (
    <ButtonGroup aria-label="Basic example">
      <Button variant="secondary">Left</Button>
      <Button variant="secondary">Middle</Button>
      <Button variant="secondary">Right</Button>
    </ButtonGroup>
  );
}

export default BasicExample;

按钮工具栏

将 <ButtonGroup> 集合组合到 <ButtonToolbar> 中，以创建更复杂的组件。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; function ToolbarBasicExample() { return ( <ButtonToolbar aria-label="Toolbar with button groups"> <ButtonGroup className="me-2" aria-label="First group"> <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '} <Button>4</Button> </ButtonGroup> <ButtonGroup className="me-2" aria-label="Second group"> <Button>5</Button> <Button>6</Button> <Button>7</Button> </ButtonGroup> <ButtonGroup aria-label="Third group"> <Button>8</Button> </ButtonGroup> </ButtonToolbar> ); } export default ToolbarBasicExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';

function ToolbarBasicExample() {
  return (
    <ButtonToolbar aria-label="Toolbar with button groups">
      <ButtonGroup className="me-2" aria-label="First group">
        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="me-2" aria-label="Second group">
        <Button>5</Button> <Button>6</Button> <Button>7</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Third group">
        <Button>8</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

export default ToolbarBasicExample;

您可以随意在工具栏中混合使用输入组和按钮组。与上面的示例类似，您可能需要一些实用工具来正确地进行间距。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ToolbarExample() { return ( <> <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups"> <ButtonGroup className="me-2" aria-label="First group"> <Button variant="secondary">1</Button>{' '} <Button variant="secondary">2</Button>{' '} <Button variant="secondary">3</Button>{' '} <Button variant="secondary">4</Button> </ButtonGroup> <InputGroup> <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text> <Form.Control type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" /> </InputGroup> </ButtonToolbar> <ButtonToolbar className="justify-content-between" aria-label="Toolbar with Button groups" > <ButtonGroup aria-label="First group"> <Button variant="secondary">1</Button>{' '} <Button variant="secondary">2</Button>{' '} <Button variant="secondary">3</Button>{' '} <Button variant="secondary">4</Button> </ButtonGroup> <InputGroup> <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text> <Form.Control type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" /> </InputGroup> </ButtonToolbar> </> ); } export default ToolbarExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ToolbarExample() {
  return (
    <>
      <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
        <ButtonGroup className="me-2" aria-label="First group">
          <Button variant="secondary">1</Button>{' '}
          <Button variant="secondary">2</Button>{' '}
          <Button variant="secondary">3</Button>{' '}
          <Button variant="secondary">4</Button>
        </ButtonGroup>
        <InputGroup>
          <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>
          <Form.Control
            type="text"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </InputGroup>
      </ButtonToolbar>

      <ButtonToolbar
        className="justify-content-between"
        aria-label="Toolbar with Button groups"
      >
        <ButtonGroup aria-label="First group">
          <Button variant="secondary">1</Button>{' '}
          <Button variant="secondary">2</Button>{' '}
          <Button variant="secondary">3</Button>{' '}
          <Button variant="secondary">4</Button>
        </ButtonGroup>
        <InputGroup>
          <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>
          <Form.Control
            type="text"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon2"
          />
        </InputGroup>
      </ButtonToolbar>
    </>
  );
}

export default ToolbarExample;

大小

无需对组中的每个按钮都应用按钮大小属性，只需将 size 属性添加到 <ButtonGroup> 中即可。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function SizesExample() { return ( <> <ButtonGroup size="lg" className="mb-2"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> <br /> <ButtonGroup className="mb-2"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> <br /> <ButtonGroup size="sm"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> </> ); } export default SizesExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';

function SizesExample() {
  return (
    <>
      <ButtonGroup size="lg" className="mb-2">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup size="sm">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </>
  );
}

export default SizesExample;

嵌套

您可以在 <ButtonGroup> 中放置其他类型的按钮，例如 <DropdownButton>。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; function NestedExample() { return ( <ButtonGroup> <Button>1</Button> <Button>2</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown"> <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> </ButtonGroup> ); } export default NestedExample;

import Button from 'react-bootstrap/Button';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

function NestedExample() {
  return (
    <ButtonGroup>
      <Button>1</Button>
      <Button>2</Button>

      <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>
    </ButtonGroup>
  );
}

export default NestedExample;

垂直变体

通过在<ButtonGroup>中添加vertical，使一组按钮垂直堆叠而不是水平排列。此处不支持拆分按钮下拉菜单。

结果

加载中...

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; function VerticalExample() { return ( <ButtonGroup vertical> <Button>Button</Button> <Button>Button</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> <Button>Button</Button> <Button>Button</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-2" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-3" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> </ButtonGroup> ); } export default VerticalExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

function VerticalExample() {
  return (
    <ButtonGroup vertical>
      <Button>Button</Button>
      <Button>Button</Button>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-1"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>

      <Button>Button</Button>
      <Button>Button</Button>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-2"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-3"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>
    </ButtonGroup>
  );
}

export default VerticalExample;

API

ButtonGroup

ButtonToolbar