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ð . Gámar eru notaðir til að geyma, púða og (stundum) miðja innihaldið innan þeirra. Þó að hægt sé að hreiðra gáma, krefjast flest skipulag ekki hreiðurs gáms.

Bootstrap kemur með þremur mismunandi ílátum:

• .container, sem setur a max-widthvið hvert móttækilegt brot
• .container-fluid, sem er width: 100%á öllum brotastöðum
• .container-{breakpoint}, sem er width: 100%fram að tilgreindum brotpunkti

Taflan hér að neðan sýnir hvernig hver ílát er í max-widthsamanburði við upprunalegan .containerog .container-fluidyfir hvern brotpunkt.

Sjáðu þau í aðgerð og berðu þau saman í Grid dæminu okkar .

Allt í einu

Sjálfgefinn .containerflokkur okkar er móttækilegur gámur með fastri breidd, sem þýðir max-widthbreytingar á hverjum brotpunkti.

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

Vökvi

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

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

Móttækilegur

Móttækilegir gámar eru nýir í Bootstrap v4.4. Þeir leyfa þér að tilgreina flokk sem er 100% breiður þar til tilgreindum brotpunkti er náð, eftir það notum við max-widths fyrir hvert af hærri brotpunktunum. Til dæmis, .container-smer 100% breitt til að byrja þar til smbrotpunkti er náð, þar sem það mun stækka með md, lg, og 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>

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

Þar sem við skrifum uppruna-CSS okkar í Sass eru allar fjölmiðlafyrirspurnir okkar fáanlegar í gegnum 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;
  }
}

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

Þ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æraábendingar, sprettiglugga, siglingastikur, fellivalmyndir, modals - svo við getum verið sæmilega 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.