Source

Knap gruppe

Gruppér en række knapper sammen på en enkelt linje med knapgruppen, og forstærk dem med JavaScript.

Grundlæggende eksempel

Pak en række knapper ind .btnmed .btn-group. Tilføj valgfri JavaScript-radio og afkrydsningsfeltstiladfærd med vores knapper-plugin .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
Sørg for korrekt roleog giv en etiket

For at hjælpeteknologier (såsom skærmlæsere) kan formidle, at en række knapper er grupperet, roleskal der angives en passende egenskab. For knapgrupper vil dette være role="group", mens værktøjslinjer skal have en role="toolbar".

Derudover bør grupper og værktøjslinjer have en eksplicit etiket, da de fleste hjælpeteknologier ellers ikke vil annoncere dem på trods af tilstedeværelsen af ​​den korrekte rolleattribut. I eksemplerne her bruger vi aria-label, men alternativer som f.eks. aria-labelledbykan også bruges.

Knap værktøjslinje

Kombiner sæt knapgrupper til knapværktøjslinjer for mere komplekse komponenter. Brug hjælpeklasser efter behov til at give plads til grupper, knapper og mere.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Bland gerne inputgrupper med knapgrupper i dine værktøjslinjer. I lighed med eksemplet ovenfor, har du sandsynligvis brug for nogle hjælpeprogrammer for at placere tingene ordentligt.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Dimensionering

I stedet for at anvende knapstørrelsesklasser til hver knap i en gruppe, skal du blot tilføje .btn-group-*til hver enkelt .btn-group, inklusive hver enkelt, når du indlejrer flere grupper.



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Indlejring

Placer en .btn-groupi en anden .btn-group, når du vil have rullemenuer blandet med en række knapper.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Lodret variation

Få et sæt knapper til at se ud lodret stablet i stedet for vandret. Rullemenuer med splitknap understøttes ikke her.

<div class="btn-group-vertical">
  ...
</div>