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 . Zotengera zimagwiritsidwa ntchito kukhala, pad, ndipo (nthawi zina) pakati zomwe zili mkati mwake. Ngakhale zotengera zimatha kukhala zisa, masanjidwe ambiri safuna chidebe chokhala ndi zisa.

Bootstrap imabwera ndi zotengera zitatu zosiyanasiyana:

• .container, yomwe imayika max-widthpagawo lililonse lomvera
• .container-fluid, zomwe zimakhala width: 100%zosokoneza
• .container-{breakpoint}, zomwe zili width: 100%mpaka kusweka kotchulidwa

Tebulo ili m'munsiyi ikuwonetsa momwe chidebe chilichonse max-widthchimafananira ndi choyambirira .containerkomanso .container-fluidpagawo lililonse loduka.

Awoneni akugwira ntchito ndikufanizira mu chitsanzo chathu cha Gridi .

Zonse-mu-zimodzi

Gulu lathu losasinthika .containerndi chidebe chomvera, chokhazikika, kutanthauza max-widthkusintha kwake pagawo lililonse.

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

Madzi

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

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

Womvera

Zotengera zomvera ndi zatsopano mu Bootstrap v4.4. Amakulolani kuti mutchule kalasi yomwe ili ndi 100% yotambasula mpaka malo omwe mwatchulidwawo afika, pambuyo pake timayika max-widths pa chigawo chilichonse chapamwamba. Mwachitsanzo, .container-smndi 100% m'lifupi kuti ayambe mpaka pomwe smafika, pomwe adzakwera ndi md, lg, ndi 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>

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

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, 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.