Source

Nchịkọta

Ngwa na nhọrọ maka ịtọpụta ọrụ Bootstrap gị, gụnyere ihe mkpuchi, sistemu grid siri ike, ihe mgbasa ozi na-agbanwe agbanwe, yana klaasị na-anabata.

Akpa

Akpa bụ ihe nhazi nhazi kachasị na Bootstrap ma achọrọ ya mgbe ị na-eji sistemụ grid anyị . Họrọ n'ime akpa na-anabata, nke nwere ogologo obosara (nke pụtara max-widthmgbanwe ya na ebe nkwụsịtụ ọ bụla) ma ọ bụ obosara mmiri (pụtara na ọ na- 100%adị obosara mgbe niile).

Ọ bụ ezie na enwere ike ịgbanye arịa , ọtụtụ nhazi anaghị achọ akpa akwụrụ.

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

Jiri .container-fluidmaka akpa obosara zuru oke, na-agbasa obosara nke ebe nlele.

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

Ebe nkwụsịtụ na-anabata

Ebe ọ bụ na ebu ụzọ mepụta Bootstrap ka ọ bụrụ ekwentị mkpanaaka, anyị na-eji ajụjụ mgbasa ozi dị ole na ole mepụta ebe nkwụsịtụ nwere ezi uche maka nhazi na ihu anyị. Ebe nkwụsịtụ ndị a na-adaberekarị na obosara nlele opekempe ma na-enye anyị ohere ịbawanye ihe dị ka ihe nlele na-agbanwe.

Bootstrap na-eji usoro ajụjụ mgbasa ozi ndị a na-esonụ-ma ọ bụ ebe nkwụsịtụ-na faịlụ Sass anyị maka nhazi, usoro grid, na akụrụngwa anyị.

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

Ebe anyị na-ede CSS isi iyi anyị na Sass, ajụjụ mgbasa ozi anyị niile dị site na mixins Sass:

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

Anyị na-eji ajụjụ mgbasa ozi na-aga n'akụkụ ọzọ (nha ihuenyo enyere ma ọ bụ obere ):

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

Rịba ama na ebe ọ bụ na ihe nchọgharị anaghị akwado ajụjụ ọnọdụ ọnọdụ dị ugbu a , anyị na-arụ ọrụ na njedebe nke prefixes min-namax- viewport nwere obosara akụkụ (nke nwere ike ime n'okpuru ọnọdụ ụfọdụ na ngwaọrụ dpi dị elu, dịka ọmụmaatụ) site na iji ụkpụrụ nwere nkenke dị elu maka ntụnyere ndị a. .

Ọzọkwa, ajụjụ mgbasa ozi ndị a dịkwa site na 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;
  }
}

Enwekwara ajụjụ mgbasa ozi na mixins maka ịchebe otu akụkụ nke nha ihuenyo site na iji opekempe na obosara nkwụsịtụ kacha.

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

Ajụjụ mgbasa ozi ndị a dịkwa site na mixins Sass:

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

N'otu aka ahụ, ajụjụ mgbasa ozi nwere ike gbasaa ọtụtụ obosara nkwụsịtụ:

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

Ngwakọta Sass maka ịchụ otu nha nha ihuenyo ga-abụ:

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

Z-index

Ọtụtụ ngwa Bootstrap na-eji z-index, ihe onwunwe CSS na-enyere aka njikwa nhazi site n'inye axis nke atọ iji hazie ọdịnaya. Anyị na-eji nha nha z-index ndabara na Bootstrap nke emebere ka ọ bụrụ ntugharị nke ọma, ndụmọdụ ngwaọrụ na popovers, modals na ndị ọzọ.

Ụkpụrụ ndị a dị elu na-amalite na ọnụọgụ aka ike, dị elu na nke akọwapụtara nke ọma iji zere esemokwu. Anyị chọrọ usoro ọkọlọtọ nke ihe ndị a n'ofe akụkụ anyị nwere akwa-ntụpọ ngwaọrụ, popovers, navbars, dropdowns, modals-ka anyị wee nwee ike ịdị na-agbanwe agbanwe na omume. Ọ nweghị ihe kpatara na anyị agaghị eji 100+ ma ọ bụ 500+ mee ihe.

Anyị anaghị akwado ịhazi ụkpụrụ ndị a n'otu n'otu; ọ bụrụ na ị gbanwee otu, o yikarịrị ka ị ga-achọ ịgbanwe ha niile.

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

Iji jikwaa oke oke n'ime akụrụngwa (dịka ọmụmaatụ, bọtịnụ na ntinye n'ime otu ntinye), anyị na-eji z-indexụkpụrụ otu nkeji dị ala nke 1, 2, yana 3maka ndabara, hover na steeti nọ n'ọrụ. Na hover/focus/na-arụsi ọrụ ike, anyị na-ebute otu mmewere n'ihu nke nwere z-indexuru dị elu iji gosi oke ha n'elu ihe ụmụnne.