Brisphointí

Coincheapa lárnacha

• Is iad brisphointí na bloic thógála de dhearadh sofhreagrach. Úsáid iad le rialú a dhéanamh ar cathain is féidir do leagan amach a oiriúnú ag radharcphort nó méid gléis ar leith.

• Bain úsáid as ceisteanna ó na meáin chun do CSS a dhearadh de réir brisphointe. Is gné de CSS iad fiosrúcháin ó na meáin a ligeann duit stíleanna a chur i bhfeidhm go coinníollach bunaithe ar thacar de pharaiméadair bhrabhsálaí agus córais oibriúcháin. Is minic a úsáidimid min-widthinár bhfiosruithe ó na meáin.

• Soghluaiste ar dtús, dearadh sofhreagrach an sprioc. Tá sé mar aidhm ag CSS Bootstrap an t-íosmhéid stíleanna gann a chur i bhfeidhm le go n-oibreoidh leagan amach ag an brisphointe is lú, agus ansin sraitheanna a chur ar stíleanna chun an dearadh sin a choigeartú le haghaidh gléasanna níos mó. Déanann sé seo do CSS a bharrfheabhsú, feabhsaíonn sé am rindreála, agus cuireann sé eispéireas iontach ar fáil do do chuairteoirí.

Brisphointí ar fáil

Áirítear le Bootstrap sé phointe briste réamhshocraithe, dá ngairtear sraitheanna eangaí uaireanta , chun tógáil go freagrach. Is féidir na brisphointí seo a shaincheapadh má tá ár gcomhaid fhoinse Sass in úsáid agat.

Roghnaíodh gach brisphointe chun coimeádáin a bhfuil a leithid iolraí de 12 acu a choinneáil go compordach. Tá brisphointí ionadaíoch freisin d’fhothacar de mhéideanna feiste coitianta agus de thoisí amhairc — ní dhíríonn siad go sonrach ar gach cás úsáide nó feiste. Ina áit sin, cuireann na raonta bonn láidir comhsheasmhach ar fáil le tógáil air le haghaidh beagnach aon fheiste.

Is féidir na brisphointí seo a shaincheapadh trí Sass - gheobhaidh tú iad ar léarscáil Sass inár _variables.scssstílbhileog.

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

Le haghaidh tuilleadh faisnéise agus samplaí ar conas ár mapaí agus ár n-athróga SAS a mhionathrú, féach le do thoil don rannán Sass de dhoiciméadú na hEangaí .

Ceisteanna ó na meáin

Ós rud é go bhforbraítear Bootstrap le bheith soghluaiste ar dtús, bainimid úsáid as dornán fiosrúchán ó na meáin chun brisphointí ciallmhara a chruthú dár leagan amach agus dár gcomhéadain. Tá na brisphointí seo bunaithe den chuid is mó ar íosleithead an amhairc agus ligeann siad dúinn gnéithe a mhéadú de réir mar a athraíonn an radharc.

Min-leithead

Úsáideann Bootstrap go príomha na raonta fiosrúcháin meán seo a leanas - nó brisphointí - inár gcomhaid fhoinse Sass dár leagan amach, córas greille agus comhpháirteanna.

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

Aistríonn na meascáin Sass seo inár CSS tiomsaithe ag baint úsáide as na luachanna dearbhaithe inár n-athróga Sass. Mar shampla:

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

Uas-leithead

Ó am go chéile úsáidimid fiosruithe ó na meáin a théann sa treo eile (an méid scáileáin tugtha nó níos lú ):

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

Tógann na meascáin seo na brisphointí dearbhaithe sin, dealaíonn .02pxsiad uathu, agus úsáideann iad mar ár max-widthluachanna. Mar shampla:

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

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Brisphointe aonair

Tá ceisteanna agus meascáin ó na meáin ann freisin chun díriú ar theascán amháin de mhéideanna scáileáin ag baint úsáide as na híosleithead agus na uasleithead briste.

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

Mar shampla an @include media-breakpoint-only(md) { ... }toradh a bheidh ar :

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

Idir bristephointí

Mar an gcéanna, d’fhéadfadh ceisteanna ó na meáin chumarsáide a bheith i gceist le hilphointí briste:

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

A bhfuil mar thoradh air:

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