Makina ya Kifungu cha Bootstrap 5

Mambo ya msingi:

Mfano wa jukwaa kwa vifaa vya kubwa XSmall Small Medium Large Extra Large
XXL Kifungu cha awali .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Kifungu cha ekranu <576px >=768px >=992px >=1200px >=1400px

Kwenye kituo kilichotengwa mara mbili, tukionyesha mifano wa jukwaa ambao kinapatikana kwenye vifaa vya kati na vichache. Tukitumia mbali mbili (div), kwenye vifaa vichache tukifanyia kufichwa 25% / 75%, kwenye vifaa vya kati tukifanyia kufichwa 50% / 50%:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Kama kile, kuanzia 992 mita hadi 1199 mita

Vifaa vya kubwa vinatajwa kwa kufikia kiyasi cha ekranuKuanzia 992 mita hadi 1199 mita.

Kwa vifaa vya kubwa, tukitumia: .col-lg-* Kikla:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Kwenye vifaa vichache, tukifanya kwa kufungua kama: -sm- kama kile. Kwenye vifaa vya kati, tukifanya kwa kufungua kama: -md- kama kile. Kwenye vifaa vya kubwa, tukifanya kwa kufungua kama: -lg- kama kile.

Mfano hii utakayitwa kwenye vifaa vichache kwa 25% / 75%, kwenye vifaa vya kati kwa 50% / 50%, kwenye vifaa vya kubwa, xlarge na xxlarge kwa 33% / 66%. Kwenye vifaa vya kizito, itakuwa inapungua kwa upya (100%):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chukua panda kama mpangilio wake ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980, WWF ilipata kumtaarifu China, ikapewa inavutia kufanya kazi ya kusaidia kifunzo cha kifunzo cha panda kwa jina la China ...</p>
    </div>
  </div>
</div>

Tukijifanya kwa mafunzo

Tahadhari:Kuwa na uadilifu wa 12 (hakuna pia 12 mitano yenye uwezo wote):

Kutumia Kikubwa tu

Kwenye mafano yanayotumika, tukijadilisha .col-lg-6 Klassi (kama hana .col-md-* na/au .col-sm-*）。Hii inamaanisha kwamba kifaa kubwa, xlarge na xxlarge kifaa kinaingia 50%/50%. Kwa kifaa kimea, kifaa kikuu na kifaa kidogo, itakuwa kuingia kwa kinaingia 100% (uwezo wa kinaingia wote):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chukua panda kama mpangilio wake ...</p>
    </div>
    <div class="col-lg-6">
      <p>1980, WWF ilipata kumtaarifu China, ikapewa inavutia kufanya kazi ya kusaidia kifunzo cha kifunzo cha panda kwa jina la China ...</p>
    </div>
  </div>
</div>

Tukijifanya kwa mafunzo

Mito kejeli ya ujenzi

Kwenye Bootstrap 5, kuna mpangilio rahisi wa kumueza mitano yenye uwezo wote kwa kila kifaa: tu kutumia .col-lg-* Kuondoa namba, na kutumia kila col elementi .col-lg Klassi. Bootstrap itahakikisha ujenzi wa mitano, na kila mitano itakuwa na uwezo wa kinaingia wote.

Ikiwa ukanda wa skrimeni niChini ya 992px, mitano yanaingia kwa ujauzito wa mawimbi:

<!-- Mitano mbili: Inafikia 50% ya uwezo wa kifaa kubwa zaidi -->
<div class="row">
  <div class="col-lg">1 ya 2</div>
  <div class="col-lg">2 ya 2</div>
</div>
<!-- Mitano miyana: Inafikia 25% ya uwezo wa kifaa kubwa zaidi -->
<div class="row">
  <div class="col-lg">1 ya 4</div>
  <div class="col-lg">2 ya 4</div>
  <div class="col-lg">3 ya 4</div>
  <div class="col-lg">4 ya 4</div>
</div>

Tukijifanya kwa mafunzo