Yfirlit

Íhlutir og valkostir til að setja upp Bootstrap verkefnið þitt, þar á meðal umbúðir íláta, öflugt ristkerfi, sveigjanlegan miðlunarhlut og móttækilegir gagnaflokkar.

Gámar

Gámar eru grunnútlitsþátturinn í Bootstrap og eru nauðsynlegir þegar sjálfgefið netkerfi okkar er notað . Veldu úr móttækilegum, fastri breidd íláts (sem þýðir max-widthbreytingar á hverjum brotpunkti) eða vökvabreidd (sem þýðir að hann er 100%breiður allan tímann).

Þó að hægt sé að hreiðra gáma, krefjast flest skipulag ekki hreiðurs gáms.

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

Notaðu .container-fluidfyrir ílát í fullri breidd, sem spannar alla breidd útsýnisgáttarinnar.

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

Móttækileg brot

Þar sem Bootstrap er þróað til að vera hreyfanlegur fyrst, notum við handfylli af miðlunarfyrirspurnum til að búa til skynsamlega brotpunkta fyrir útlit okkar og viðmót. Þessir brotpunktar eru að mestu byggðir á lágmarksbreiddum útsýnisgáttar og gera okkur kleift að stækka þætti eftir því sem útsýnisgáttin breytist.

Bootstrap notar fyrst og fremst eftirfarandi margmiðlunarfyrirspurnasvið - eða brotpunkta - í uppruna Sass skrám okkar fyrir útlitið okkar, netkerfi og íhluti.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Þar sem við skrifum uppruna-CSS okkar í Sass eru allar fjölmiðlafyrirspurnir okkar fáanlegar í gegnum Sass mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Við notum stundum fjölmiðlafyrirspurnir sem fara í hina áttina (uppgefin skjástærð eða minni ):

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

Enn og aftur eru þessar fjölmiðlafyrirspurnir einnig fáanlegar í gegnum Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Það eru líka fjölmiðlafyrirspurnir og blöndun til að miða á einn hluta skjástærða með því að nota lágmarks- og hámarksbrotsbreidd.

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

Þessar fjölmiðlafyrirspurnir eru einnig fáanlegar í gegnum 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) { ... }

Á sama hátt geta fjölmiðlafyrirspurnir spannað margar brotpunktsbreiddir:

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

Sass blandan til að miða á sama skjástærðarsvið væri:

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

Z-vísitala

Nokkrir Bootstrap íhlutir nota z-index, CSS eignina sem hjálpar til við að stjórna skipulagi með því að útvega þriðja ás til að raða efni. Við notum sjálfgefna z-vísitölukvarða í Bootstrap sem hefur verið hannaður til að skipuleggja siglingar, verkfæraábendingar og sprettiglugga, modals og fleira.

Þessi hærri gildi byrja á handahófskenndri tölu, nógu há og ákveðin til að helst forðast árekstra. Við þurfum staðlað sett af þessu yfir lagskiptu íhlutina okkar - verkfæraleiðbeiningar, sprettiglugga, siglingastikur, fellivalmyndir, modals - svo við getum verið nokkuð samkvæm í hegðuninni. Það er engin ástæða fyrir því að við hefðum ekki getað notað 100+ eða 500+.

Við hvetjum ekki til að sérsníða þessi einstöku gildi; ættir þú að skipta um einn, þú þarft líklega að breyta þeim öllum.

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

Til að meðhöndla skarast landamæri innan íhluta (td hnappa og inntak í inntakshópum), notum við lág eins tölustafa z-indexgildi 1, 2, og 3fyrir sjálfgefið, sveima og virkt ástand. Á sveima/fókus/virkum tökum við tiltekinn þátt í fremstu röð með hærra z-indexgildi til að sýna landamæri þeirra yfir systkinaþáttunum.