Muhtasari

Vipengele na chaguo za kuweka mradi wako wa Bootstrap, ikiwa ni pamoja na vyombo vya kufunga, mfumo wa gridi ya nguvu, kifaa cha media kinachonyumbulika, na madarasa ya matumizi yanayojibu.

Vyombo

Vyombo ndio kipengele cha msingi zaidi cha mpangilio katika Bootstrap na kinahitajika unapotumia mfumo wetu chaguo-msingi wa gridi ya taifa . Vyombo hutumika kuwa na, pedi, na (wakati mwingine) katikati yaliyomo ndani yake. Ingawa vyombo vinaweza kuwekewa viota, miundo mingi haihitaji chombo kilichowekwa kiota.

Bootstrap inakuja na vyombo vitatu tofauti:

• .container, ambayo huweka max-widthkatika kila sehemu ya msikivu
• .container-fluid, ambayo ni width: 100%sehemu za mapumziko
• .container-{breakpoint}, ambayo ni width: 100%hadi kikomo maalum

Jedwali lililo hapa chini linaonyesha jinsi kila kontena max-widthlinavyolinganishwa na la asili .containerna .container-fluidkatika kila sehemu ya kukatiza.

Zione zikitenda kazi na uzilinganishe katika mfano wetu wa Gridi .

Yote kwa moja

Darasa letu chaguo-msingi .containerni kontena inayojibu, yenye upana usiobadilika, ikimaanisha max-widthmabadiliko yake katika kila sehemu ya kukatiza.

<div class="container">
  <!-- Content here -->
</div>

Majimaji

Tumia .container-fluidkwa kontena lenye upana kamili, linalojumuisha upana mzima wa lango la kutazama.

<div class="container-fluid">
  ...
</div>

Msikivu

Vyombo vinavyoitikia ni vipya katika Bootstrap v4.4. Zinakuruhusu kubainisha darasa ambalo lina upana wa 100% hadi kikomo kilichobainishwa kifikiwe, kisha tutatumia max-widths kwa kila sehemu ya juu zaidi. Kwa mfano, .container-smina upana wa 100% kuanza hadi smkikomo kifikiwe, ambapo kitaongezeka na md, lg, na xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Vizuizi vinavyoitikia

Kwa kuwa Bootstrap imeundwa kuwa ya simu ya kwanza, tunatumia maswali machache ya midia ili kuunda viingilio vya busara vya mipangilio na violesura vyetu. Viingilio hivi zaidi hutegemea upana wa chini zaidi wa kituo cha kutazama na huturuhusu kuongeza vipengee kadiri nafasi ya kutazama inavyobadilika.

Bootstrap kimsingi hutumia safu za hoja za media zifuatazo-au sehemu za utatuzi-katika chanzo chetu cha faili za Sass kwa mpangilio wetu, mfumo wa gridi ya taifa na vipengee.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Kwa kuwa tunaandika chanzo chetu cha CSS huko Sass, maswali yetu yote ya media yanapatikana kupitia mchanganyiko wa Sass:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Mara kwa mara sisi hutumia maswali ya midia ambayo huenda upande mwingine (ukubwa wa skrini uliotolewa au ndogo zaidi ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Kwa mara nyingine tena, maswali haya ya media yanapatikana pia kupitia mchanganyiko wa Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Pia kuna maswali ya midia na michanganyiko ya kulenga sehemu moja ya ukubwa wa skrini kwa kutumia upeo wa chini na upeo wa upana wa sehemu ya kukatika.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Maswali haya ya media yanapatikana pia kupitia mchanganyiko wa Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Vile vile, hoja za midia huenda zikachukua upana wa sehemu nyingi za utatuzi:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Mchanganyiko wa Sass wa kulenga safu ya saizi sawa ya skrini itakuwa:

@include media-breakpoint-between(md, xl) { ... }

index ya Z

Vipengee kadhaa vya Bootstrap hutumia z-index, sifa ya CSS ambayo husaidia kudhibiti mpangilio kwa kutoa mhimili wa tatu kupanga maudhui. Tunatumia kipimo chaguo-msingi cha z-index katika Bootstrap ambacho kimeundwa ili kuelekeza vyema safu, vidokezo vya zana na popover, moduli, na zaidi.

Thamani hizi za juu huanzia kwenye nambari isiyo ya kawaida, ya juu na mahususi ili kuepuka mizozo. Tunahitaji seti ya kawaida ya haya katika vipengele vyetu vilivyowekwa safu-vidokezo vya zana, popover, navbar, dropdowns, modals-ili tuweze kuwa thabiti katika tabia. Hakuna sababu hatukuweza kutumia 100+ au 500+.

Hatuhimizi ubinafsishaji wa maadili haya mahususi; ukibadilisha moja, kuna uwezekano utahitaji kuzibadilisha zote.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Ili kushughulikia mipaka inayopishana ndani ya vijenzi (km, vitufe na ingizo katika vikundi vya ingizo), tunatumia nambari za chini za tarakimu moja z-indexza 1, 2, na 3kwa hali chaguo-msingi, kielelezo na amilifu. Kwenye kuelea/kulenga/amilifu, tunaleta kipengele fulani mbele chenye z-indexthamani ya juu ili kuonyesha mpaka wao juu ya vipengele vya kaka.