Brisphointí
Is leithead inoiriúnaithe iad brisphointí a chinneann an chaoi a n-iompraíonn do leagan amach sofhreagrach trasna méideanna gléis nó amhairc in Bootstrap.
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-width
iná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.
Brisphointe | Infix ranga | Toisí |
---|---|---|
X-Beag | Dada | <576px |
Beaga | sm |
≥576px |
Mheán | md |
≥768px |
Mór | lg |
≥992px |
Breise mór | xl |
≥1200px |
Breise mór breise | xxl |
≥1400px |
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.scss
stí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 .02px
siad uathu, agus úsáideann iad mar ár max-width
luachanna. Mar shampla:
// `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) { ... }
min-
agus na max-
réimíreanna agus na hamharcphointí le leithead codánach (is féidir a bheith ann faoi choinníollacha áirithe ar ghléasanna ard-pso, mar shampla) trí úsáid a bhaint as luachanna le cruinneas níos airde.
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) { ... }