Source

Nsɛm a Wɔaka abom

Nneɛma ne akwan a wobɛfa so asiesie wo Bootstrap adwuma no, a nea ɛka ho ne wrapping containers, grid nhyehyɛe a ahoɔden wom, media ade a ɛyɛ mmerɛw, ne utility classes a ɛyɛ mmuae.

Nneɛma a wɔde gu mu

Containers yɛ nhyehyɛe element titiriw wɔ Bootstrap mu na ɛho hia bere a wode yɛn default grid nhyehyɛe no redi dwuma no . Paw fi ade a ɛyɛ adwuma, a ne tɛtrɛtɛ gyina hɔ (a ɛkyerɛ sɛ max-widthɛsakra wɔ beae biara a ɛpaapae) anaasɛ nsu a ɛtrɛw (a ɛkyerɛ sɛ 100%ɛtrɛw bere nyinaa).

Bere a wobetumi ayɛ nkorabata no nest no, nhyehyɛe dodow no ara nhia sɛ wɔde nkorabata a wɔde ahyɛ mu.

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

Fa di dwuma .container-fluidma ade a ne tɛtrɛtɛ nyinaa, a ɛtrɛw hwɛbea no ntrɛwmu nyinaa.

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

Mmuae a wɔde gyae nneɛma

Esiane sɛ wɔayɛ Bootstrap sɛ ɛnyɛ mobile kan nti, yɛde media nsɛmmisa kakraa bi di dwuma de yɛ breakpoints a ntease wom ma yɛn layouts ne interfaces. Saa breakpoints yi gyina viewport widths a ɛsua koraa so na ɛma yɛn kwan ma yɛ scale up elements bere a viewport no sesa no.

Bootstrap de media asɛmmisa kwan a edidi so yi di dwuma titiriw—anaasɛ breakpoints—wɔ yɛn source Sass fael ahorow no mu ma yɛn nhyehyɛe, grid nhyehyɛe, ne nneɛma a ɛwom no.

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

Esiane sɛ yɛkyerɛw yɛn source CSS wɔ Sass mu nti, yɛn media nsɛmmisa nyinaa wɔ hɔ denam Sass mixins so:

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

Ɛtɔ mmere bi a yɛde media nsɛmmisa a ɛkɔ ɔkwan foforo so (screen size a wɔde ama anaa nea ɛsua ) di dwuma:

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

Hyɛ no nsow sɛ esiane sɛ mprempren browser ahorow ntumi mmoa range context queries , yɛyɛ adwuma twa anohyeto ahorow a ɛwɔ min-ne max-prefixes ne viewports a ɛwɔ fractional widths (a ebetumi aba wɔ tebea horow bi mu wɔ high-dpi mfiri ahorow so, sɛ nhwɛso no) ho dwuma denam values a ɛwɔ pɛpɛɛpɛyɛ a ɛkorɔn a yɛde di dwuma ma saa ntotoho ahorow yi so .

Saa bere yi nso, saa media nsɛmmisa yi nso wɔ hɔ denam Sass mixins so:

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

Afei nso media nsɛmmisa ne mixins wɔ hɔ a wɔde si screen akɛseɛ fã baako a wɔde breakpoint widths a ɛsua ne kɛseɛ di dwuma.

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

Saa media nsɛmmisa yi nso wɔ hɔ denam Sass mixins so:

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

Saa ara nso na media nsɛmmisa betumi atrɛw breakpoint ntrɛwmu pii:

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

Sass mixin a wɔde bɛto screen size range koro no ara so no bɛyɛ:

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

Z-index a ɛwɔ hɔ

Bootstrap afã horow pii de di dwuma z-index, CSS agyapade a ɛboa ma wɔhwɛ nhyehyɛe so denam axis a ɛto so abiɛsa a wɔde ma de hyehyɛ nsɛm no so. Yɛde default z-index scale di dwuma wɔ Bootstrap mu a wɔayɛ sɛ ɛbɛma layer navigation, adwinnade ho nsɛm ne popovers, modals, ne nea ɛkeka ho yiye.

Saa gyinapɛn ahorow a ɛkorɔn yi fi ase wɔ dodow a wɔmpɛ so, a ɛkorɔn na ɛyɛ pɔtee sɛnea ɛbɛyɛ a ɛbɛyɛ papa sɛ wɔbɛkwati ntawntawdi. Yɛhia eyinom a wɔahyehyɛ no gyinapɛn wɔ yɛn afã horow a wɔayɛ no ntoatoaso no nyinaa mu —adwinnade ho nsɛm, popovers, navbars, dropdowns, modals —sɛnea ɛbɛyɛ a yebetumi ayɛ nea ɛfata wɔ nneyɛe no mu. Biribiara nni hɔ a enti anka yɛrentumi mfa 100+ anaa 500+ nni dwuma.

Yɛnhyɛ saa ankorankoro gyinapɛn ahorow yi a wɔbɛsakra no ho nkuran; sɛ wosakra biako a, ɛda adi sɛ ɛsɛ sɛ wosakra ne nyinaa.

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

Sɛ yɛbɛdi ahyeɛ a ɛka bom wɔ afã ahodoɔ no mu ho dwuma (sɛ nhwɛsoɔ no, bɔtɔn ne nsɛm a wɔde hyɛ mu wɔ nsɛm a wɔde hyɛ mu akuo mu), yɛde digit baako z-indexbotaeɛ a ɛba fam a ɛyɛ 1, 2, ne 3default, hover, ne tebea a ɛyɛ adwuma di dwuma. Wɔ hover/focus/active so no, yɛde element pɔtee bi ba anim a ɛwɔ z-indexbo a ɛkorɔn de kyerɛ wɔn hye wɔ anuanom element ahorow no so.