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, chokhala ndi m'lifupi mwake (kutanthauza max-widthkusintha kwake pamalo aliwonse) kapena m'lifupi mwake (kutanthauza kuti ndi 100%lalikulu 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 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) { ... }

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

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

Zindikirani kuti popeza asakatuli sakuthandiza pano mafunso osiyanasiyana , timagwiritsa ntchito malire a ma min-prefixes max-ndi mawonedwe okhala ndi m'lifupi mwake (omwe amatha kuchitika pazida zamtundu wapamwamba wa dpi, mwachitsanzo) pogwiritsa ntchito milingo yolondola kwambiri poyerekezera izi. .

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

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, modals, ndi zina zambiri.

Miyezo yapamwambayi imayambira pa nambala yosawerengeka, yokwera komanso yachindunji kuti mupewe mikangano. Timafunikira seti yokhazikika ya izi m'magawo athu osanjikiza - zida, popovers, navbar, dropdown, modals - kuti titha kukhala osasinthasintha pamakhalidwe. Palibe chifukwa chomwe sitinagwiritse ntchito 100+ kapena 500+.

Sitikulimbikitsa kuti musinthe makonda awa; 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 patsogolo chomwe chili ndi z-indexmtengo wapamwamba kuti chiwonetse malire awo pazigawo za abale.