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 imayikamax-width
pagawo lililonse lomvera.container-fluid
, zomwe zimakhalawidth: 100%
zosokoneza.container-{breakpoint}
, zomwe ziliwidth: 100%
mpaka kusweka kotchulidwa
Tebulo ili m'munsiyi ikuwonetsa momwe chidebe chilichonse max-width
chimafananira ndi choyambirira .container
komanso .container-fluid
pagawo lililonse loduka.
Awoneni akugwira ntchito ndikufananiza mu Grid chitsanzo chathu .
Zocheperako < 576px |
Yaing'ono ≥576px |
Wapakatikati ≥768px |
Chachikulu ≥992px |
Chachikulu kwambiri ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Zonse-mu-zimodzi
Gulu lathu losasinthika .container
ndi chidebe chomvera, chokhazikika, kutanthauza max-width
kusintha kwake kulikonse.
<div class="container">
<!-- Content here -->
</div>
Madzi
Gwiritsani .container-fluid
ntchito 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-width
s pa chigawo chilichonse chapamwamba. Mwachitsanzo, .container-sm
ndi 100% m'lifupi kuti ayambe mpaka pomwe sm
afika, 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 azama media akupezeka kudzera pa ma mixin a 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
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, modal, ndi zina zambiri.
Miyezo yapamwambayi imayambira pa nambala yosawerengeka, yokwera komanso yachindunji kuti ipewe 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 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-index
a 1
, 2
, ndi 3
makonda, hover, ndi makonda. Pa hover/focus/active, timabweretsa chinthu china patsogolo chomwe chili ndi z-index
mtengo wapamwamba kuti chiwonetse malire awo pazigawo za abale.