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 . Chagua kutoka kwa kontena inayojibu, yenye upana usiobadilika (ikimaanisha max-widthmabadiliko yake katika kila sehemu ya kukatika) au upana wa maji (ikimaanisha kuwa ni 100%pana wakati wote).

Ingawa vyombo vinaweza kuwekewa viota, miundo mingi haihitaji chombo kilichowekwa kiota.

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

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

<div class="container-fluid">
  ...
</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 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:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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.