Tafiti ya kura

Mafunzo ya Bootstrap 5

• Kutafuta ya BS5
• Sauti ya BS5
• Container ya BS5
• Mafuta ya mtandao wa BS5
• Makoa ya BS5
• Makoa ya BS5
• Taarifa ya BS5
• Image ya BS5
• Jumbotron ya BS5
• Chagua ya BS5
• Botton ya BS5
• Group ya botton ya BS5
• Shabiki ya BS5
• Bar ya mkataba wa BS5
• Mchezo wa ujumbe wa BS5
• Tazama ya BS5
• Group ya orodha ya BS5
• Card ya BS5
• Menu la ndizi la BS5
• Fold ya BS5
• Navigation ya BS5
• Bar ya navigation ya BS5
• Carousel ya BS5
• Modali ya BS5
• Tipu ya BS5
• Pop-up ya BS5
• Toast ya BS5
• Scrollspy ya BS5
• Offcanvas ya BS5
• Vifaa vya kusaidia ya BS5
• Flex ya BS5

Form ya Bootstrap 5

• Foru ya BS5
• Chaguo cha menu cha BS5
• Chekita na msingi wa BS5
• Mwaka wa BS5
• Kundi la input ya BS5
• Tawi la formu ya BS5
• Tathmini ya formu ya BS5

Mashua ya Bootstrap 5

• Mfumo wa mtandao wa BS5
• BS5 Kusambaa/Kitambo
• Mifano ya mtandao wa BS5 Kichwani
• BS5 Mvitu ya Kichwani
• Mifano ya mtandao wa BS5 Kimea
• Mifano ya mtandao wa BS5 Kikubwa
• Mifano ya mtandao wa BS5 XLarge
• Mifano ya mtandao wa BS5 XXL
• Mifano ya mtandao wa BS5

Mengine ya Bootstrap 5

• Makao ya muhimu wa BS5
• Mtaarifu wa BS5

Kurasa la chaguo:

Mambo ya ujumbe:

• CodeW3C.com 百宝箱

Mifano ya kifaa kichwani cha kikubwa

Tukusoma tukona ujumbe wa muundo wa kina ambao una mawili kufuatia kufikia: Tukiongea kwamba kufikia:Yote:Ugusanyaji wa kifaa 25% / 75%:

Tukianza kundi hizi kwenye mawili kufuatia kufikia:

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

Mifano hii itakuwa inapoteza 25% / 75% ya kila kifaa (kichwani, kikuu, kimea, kikubwa, kikubwa sana na kikubwa zaidi):

Mfano

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina simu ya kifua kubwa...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980, WWF ilipatika nje China, ikapewa ingia na Serikali ya China kufanya kazi ya kusaidia kwa kifua na maeneo yake ya uwanja...</p>
    </div>
  </div>
</div>

Jifunze tena

Tukielea:Tukielea kwamba kigeuka 12 (hatarujiwe tena 12 kifaa kinavyofaa):

kwa kusababisha 33.3% / 66.6% ya kusababisha, unahitaji kutumia .col-4 na .col-8kwa kusababisha 50% / 50% ya kusababisha, unahitaji kutumia .col-6 na .col-6):

Mfano

<!-- 33.3%/66.6% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina simu ya kifua kubwa...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980, WWF ilipatika nje China, ikapewa ingia na Serikali ya China kufanya kazi ya kusaidia kwa kifua na maeneo yake ya uwanja...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), ilianzishwa tarehe 29 Aprili 1961, ina simu ya kifua kubwa...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980, WWF ilipatika nje China, ikapewa ingia na Serikali ya China kufanya kazi ya kusaidia kwa kifua na maeneo yake ya uwanja...</p>
    </div>
  </div>
</div>

Jifunze tena

Mitano inayofanyia mawasiliano wa ujenzi wa otomatiki

Kwenye Bootstrap 5, kuna mpangilio rahisi wa kumuea mitano inayohusiana kwa kima kwa vifaa vyote.mitano inayohusiana kwa kimakutoka .col-* kufichia numbering, na kutumia kila col elementi peke yake .col Class. Bootstrap itakayofahamisha kwa nini kuna mitano, na kila mitano itakuwa na kima lake:

<!-- Mitano miyana 50% ya kima -->
<div class="row">
  <div class="col">1 ya 2</div>
  <div class="col">2 ya 2</div>
</div>
<!-- Mitano miyana 25% ya kima -->
<div class="row">
  <div class="col">1 ya 4</div>
  <div class="col">2 ya 4</div>
  <div class="col">3 ya 4</div>
  <div class="col">4 ya 4</div>
</div>

Jifunze tena

Makao ya kifo yanaonyesha kuhusu huzuni ya kipimo kwa vifaa vya kichwani vya kidogo.

Kifunzi cha vifaa

Majadiliano ya JavaScript

Vituo vya msaada