Source

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 . Kies út in responsive kontener mei fêste breedte (dat betsjut dat de max-widthferoaringen by elk brekpunt betsjutte) of floeibere breedte (dat betsjut dat it de 100%hiele tiid breed is).

Wylst konteners kinne wurde nested, hawwe de measte yndielingen gjin nestede kontener nedich.

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

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

<div class="container-fluid">
  ...
</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

Tink derom dat, om't browsers op it stuit gjin berikkontekstfragen stypje , wurkje wy om de beheiningen fan min-en max-foarheaksels en viewports mei fraksjonele breedtes (wat kinne foarkomme ûnder bepaalde betingsten op apparaten mei hege dpi, bygelyks) troch wearden mei hegere presyzje te brûken foar dizze fergelikingen .

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.