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 . Kōwhiria mai i te ipu aro, te whanui-whanui (te tikanga ko ona max-widthhuringa i ia waahi pakaru) ranei te whanui-wai (te tikanga he 100%whanui i nga wa katoa).

Ahakoa ka taea te kohanga i nga ipu, ko te nuinga o nga whakatakotoranga kaore e hiahiatia he ipu kohanga.

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

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

<div class="container-fluid">
  ...
</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 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:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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.