Dubawa

Abubuwan da aka haɗa da zaɓuɓɓuka don ƙaddamar da aikin Bootstrap ɗinku, gami da kwantena nannade, tsarin grid mai ƙarfi, abu mai sassauƙa na kafofin watsa labarai, da azuzuwan masu amfani.

Kwantena

Kwantena sune mafi mahimmancin tsarin shimfidar wuri a cikin Bootstrap kuma ana buƙata lokacin amfani da tsarin grid ɗin mu na asali . Ana amfani da kwantena don ƙunshe, pad, da (wani lokaci) tsakiyar abun ciki a cikinsu. Yayin da kwantena na iya zama gida, yawancin shimfidu ba sa buƙatar akwati mai gida.

Bootstrap ya zo tare da kwantena daban-daban guda uku:

• .container, wanda ke saita max-widtha kowane wuri mai amsawa
• .container-fluid, wanda yake width: 100%a duk wuraren karyawa
• .container-{breakpoint}, wanda shine width: 100%har zuwa lokacin da aka ƙayyade

Teburin da ke ƙasa yana kwatanta yadda kowane kwantena ya max-widthkwatanta da na asali .containerda kuma .container-fluidcikin kowane wurin karya.

Duba su a aikace kuma kwatanta su a cikin misalin Grid ɗin mu .

Duk-in-daya

Ajin mu na yau da .containerkullun shine mai amsawa, kafaffen ganga mai faɗi, ma'ana max-widthcanje-canjensa a kowane wurin hutu.

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

Ruwa

Yi amfani .container-fluidda babban akwati mai faɗi, mai faɗi duka faɗin wurin kallo.

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

Mai amsawa

Sabbin kwantena masu amsawa a cikin Bootstrap v4.4. Suna ba ku damar tantance aji mai faɗin 100% har sai an kai ga ƙayyadadden wurin hutu, bayan haka muna amfani max-widthda s ga kowane mafi girman wuraren hutu. Misali, .container-smyana da faɗin 100% don farawa har sai sman isa wurin karya, inda zai haɓaka da md, lg, da 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>

Matsaloli masu amsawa

Tun da an haɓaka Bootstrap don zama wayar hannu da farko, muna amfani da ɗimbin tambayoyin kafofin watsa labarai don ƙirƙirar wuraren hutu masu ma'ana don shimfidu da mu'amalarmu. Waɗannan wuraren hutu galibi sun dogara ne akan mafi ƙarancin faɗin kallo kuma suna ba mu damar haɓaka abubuwa yayin da kallon ke canzawa.

Bootstrap da farko yana amfani da jeri na neman kafofin watsa labarai masu zuwa-ko wuraren karyawa-a cikin fayilolin Sass tushen mu don shimfidar tsarin mu, tsarin grid, da abubuwan haɗin gwiwa.

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

Tunda mun rubuta tushen mu CSS a cikin Sass, duk tambayoyin kafofin watsa labarai suna samuwa ta hanyar 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;
  }
}

Mukan yi amfani da tambayoyin kafofin watsa labarai lokaci-lokaci waɗanda ke tafiya ta wata hanya (girman allo da aka bayar ko ƙarami ):

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

Har yanzu, waɗannan tambayoyin kafofin watsa labarai kuma ana samun su ta hanyar 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;
  }
}

Hakanan akwai tambayoyin kafofin watsa labarai da masu haɗaka don yin niyya ga yanki ɗaya na girman allo ta amfani da mafi ƙanƙanta da matsakaicin faɗuwar maki.

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

Ana kuma samun waɗannan tambayoyin kafofin watsa labarai ta hanyar 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) { ... }

Hakazalika, tambayoyin kafofin watsa labarai na iya yin nisa da yawa:

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

Mixin Sass don yin niyya ga girman girman allo ɗaya zai kasance:

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

Z-index

Abubuwan abubuwan Bootstrap da yawa suna amfani da su z-index, kayan CSS waɗanda ke taimakawa tsara shimfidar wuri ta samar da axis na uku don tsara abun ciki. Muna amfani da ma'aunin ma'aunin z-index na tsoho a cikin Bootstrap wanda aka ƙera don tsara kewayawa da kyau, tukwici na kayan aiki da popovers, modal, da ƙari.

Waɗannan maɗaukakin dabi'u suna farawa ne daga lamba ta sabani, babba kuma takamaiman isa don gujewa rikice-rikice. Muna buƙatar daidaitattun saitin waɗannan a duk faɗin kayan aikin mu - kayan aiki, popovers, navbars, dropdowns, modals — don haka za mu iya daidaita daidaitattun halaye. Babu wani dalili da ba za mu iya amfani da 100+ ko 500+ ba.

Ba mu ƙarfafa gyare-gyaren waɗannan dabi'u ɗaya; idan kun canza daya, kuna iya buƙatar canza su duka.

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

Don sarrafa iyakoki masu jere a cikin abubuwan da aka gyara (misali, maɓallai da bayanai a cikin ƙungiyoyin shigarwa), muna amfani da ƙananan ƙimar lambobi ɗaya z-indexna 1, 2, da 3tsoho, shawagi, da jihohi masu aiki. A kan shawagi / mai da hankali / mai aiki, muna kawo wani yanki na musamman a gaba tare da ƙimar mafi girma z-indexdon nuna iyakarsu akan abubuwan 'yan uwan.