Mwachidule

Zida ndi zosankha pakuyika pulojekiti yanu ya Bootstrap, kuphatikiza zotengera zokutira, makina amphamvu a gridi, chinthu chosinthika chapa media, ndi makalasi omvera.

Zotengera

Zotengera ndizomwe zimayambira kwambiri mu Bootstrap ndipo zimafunika mukamagwiritsa ntchito gridi yathu yosasinthika . Sankhani kuchokera mu chidebe choyankhira, chotalikirapo (kutanthauza max-widthkusintha kwake pamalo aliwonse oduka) kapena m'lifupi mwake (kutanthauza kuti ndi 100%yayikulu nthawi zonse).

Ngakhale zotengera zimatha kukhala zisa, masanjidwe ambiri safuna chidebe chokhala ndi zisa.

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

Gwiritsani .container-fluidntchito chidebe chokhala ndi m'lifupi mwake, kufalikira m'lifupi lonse la malo owonera.

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

Kuyankha breakpoints

Popeza Bootstrap idapangidwa kuti ikhale yam'manja poyamba, timagwiritsa ntchito mafunso angapo azama TV kuti tipange zopumira zomveka pamasanjidwe athu ndi mawonekedwe athu. Malo opumirawa nthawi zambiri amatengera kukula kwa mawonekedwe ocheperako ndipo amatilola kuti tiwonjeze zinthu momwe mawonekedwe akusintha.

Bootstrap imagwiritsa ntchito mndandanda wamafunso otsatirawa - kapena ma breakpoints - m'mafayilo athu a Sass pamawonekedwe athu, grid system, ndi zida.

// 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) { ... }

Popeza timalemba gwero lathu la CSS ku Sass, mafunso athu onse atolankhani akupezeka kudzera kusakaniza kwa 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;
  }
}

Nthawi zina timagwiritsa ntchito mafunso azama TV omwe amapita mbali ina (kukula kwa skrini kapena kucheperako ):

// 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

Apanso, mafunso awa atolankhani amapezekanso kudzera pa Sass mixin:

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

Palinso mafunso atolankhani ndi zosakaniza zolozera gawo limodzi la makulidwe a skrini pogwiritsa ntchito kutalika kocheperako komanso kopitilira muyeso.

// 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) { ... }

Mafunso awa akupezekanso kudzera pa Sass mixins:

@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) { ... }

Momwemonso, mafunso azama media atha kufalikira m'magawo angapo:

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

Kuphatikizika kwa Sass poyang'ana mawonekedwe amtundu womwewo kungakhale:

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

Z - index

Zigawo zingapo za Bootstrap zimagwiritsa ntchito z-index, katundu wa CSS womwe umathandizira kuwongolera masanjidwe popereka olamulira achitatu kuti akonze zomwe zili. Timagwiritsa ntchito sikelo yokhazikika ya z-index mu Bootstrap yomwe idapangidwa kuti ikhale yosanjikiza bwino, malangizo a zida ndi popovers, modal, ndi zina zambiri.

Miyezo yapamwambayi imayambira pa nambala yosawerengeka, yokwera komanso yachindunji kuti ipewe mikangano. Timafunikira seti yokhazikika ya izi pazigawo zathu zosanjikiza - zida, popovers, ma navbar, zotsikira, ma modals - kuti titha kukhala osasinthasintha pamakhalidwe. Palibe chifukwa chomwe sitinagwiritse ntchito 100+ kapena 500+.

Sitikulimbikitsa kuti muzikonda izi; mukasintha chimodzi, muyenera kusintha onse.

$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;

Kuti tithane ndi malire omwe akudutsana mkati mwa zigawo (monga mabatani ndi zolowetsa m'magulu olowetsa), timagwiritsa ntchito manambala otsika z-indexa 1, 2, ndi 3makonda, hover, ndi makonda. Pa hover/focus/active, timabweretsa chinthu china kutsogolo chomwe chili ndi z-indexmtengo wapamwamba kuti chiwonetse malire awo pa zinthu za abale.