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 . Vyombo hutumika kuwa na, pedi, na (wakati mwingine) katikati yaliyomo ndani yake. Ingawa vyombo vinaweza kuwekewa viota, miundo mingi haihitaji chombo kilichowekwa kiota.
Bootstrap inakuja na vyombo vitatu tofauti:
.container
, ambayo huwekamax-width
katika kila sehemu ya msikivu.container-fluid
, ambayo niwidth: 100%
sehemu za mapumziko.container-{breakpoint}
, ambayo niwidth: 100%
hadi kikomo maalum
Jedwali lililo hapa chini linaonyesha jinsi kila kontena max-width
linavyolinganishwa na la asili .container
na .container-fluid
katika kila sehemu ya kukatiza.
Zione zikitenda kazi na uzilinganishe katika mfano wetu wa Gridi .
Ndogo zaidi <576px |
Ndogo ≥576px |
Wastani ≥768px |
Kubwa ≥992px |
Kubwa zaidi ≥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% |
Yote kwa moja
Darasa letu chaguo-msingi .container
ni kontena inayojibu, yenye upana usiobadilika, ikimaanisha max-width
mabadiliko yake katika kila sehemu ya kukatiza.
<div class="container">
<!-- Content here -->
</div>
Majimaji
Tumia .container-fluid
kwa kontena lenye upana kamili, linalojumuisha upana mzima wa lango la kutazama.
<div class="container-fluid">
...
</div>
Msikivu
Vyombo vinavyoitikia ni vipya katika Bootstrap v4.4. Zinakuruhusu kubainisha darasa ambalo lina upana wa 100% hadi kikomo kilichobainishwa kifikiwe, kisha tutatumia max-width
s kwa kila sehemu ya juu zaidi. Kwa mfano, .container-sm
ina upana wa 100% kuanza hadi sm
kikomo kifikiwe, ambapo kitaongezeka na md
, lg
, na 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>
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 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) { ... }
Kwa kuwa tunaandika chanzo chetu cha CSS huko Sass, maswali yetu yote ya media yanapatikana kupitia mchanganyiko wa 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;
}
}
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
min-
na max-
viambishi awali na tovuti za kutazama zenye upana wa sehemu (ambayo inaweza kutokea chini ya hali fulani kwenye vifaa vya juu vya dpi, kwa mfano) kwa kutumia thamani kwa usahihi wa juu kwa ulinganisho huu. .
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) { ... }
// 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;
}
}
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-index
za 1
, 2
, na 3
kwa hali chaguo-msingi, kielelezo na amilifu. Kwenye kuelea/kulenga/amilifu, tunaleta kipengele fulani mbele chenye z-index
thamani ya juu ili kuonyesha mpaka wao juu ya vipengele vya kaka.