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 . Wɔde nsukorade di dwuma de kura, pad, na (ɛtɔ mmere bi a) nneɛma a ɛwɔ mu no mfinimfini. Bere a wobetumi ayɛ nkorabata no nest no, nhyehyɛe dodow no ara nhia sɛ wɔde nkorabata a wɔde ahyɛ mu.

Bootstrap no de nneɛma ahorow abiɛsa a wɔde gu mu ba:

• .container, a ɛde a si hɔ max-widthwɔ mmuae biara mu breakpoint
• .container-fluid, a ɛyɛ width: 100%breakpoints biara mu
• .container-{breakpoint}, a ɛyɛ width: 100%kosi sɛ wobegyae bere a wɔakyerɛ no

Table a ɛwɔ aseɛ ha yi kyerɛ sɛdeɛ container biara max-widthde toto mfitiaseɛ no .containerho ne .container-fluidbreakpoint biara so.

Hwɛ wɔn wɔ adeyɛ mu na fa toto ho wɔ yɛn Grid nhwɛso no mu .

Ne nyinaa-wɔ-baako mu

Yɛn default .containerclass no yɛ mmuaeɛ, fixed-width container, a ɛkyerɛ ne max-widthnsakraeɛ wɔ breakpoint biara.

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

Nsudeɛ

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 ma

Responsive containers yɛ foforo wɔ Bootstrap v4.4 mu. Wɔma wo kwan ma wokyerɛ adesuakuw bi a ɛtrɛw 100% kosi sɛ wobedu breakpoint a wɔakyerɛ no ho, na ɛno akyi no yɛde max-widths di dwuma ma breakpoints a ɛkorɔn no mu biara. Sɛ nhwɛso no, .container-smɛyɛ 100% trɛw sɛ wobefi ase kosi sɛ wobedu smbreakpoint no ho, baabi a ɛbɛkɔ soro denam md, lg, ne 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>

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 dodoɔ no ara na ɛma yɛn kwan ma yɛ scale up elements berɛ a viewport no sesa.

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

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 active states 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.