Tirohanga

Nga waahanga me nga whiringa mo te whakatakoto i to kaupapa Bootstrap, tae atu ki te takai ipu, he punaha matiti kaha, he ahanoa pāpāho ngawari, me nga karaehe whaipainga urupare.

Nga ipu

Ko nga ipu te huānga tahora taketake rawa atu i Bootstrap me te hiahia ina whakamahi i ta maatau punaha matiti taunoa . Ka whakamahia nga ipu ki te whakauru, ki te papa, me te (i etahi wa) whakakotahi i nga ihirangi kei roto. Ahakoa ka taea te kohanga i nga ipu, ko te nuinga o nga whakatakotoranga kaore e hiahiatia he ipu kohanga.

Ka tae mai a Bootstrap me nga ipu rereke e toru:

• .container, e whakatakoto ana i te max-widthi ia waahi wehenga urupare
• .container-fluid, kei width: 100%nga waahi pakaru katoa
• .container-{breakpoint}, width: 100%tae noa ki te waahi pakaru kua tohua

Ko te ripanga i raro nei e whakaatu ana he pehea te max-widthwhakataurite o ia ipu ki te mea taketake .container, .container-fluidputa noa i ia waahi pakaru.

Tirohia ratou e mahi ana ka whakataurite i a raatau i roto i ta maatau tauira Matiti .

Katoa-i-kotahi

Ko ta maatau karaehe taunoa .containerhe ipu aro, he whanui-whanui, ko te tikanga o ana max-widthhuringa i ia waahi pakaru.

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

Wai

Whakamahia .container-fluidmo te ipu whanui tonu, me te whanui katoa o te tauranga tirohanga.

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

Whakautu

He hou nga ipu urupare i Bootstrap v4.4. Ka whakaaetia koe ki te tautuhi i te karaehe 100% te whanui kia tae ra ano te waahi pakaru kua tohua, ka mutu ka tono max-widths mo ia o nga wehenga teitei ake. Hei tauira, .container-smhe 100% te whanui ki te tiimata kia tae ra ano te smwaahi pakaru, ka piki ake ki te md, lg, me te 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>

Nga waahi pakaru urupare

I te mea kua whakawhanakehia a Bootstrap hei waea pūkoro i te tuatahi, ka whakamahia e matou he maha o nga patai pāpāho ki te hanga i nga waahi pakaru mo o matou whakatakotoranga me o maatau hononga. Ko te nuinga o enei waahanga pakaru i runga i nga whanui tauranga tirohanga iti ka taea e maatau te whakanui i nga huānga ka huri te tauranga tirohanga.

Ko te nuinga o te whakamahi a Bootstrap i nga awhe patai pāpāho e whai ake nei—he waahi wehenga ranei—i roto i ta maatau puna puna kōnae Sass mo to tahora, punaha matiti, me nga waahanga.

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

I te mea ka tuhi matou i ta matou puna CSS ki Sass, kei te waatea a matou patai panui ma te 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;
  }
}

I etahi wa ka whakamahi matou i nga patai pāpāho e haere ana ki tera atu huarahi (te rahi o te mata , he iti ake ranei ):

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

Ano ano, kei te waatea ano enei patai pāpāho ma te 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;
  }
}

Arā ano hoki nga patai pāpāho me nga whakaranu mo te aro ki te waahanga kotahi o te rahi o te mata ma te whakamahi i te iti me te morahi whawhati whanui.

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

Kei te waatea ano enei patai pāpāho ma te 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) { ... }

Waihoki, ka taea e nga patai pāpāho te whanui i nga whanui waahanga maha:

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

Ko te ranunga Sass mo te aro ki te awhe rahi o te mata ko:

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

Taupū-Z

He maha nga waahanga Bootstrap e whakamahi ana z-index, te taonga CSS e awhina ana ki te whakahaere tahora ma te whakarato i te tuaka tuatoru hei whakarite i nga ihirangi. Ka whakamahia e matou he tauine-z taunoa i Bootstrap i hoahoatia kia tika te paparanga whakaterenga, aki taputapu me nga pouvers, nga tikanga, me etahi atu.

Ko enei uara teitei ka tiimata mai i te tau koretake, teitei me te tino tika kia karohia nga papā. E hiahia ana matou ki tetahi huinga paerewa o enei puta noa i o maatau waahanga paparanga—tohu taputapu, pouvers, navbars, dropdowns, modals—kia rite tonu taatau ki nga whanonga. Karekau he take i kore ai e taea te whakamahi 100+, 500+ ranei.

Kare matou e akiaki i te whakaritenga o enei uara takitahi; Mena ka huri koe i tetahi, me whakarereke katoa koe.

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

Hei hapai i nga taitapa inaki i roto i nga waahanga (hei tauira, nga paatene me nga whakaurunga i roto i nga roopu whakauru), ka whakamahia e matou nga z-indexuara mati kotahi iti o te 1, 2, 3mo te taunoa, te whakaparo, me nga ahuatanga hohe. I runga i te hover/focus/active, ka kawea e matou tetahi huānga ki mua me te z-indexuara teitei ake hei whakaatu i to raatau rohe ki runga i nga huānga tuakana.