Kusoma cha Kifungu cha Kusoma cha Kifungu cha Kusoma cha Kifungu cha Bootstrap 5

Mifano ya jina la kifaa kibichi

XSmall Small Medium Large Extra Large XXL
michoro wa kundi .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
kina ya ekranu <576px >=576px >=768px >=992px >=1200px >=1400px

Kwenye kituo cha chaguo cha awali, tunashonza mifano wa jina la mifano yenye kundi ya kifaa kikuu. Tumeonaona kwa kufungua div (kolumna), na kumwambia wao 25% / 75% kufanyika:

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

Kamwe, uzoefu wa 50% / 50% kwa kifaa kibichi kinaweza kuwa bora.

Kifaa kibichi kimeandikwa kwa kina ya ekranuKuanzia 768 mita hadi 991 mita.

Kwa kifaa kibichi, tumeonaona kwa kufungua .col-md-* Kundi:

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

Kwa kifaa kikuu, tumeonaona kwa kufungua -sm- kama. Kwa kifaa kibichi, tumeonaona kwa kufungua -md- kama

Mfano hii wa kwa kifaa kikuu 25% / 75% kufanyika na kifaa kibichi (na kikuu, kibado kubwa na kibado kubwa sana) 50% / 50% kufanyika. Kwa kifaa kikuu cha kizito, hii inaonyesha kwa upofu (100%):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chumba cha panda kubwa ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980, WWF ilikuwa kwa kawaida katika China, ikuwa inasababisha kufikia China kufanya kazi ya kusaidia kipato cha panda kwa kuzingatia mashamba yao ...</p>
    </div>
  </div>
</div>

Tenda kwa kina

Tahadhari:Utafitiwe kwamba kusababisha kueleza kwa kumaliza au kueleza kwa chini ya 12 (hakuna kufaa kutumia kila mitano ya 12 iliyopatikana):

Kama tu tumia Kikubwa

Kwenye matokeo hii, tunatumia kikamilifu .col-md-6 Kama (kama hana .col-sm-*）。Kwa sababu ya hii, vifaa vya kikubwa, kikubwa, kikubwa zaidi na XXL inatakiwa ikifanyia 50% / 50% - kwa sababu ya kina hii inaonyesha. Kwa sababu ya hii, vifaa vya kichake na vya kichake chake inatakiwa ikifanyia kina (k宽度 100%):

Mfano

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chumba cha panda kubwa ...</p>
  </div>
  <div class="col-md-6">
    <p>1980, WWF ilikuwa kwa kawaida katika China, ikuwa inasababisha kufikia China kufanya kazi ya kusaidia kipato cha panda kwa kuzingatia mashamba yao ...</p>
  </div>
</div>

Tenda kwa kina

Mitano ya ukitumia mafanikio

Kwenye Bootstrap 5, iringa rahisi inayotumika kwa kila vifaa kufanya mitano inayofanana kwa kiyasi: tu kutumia .col-md-* Inafikia kufungua namba, na kutumia kikamilifu kwenye kipengele cha col .col-md Kama. Bootstrap itakapokubaliana na namba za mitano, kila mitano inatakiwa kuwa na kiyasi zaidi zaidi.

Ikiwa ukanda wa ekranu niChini ya 768px, mitano inayotumika kwenye ujumbe wa kimaadili:

<!-- Mitano mbili: katika vifaa vya kikubwa na vya kikubwa zaidi ni 50% kiyasi -->
<div class="row">
  <div class="col-md">1 ya 2</div>
  <div class="col-md">2 ya 2</div>
</div>
<!-- Mfano wa mitano: katika vifaa vya kikubwa na vya kikubwa zaidi ni 25% kiyasi -->
<div class="row">
  <div class="col-md">1 ya 4</div>
  <div class="col-md">2 ya 4</div>
  <div class="col-md">3 ya 4</div>
  <div class="col-md">4 ya 4</div>
</div>

Tenda kwa kina

Mchapisho ya kifo kinasababisha kueleza kuhusu kuingiza kama upekee kwa vifaa vya kikubwa vitu vya kueleza upekee kwa upekee wa kina.