Bootstrap 5 mtandao: XXL

XXL kinaumiliki shughuli ya mtandao

XSmall Small Medium Large Extra Large XXL
kifupi cha uainishaji .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
kimoja cha ekranu <576px >=576px >=768px >=992px >=1200px >=1400px

XXL kinaainishwa kwa 1400 zilezi au zaidikimoja cha ekranu.

Mfano hii haukubwa kwa vifaa vya kizani, kizima na kizima kubwa, kumichwa 50%/50%, na XXL kumichwa 25%/75% ya kufanyika. Kivaa kiziki na kiziki kubwa, inatokana kwa uharibifu (100%):

Mifano

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chaji kifaru cha panda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980, WWF ikawa katika China, ikababikwa na Serikali ya China kumaliza kazi ya kusaidia kifaru cha panda na makaa yake ...</p>
    </div>
  </div>
</div>

Jifunze kufanya kwa mwenyewe

Uwakilishaji:Tukielewe kwamba kutosha kuingia 12 kwa ujumbe.

Kutumia XXL tu

Kwenye matokeo hii, tunasema tu .col-xxl-6 Class (bila .col-md-* na / au .col-sm-*）。Hii inamaanisha kwamba vifaa vya xxlarge vitakuwa vifupishwe 50%/50%. Kwa hivyo, kwa vifaa vya kikubwa, kikubwa, kimea, kidogo na kidogo, vitakuwa vimeguswa (100% kubwa):

Mifano

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina chaji kifaru cha panda ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980, WWF ikawa katika China, ikababikwa na Serikali ya China kumaliza kazi ya kusaidia kifaru cha panda na makaa yake ...</p>
    </div>
  </div>
</div>

Jifunze kufanya kwa mwenyewe

Mabomu ya usambazaji wa mwiko

Kwenye Bootstrap 5, hatua rahisi inaweza kufanya kwa kila vifaa kwa kina kubwa: tu kutumia .col-xxl-* Inafikia kufungua namba katika kwa sababu ya kumekaa, na kusababisha tu kufanya kwa class 'col' tu. .col-xxl Class. Bootstrap itakayotafuta kwa nafasi zaidi ya mabomu, na kila mabomu itakuwa na uwezo wa kubwa wote.

Ikiwa ukanda wa ekranuChini ya 1400px, mabomu yana kusambaa kihorizoni:

<!-- Mabomu: katika vifaa vya kikubwa na vya kikubwa zaidi ni 50% kubwa -->
<div class="row">
  <div class="col-xxl">1 ya 2</div>
  <div class="col-xxl">2 ya 2</div>
</div>
<!-- Mabomu: katika vifaa vya kikubwa na vya kikubwa zaidi ni 25% kubwa -->
<div class="row">
  <div class="col-xxl">1 ya 4</div>
  <div class="col-xxl">2 ya 4</div>
  <div class="col-xxl">3 ya 4</div>
  <div class="col-xxl">4 ya 4</div>
</div>

Jifunze kufanya kwa mwenyewe