Wuraren karya

Mahimman ra'ayi

• Breakpoints sune tubalan ginin ƙira mai amsawa. Yi amfani da su don sarrafa lokacin da za a iya daidaita shimfidar ku a wani wurin kallo ko girman na'ura.

• Yi amfani da tambayoyin kafofin watsa labarai don tsara CSS ɗin ku ta wurin warwarewa. Tambayoyin kafofin watsa labarai siffa ce ta CSS waɗanda ke ba ku damar yin amfani da salo bisa sharadi bisa tsarin ma'aunin bincike da tsarin aiki. Mu galibi muna amfani min-widthda tambayoyin mu na kafofin watsa labarai.

• Wayar hannu ta farko, ƙira mai amsawa shine makasudin. Bootstrap's CSS yana da niyyar amfani da mafi ƙarancin salo don yin shimfidar wuri yayi aiki a mafi ƙanƙancin lokacin hutu, sannan yadudduka akan salo don daidaita wancan ƙira don manyan na'urori. Wannan yana haɓaka CSS ɗin ku, yana haɓaka lokacin bayarwa, kuma yana ba da ƙwarewa ga baƙi.

Akwai wuraren karyawa

Bootstrap ya haɗa da tsoffin wuraren hutu guda shida, wani lokaci ana kiranta da tiers grid , don ginawa da amsa. Ana iya keɓance waɗannan wuraren hutu idan kuna amfani da fayilolin Sass tushen mu.

An zaɓi kowane wurin hutu don samun kwanciyar hankali riƙe kwantena waɗanda faɗin su ke da yawa na 12. Breakpoints kuma wakilci ne na juzu'in girman na'urar gama gari da ma'aunin gani-ba sa keɓance kowane akwati ko na'ura mai amfani. Madadin haka, jeri yana ba da tushe mai ƙarfi da daidaito don ginawa akan kusan kowace na'ura.

Ana iya daidaita waɗannan wuraren hutu ta hanyar Sass - za ku same su a cikin taswirar Sass a cikin salon salon mu _variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Don ƙarin bayani da misalai kan yadda ake canza taswirar Sass da masu canji, da fatan za a koma sashin Sass na takaddun Grid .

Tambayoyin watsa labarai

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.

Min-nisa

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.

// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

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

Waɗannan haɗe-haɗe na Sass suna fassara a cikin haɗin CSS ɗinmu ta amfani da ƙimar da aka ayyana a cikin masu canjin Sass. Misali:

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

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-nisa

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

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Waɗannan haɗe-haɗe suna ɗaukar waɗancan wuraren da aka ayyana, cire .02pxsu, kuma suna amfani da su azaman max-widthƙimar mu. Misali:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Wurin karya guda ɗaya

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.

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

Misali @include media-breakpoint-only(md) { ... }zai haifar da:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Tsakanin wuraren karya

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

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

Wanda ya haifar da:

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