Oersicht

Komponinten en opsjes foar it útlizzen fan jo Bootstrap-projekt, ynklusyf ynpakken fan konteners, in krêftich rastersysteem, in fleksibel mediaobjekt, en responsive nutklassen.

Containers

Containers binne it meast basale layout-elemint yn Bootstrap en binne ferplicht by it brûken fan ús standert rastersysteem . Containers wurde brûkt om de ynhâld yn har te befetsjen, te paden en (soms) te sintrum. Wylst konteners kinne wurde nested, hawwe de measte yndielingen gjin nestede kontener nedich.

Bootstrap komt mei trije ferskillende konteners:

• .container, dy't in max-widthby elk responsyf brekpunt stelt
• .container-fluid, dat is width: 100%by alle brekpunten
• .container-{breakpoint}, dat is width: 100%oant it oantsjutte brekpunt

De tabel hjirûnder yllustrearret hoe't elke kontener max-widthfergeliket mei it orizjineel .containeren .container-fluidoer elk brekpunt.

Sjoch se yn aksje en fergelykje se yn ús Grid-foarbyld .

Alles yn ien

Us standertklasse .containeris in reageare kontener mei fêste breedte, wat betsjut dat de max-widthferoaringen by elk brekpunt binne.

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

Fluid

Brûk .container-fluidfoar in folsleine breedte container, oerspant de hiele breedte fan de viewport.

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

Responsive

Responsive konteners binne nij yn Bootstrap v4.4. Se tastean jo te opjaan in klasse dat is 100% breed oant de oantsjutte breakpoint wurdt berikt, wêrnei't wy jilde max-widths foar elk fan 'e hegere breakpoints. Bygelyks, .container-smis 100% breed om te begjinnen oant it smbrekpunt wurdt berikt, wêr't it sil opskaalje mei md, lg, en 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>

Responsive breakpoints

Sûnt Bootstrap is ûntwikkele om earst mobyl te wêzen, brûke wy in hantsjefol mediafragen om ferstannige brekpunten te meitsjen foar ús yndielingen en ynterfaces. Dizze brekpunten binne meastentiids basearre op minimale viewport-breedtes en lit ús eleminten opskaalje as de viewport feroaret.

Bootstrap brûkt yn it foarste plak de folgjende media-fraachbereiken - of brekpunten - yn ús boarne Sass-bestannen foar ús yndieling, rastersysteem en komponinten.

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

Sûnt wy ús boarne CSS yn Sass skriuwe, binne al ús mediafragen beskikber fia 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;
  }
}

Wy brûke sa no en dan mediafragen dy't yn 'e oare rjochting gean (de opjûne skermgrutte of lytser ):

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

Nochris binne dizze mediafragen ek beskikber fia 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;
  }
}

D'r binne ek mediafragen en mixins foar it rjochtsjen fan in inkeld segmint fan skermgrutte mei de minimale en maksimale brekpuntbreedte.

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

Dizze mediafragen binne ek te krijen fia 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) { ... }

Op deselde manier kinne mediafragen meardere brekpuntbreedtes spanne:

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

De Sass-mixin foar it rjochtsjen fan itselde berik fan skermgrutte soe wêze:

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

Z-yndeks

Ferskate Bootstrap-komponinten brûke z-index, it CSS-eigenskip dat helpt yndieling te kontrolearjen troch in tredde as te leverjen om ynhâld te regeljen. Wy brûke in standert z-yndeksskaal yn Bootstrap dy't is ûntworpen om goed navigaasje, tooltips en popovers, modalen, en mear te lagen.

Dizze hegere wearden begjinne by in willekeurige nûmer, heech en spesifyk genôch om ideaal konflikten te foarkommen. Wy hawwe in standert set fan dizze nedich oer ús lagen komponinten - tooltips, popovers, navbars, dropdowns, modals - sadat wy ridlik konsekwint kinne wêze yn it gedrach. 100D'r is gjin reden dat wy + of + net koenen hawwe brûkt 500.

Wy moedigje oanpassing fan dizze yndividuele wearden net oan; as jo ien feroarje, moatte jo se wierskynlik allegear feroarje.

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

Om oerlappende grinzen binnen komponinten te behanneljen (bgl. knoppen en ynputs yn ynfiergroepen), brûke wy lege iensiferwearden z-indexfan 1, 2, en 3foar standert, hover en aktive steaten. Op hover/focus/active bringe wy in bepaald elemint nei foaren mei in hegere z-indexwearde om har grins oer de sibling-eleminten sjen te litten.