Source

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 . Zaɓi daga cikin akwati mai faɗi, ƙayyadaddun akwati (ma'ana max-widthcanje-canjensa a kowane wurin hutu) ko faɗin ruwa (ma'ana yana da 100%faɗi koyaushe).

Yayin da kwantena na iya zama gida, yawancin shimfidu ba sa buƙatar akwati mai gida.

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

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

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

Yi la'akari da cewa tun da masu bincike ba su goyan bayan tambayoyin mahallin kewayo a halin yanzu , muna aiki a kusa da iyakoki min-da max-prefixes da ra'ayi tare da faɗuwar juzu'i (wanda zai iya faruwa a ƙarƙashin wasu yanayi akan manyan na'urorin dpi, alal misali) ta amfani da ƙima tare da madaidaicin madaidaicin waɗannan kwatancen. .

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.