Bootstrap 5 kungiyar bato

按钮组

Bootstrap 5 允许您在按钮组中将一系列按钮组合在一起（在一行上）：

kama dantakun fannan Bootstrap 5 .btn-group class <div> elemento dantakun:

shaidari

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

jiki kai jiyar

kura tsa:kuma ka kama dantakun hoto, kuma kuma dantakun .btn-group-lg fannan girmar daki na bata dantakun tsa kai kuma .btn-group-sm fannan girmar daki na bata dantakun

shaidari

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

jiki kai jiyar

bata na kai kai da yana kai kai

Bootstrap 5 taka kai bata na kai kai da yana kai kai:

a rabu kai .btn-group-vertical kai bata na kai kai da yana kai kai:

shaidari

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>

jiki kai jiyar

bata na kai kai

duba kai, bata na 'inline' yana kai kai, a cikin bata na kai kai dake yana kai kai:

shaidari

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <button type="button" class="btn btn-primary">小米</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">吉利</button>
  <button type="button" class="btn btn-primary">长城</button>
  <button type="button" class="btn btn-primary">红旗</button>
</div>

jiki kai jiyar

bata bata da bata na kai kai

bata bata kuma kai kai na bata, za a iya samun bata na kai kai (za a iya koyar da bata na kai kai a sauye):

shaidari

<div class="btn-group">
  <button type="button" class="btn btn-primary">华为</button>
  <button type="button" class="btn btn-primary">大疆</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">手机</a>
      <a class="dropdown-item" href="#">平板电脑</a>
    </div>
  </div>
</div>

jiki kai jiyar