Source

Товчлуурын бүлэг

Товчлуурын бүлгийн тусламжтайгаар хэд хэдэн товчлууруудыг нэг мөрөнд нэгтгэж, JavaScript-ээр хүчирхэгжүүлнэ үү.

Үндсэн жишээ

.btn-ээр хэд хэдэн товчлуурыг боож .btn-groupөгнө. Нэмэлт JavaScript радио болон шалгах хайрцагны хэв маягийг манай товчлуурын залгаасыг ашиглан нэмнэ үү .

<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>
Зөв эсэхийг баталгаажуулж role, шошгыг өгнө үү

Туслах технологиуд (дэлгэц уншигч гэх мэт) хэд хэдэн товчлууруудыг бүлэглэсэн гэдгийг илэрхийлэхийн тулд зохих roleшинж чанарыг өгөх шаардлагатай. Товчлуурын бүлгүүдийн хувьд энэ нь role="group", харин хэрэгслийн мөрөнд байх ёстой role="toolbar".

Нэмж дурдахад, ихэнх туслах технологи нь зөв дүрийн шинж чанар байгаа хэдий ч тэдгээрийг зарлахгүй тул бүлгүүд болон хэрэгслийн самбаруудад тодорхой шошго өгөх ёстой. Энд өгсөн жишээнүүдэд бид -г ашигладаг aria-labelболовч өөр хувилбаруудыг aria-labelledbyашиглаж болно.

Товчлуурын самбар

Илүү төвөгтэй бүрэлдэхүүн хэсгүүдийн товчлуурын бүлгүүдийг товчлуурын хэрэгслийн мөрөнд нэгтгэнэ үү. Бүлэг, товчлуур болон бусад зүйлийг зайлахын тулд шаардлагатай бол хэрэглээний ангиудыг ашигла.

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

Оролтын бүлгүүдийг өөрийн хэрэгслийн самбар дээрх товчлуурын бүлгүүдтэй хольж болно. Дээрх жишээтэй адил зүйлийг зөв байрлуулахын тулд танд зарим хэрэгсэл хэрэгтэй болно.

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

Хэмжээ тогтоох

Бүлгийн товчлуур бүрт товчлуурын хэмжээ тогтоох анги хэрэглэхийн оронд олон бүлгийг үүрлэхдээ тус .btn-group-*бүрийг .btn-groupоруулаад зүгээр л нэмнэ үү.



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

Үүрлэх

Унждаг цэсийг хэд хэдэн товчлууртай хослуулахыг хүсвэл .btn-groupөөр дотор байрлуулна уу..btn-group

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

Босоо өөрчлөлт

Товчлуурын багцыг хэвтээ биш босоо байдлаар давхарласан харагдуулна. Энд хуваах товчлуурыг дэмждэггүй.

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