Modali ya Bootstrap 5

Modali

Modal komponi ni ni jinga au ya fani ya mawingu, inaonyesha kwenye juu ya ukurasa huo:

Jinsi ya kumepa kipenya kikuu kikuu

Mifano ya kumepa kipenya kikuu kikuu kinasirili:

Mifano

<!-- Mwongozo wa kipenya kikuu kikuu kwa kufungua -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Fungua kipenya kikuu
</button>
<!-- Kipenya kikuu kikuu -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Mwongozo wa kipenya kikuu kikuu -->
      <div class="modal-header">
        <h4 class="modal-title">Mwongozo wa Kipenya Kikuu</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Matokeo ya kipenya kikuu kikuu -->
      <div class="modal-body">
        Matokeo wa kipenya kikuu kikuu ..
      </div>
      <!-- Mwongozo wa kipenya kikuu kikuu -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fungua</button>
      </div>
    </div>
  </div>
</div>

Jifunze Tena

kigeza na usioagizaji

Tafadhali tumia .fade Kigeza na faza inayofikia na kuwa kina kwa kufanyika kwa kushiriki na kufungua kipenya kikuu kikuu na kufikia kina:

Mifano

<!-- Kipenya kikuu kikuu inayofikia na kuwa kina -->
<div class="modal fade"></div>
<!-- Kipenya kikuu kikuu bila usioagizaji -->
<div class="modal"></div>

Jifunze Tena

Ukubwa wa kipenya

kwa kufanyika kwa kushiriki kipenya kicukuu kwa kufanyika kwa kushiriki .modal-sm kigeza na uwezo wa ukurudisha (max-width 300 mita) kwa kufanyika kwa kushiriki kikuu .modal-lg kigeza na uwezo wa ukurudisha (max-width 800 mita) au kigeza na kipenya kikuu kikuu kwa kufanyika kwa kushiriki .modal-xl kuwingiliana ukurudisha kikuu cha kipenya (max-width 1140 mita). Kivinjari ni 500 mita kikuu cha ukurudisha kikuu.

Tafadhali ingiza .modal-dialog Kigeza na uwezo wa ukurudisha kwa kufanyika kwa kushiriki <div> Mifano:

Kipenya Kicukuu

<div class="modal-dialog modal-sm">

Jifunze Tena

Kipenya Kikuu

<div class="modal-dialog modal-lg">

Jifunze Tena

Mkutano wa Kikuu wa Kikubwa

<div class="modal-dialog modal-xl">

Jifunze Tena

Kwa kawaida, ukubwa wa mkutano wa kina ni "kikuu" (500px kimoja cha kina).

Mkutano wa kikuu

Ikiwa unahitaji mkutano wa kina kuelekea kikuu kwa kina na kikomo, tumia: .modal-fullscreen Kiklasa:

Mifano

<div class="modal-dialog modal-fullscreen">

Jifunze Tena

Mkutano wa kikuu wa kikamilifu wa kikomati

Inaweza kutumia .modal-fullscreen-*-* Kiklasa kinaunda mkutano wa kina kwa eneo kikuu kwa kilele:

Kiklasa Maelezo Mifano
.modal-fullscreen-sm-down Chini ya 576px inaonyesha kwa eneo kikuu Jifunze Tena
.modal-fullscreen-md-down Chini ya 768px inaonyesha kwa eneo kikuu Jifunze Tena
.modal-fullscreen-lg-down Chini ya 992px inaonyesha kwa eneo kikuu Jifunze Tena
.modal-fullscreen-xl-down Chini ya 1200px inaonyesha kwa eneo kikuu Jifunze Tena
.modal-fullscreen-xxl-down Chini ya 1400px inaonyesha kwa eneo kikuu Jifunze Tena

Mkutano wa kikomo

Kwa kutumia .modal-dialog-centric Kiklasa, inaunda mkutano wa kina kwa ukurasa kwa kuelekea upya kikamilifu kwa kina na kikomo:

Mifano

<div class="modal-dialog modal-dialog-centered">

Jifunze Tena

Mkutano wa Kusikia

Kama ukurasa wa mkutano wa kina una matokeo mengi, hii inatambua mkutano wa kina kwa ukurasa. Tazama mifano inayofahamisha:

Mifano

<div class="modal-dialog">

Jifunze Tena

Tena, kwa kutumia .modal-dialog-scrollable Ongeza katika .modal-dialog Inaweza kuwa na mkutano pekee ambao inaragwa, ingawa hauwezi kumekataa ukuragwa wa ukurasa wa kina:

Mifano

<div class="modal-dialog modal-dialog-scrollable">

Jifunze Tena