Source

קנעפּל גרופּע

גרופע אַ סעריע פון ​​​​קנעפּלעך צוזאַמען אויף אַ איין שורה מיט די קנעפּל גרופּע, און יבער-מאַכט זיי מיט דזשאַוואַסקריפּט.

יקערדיק בייַשפּיל

ייַנוויקלען אַ סעריע פון ​​קנעפּלעך מיט .btnאין .btn-group. לייג צו אַפּשאַנאַל דזשאַוואַסקריפּט ראַדיאָ און טשעקקבאָקס נוסח נאַטור מיט אונדזער קנעפּלעך פּלוגין .

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