Vështrim i përgjithshëm

Komponentët dhe opsionet për paraqitjen e projektit tuaj Bootstrap, duke përfshirë kontejnerët e mbështjelljes, një sistem të fuqishëm rrjeti, një objekt medial fleksibël dhe klasa të shërbimeve të përgjegjshme.

Kontejnerët

Kontejnerët janë elementi më bazë i paraqitjes në Bootstrap dhe kërkohen kur përdorni sistemin tonë të paracaktuar të rrjetit . Kontejnerët përdoren për të përmbajtur, mbushur dhe (ndonjëherë) qendër përmbajtjen brenda tyre. Ndërsa kontejnerët mund të vendosen me fole, shumica e paraqitjeve nuk kërkojnë një enë të mbivendosur.

Bootstrap vjen me tre kontejnerë të ndryshëm:

• .container, i cili vendos një max-widthnë çdo pikë ndërprerjeje të përgjegjshme
• .container-fluid, e cila është width: 100%në të gjitha pikat e ndërprerjes
• .container-{breakpoint}, që është width: 100%deri në pikën e caktuar të ndërprerjes

Tabela më poshtë ilustron se si çdo kontejner max-widthkrahasohet me origjinalin .containerdhe .container-fluidnë çdo pikë ndërprerjeje.

Shihni ato në veprim dhe krahasojini ato në shembullin tonë Grid .

Të gjitha në një

Klasa jonë e paracaktuar .containerështë një kontejner i përgjegjshëm, me gjerësi fikse, që do të thotë max-widthndryshimet e tij në çdo pikë ndërprerjeje.

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

Lëng

Përdoreni .container-fluidpër një kontejner me gjerësi të plotë, që përfshin të gjithë gjerësinë e portës së shikimit.

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

Të përgjegjshme

Kontejnerët e përgjegjshëm janë të rinj në Bootstrap v4.4. Ato ju lejojnë të specifikoni një klasë që është 100% e gjerë derisa të arrihet pika e caktuar e ndërprerjes, pas së cilës ne aplikojmë max-widths për secilën nga pikat më të larta të ndërprerjes. Për shembull, .container-smështë 100% e gjerë për të filluar derisa të smarrihet pika e ndërprerjes, ku do të rritet me md, lg, dhe 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>

Pikat e ndërprerjes së përgjegjshme

Meqenëse Bootstrap është zhvilluar për të qenë fillimisht celular, ne përdorim një pjesë të vogël të pyetjeve të medias për të krijuar pika ndërprerjesh të ndjeshme për paraqitjet dhe ndërfaqet tona. Këto pika të ndërprerjes bazohen kryesisht në gjerësinë minimale të portave të pamjes dhe na lejojnë të përshkallëzojmë elementet ndërsa porta e pamjes ndryshon.

Bootstrap kryesisht përdor intervalet e mëposhtme të pyetjeve të medias—ose pikat e ndërprerjes—në skedarët tanë burimor Sass për paraqitjen, sistemin e rrjetit dhe komponentët tanë.

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

Meqenëse ne shkruajmë CSS-në tonë të burimit në Sass, të gjitha pyetjet tona të medias janë të disponueshme përmes Sass mixins:

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

Ne përdorim herë pas here pyetje mediatike që shkojnë në drejtimin tjetër (madhësia e dhënë e ekranit ose më e vogël ):

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

Edhe një herë, këto pyetje mediatike janë gjithashtu të disponueshme përmes Sass mixins:

@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;
  }
}

Ekzistojnë gjithashtu pyetje dhe miks media për të synuar një segment të vetëm të madhësive të ekranit duke përdorur gjerësinë minimale dhe maksimale të pikës së ndërprerjes.

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

Këto pyetje për media janë gjithashtu të disponueshme përmes 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) { ... }

Në mënyrë të ngjashme, pyetjet e medias mund të përfshijnë gjerësi të shumëfishta pikash:

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

Përzierja Sass për të synuar të njëjtin gamë të madhësisë së ekranit do të ishte:

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

Z-indeksi

Disa komponentë Bootstrap përdorin z-index, vetinë CSS që ndihmon në kontrollin e paraqitjes duke ofruar një bosht të tretë për të rregulluar përmbajtjen. Ne përdorim një shkallë të parazgjedhur të indeksit z në Bootstrap që është krijuar për të shtruar siç duhet navigimin, këshillat e veglave dhe popovers, modalet dhe më shumë.

Këto vlera më të larta fillojnë me një numër arbitrar, mjaftueshëm të lartë dhe specifik për të shmangur në mënyrë ideale konfliktet. Ne kemi nevojë për një grup standard të këtyre në komponentët tanë të shtresuar - këshilla të veglave, popover, shirita navigimi, zbritje, modale - në mënyrë që të mund të jemi mjaft të qëndrueshëm në sjelljet. Nuk ka asnjë arsye që nuk mund të kishim përdorur 100+ ose 500+.

Ne nuk inkurajojmë personalizimin e këtyre vlerave individuale; nëse ndryshoni një, ka të ngjarë t'ju duhet t'i ndryshoni të gjitha.

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

z-indexPër të trajtuar kufijtë e mbivendosur brenda komponentëve (p.sh. butonat dhe hyrjet në grupet hyrëse), ne përdorim vlera të ulëta njëshifrore të 1, 2, dhe 3për gjendjet e paracaktuar, hover dhe aktive. Kur rri pezull/fokus/aktiv, ne sjellim në plan të parë një element të veçantë me një z-indexvlerë më të lartë për të treguar kufirin e tyre mbi elementët e vëllezërve.