Bootstrap 5 painikkeet ryhmässä

Kurssivinkit:

Painikeryhmä

Bootstrap 5 sallii sinun yhdistää sarjan painikkeita painikeryhmään (välillä riviä): .btn-group luokan <div> elementtiä luodaksesi painikeryhmän:

Esimerkki

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Kokeile itse

Vinkki:Älä sovelleta painikkeiden kokoa ryhmän jokaiselle painikkeelle, vaan käytä luokkaa .btn-group-lg Käyttää suuria painikkeita tai .btn-group-sm Käyttää pieniä painikkeita:

Esimerkki

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Kokeile itse

Pystysuuntainen painikkeiden ryhmä

Bootstrap 5 tukee myös pystysuuntaisia painikkeiden ryhmiä:

Käytä luokkaa .btn-group-vertical Luo pystysuuntainen painikkeiden ryhmä:

Esimerkki

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Kokeile itse

Rinnakkaiset painikkeet

Oletusarvoisesti painikkeet ovat "inline" -tilassa, ja useiden painikkeiden ryhmät näytetään rinnakkain:

Esimerkki

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Changcheng</button>
  <button type="button" class="btn btn-primary">Hongqi</button>
</div>

Kokeile itse

Sisäänrakennetut painikkeet ja pudotusvalikot

Sisäänrakennetut painikkeet, joita voidaan käyttää pudotusvalikkojen luomiseen (sinä oppitunnissa käsitellään lisää pudotusvalikoista):

Esimerkki

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Puhelin</a>
      <a class="dropdown-item" href="#">Tabletti</a>
    </div>
  </div>
</div>

Kokeile itse