Gizu wa mitendo ya Bootstrap 5

kipengele cha kikundi

Bootstrap 5 inaonesha kwamba unaweza kumpatikana kikundi cha kipengele kama kipengele kipya (kwenye mstari mmoja):

Tumie na .btn-group kwa class <div> mwelekezo kwa kumueleza kikundi cha kipengele:

Mifano

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">Dajiang</button>
  <button type="button" class="btn btn-primary">Xiaomai</button>
</div>

Jifunze kwa kufikia

Wahaya:Hakuna wajui kuingiza ukubwa wa kipengele kwa kila gawa katika kikundi, bali tumie class .btn-group-lg kwa kipengele kubwa au kumekuwa na: .btn-group-sm kwa kipengele chiki:

Mifano

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">Dajiang</button>
  <button type="button" class="btn btn-primary">Xiaomai</button>
</div>

Jifunze kwa kufikia

Badi ya mibaridi pekee

Bootstrap 5 inasimamia na badi ya mibaridi pekee:

Tumia kiwango .btn-group-vertical Panga badi ya mibaridi pekee:

Mifano

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">Dajiang</button>
  <button type="button" class="btn btn-primary">Xiaomai</button>
</div>

Jifunze kwa kufikia

Badi za mibaridi zinaenea

Kwa kawaida, badi ya mibaridi ina "inline", inadanganywa kando kila wakati inafikia badi zaidi:

Mifano

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">Dajiang</button>
  <button type="button" class="btn btn-primary">Xiaomai</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Jili</button>
  <button type="button" class="btn btn-primary">Changcheng</button>
  <button type="button" class="btn btn-primary">Hongqi</button>
</div>

Jifunze kwa kufikia

Badi la mibaridi na menyu ya kudzika

Badi la mibaridi inayoshiriki na kumengeneza menyu ya kudzika (unavyofikia mafunzo ya menyu ya kudzika kwenye kituo hiki):

Mifano

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">Dajiang</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomai</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Simu ya kifaa</a>
      <a class="dropdown-item" href="#">Kompyuta ya kifaa</a>
    </div>
  </div>
</div>

Jifunze kwa kufikia