Dintlha tša go kgaotša

Dintlha tša go kgaotša ke bophara bjo bo ka fetošwago bjo bo laolago ka moo peakanyo ya gago ya go arabela e itshwarago ka gona go ralala le bogolo bja sedirišwa goba lefelo la go lebelela ka go Bootstrap.

Letlakaleng le

Dikgopolo tša motheo

Breakpoints ke diboloko tša go aga tša tlhamo ye e arabelago. Di šomiše go laola gore peakanyo ya gago e ka fetošwa neng lefelong le itšego la go lebelela goba bogolo bja sedirišwa.
Šomiša dipotšišo tša boraditaba go aga CSS ya gago ka ntlha ya go kgaotša. Dipotšišo tša boraditaba ke tšobotsi ya CSS yeo e go dumelelago go diriša ka maemo ditaele tšeo di theilwego godimo ga sete ya ditekanyetšo tša sephephediši le tša tshepedišo ya go šoma. Re šomiša min-widthkudu dipotšišong tša rena tša boraditaba.
Mobile pele, arabela moralo ke pakane. CSS ya Bootstrap e ikemišeditše go diriša bonnyane bjo bo hlobotšego bja mekgwa go dira gore peakanyo e šome ka ntlha ye nnyane ya go kgaotša, gomme ka morago ga moo magato a godimo ga mekgwa go beakanya tlhamo yeo bakeng sa didirišwa tše kgolo. Se se dira gore CSS ya gago e šome gabotse, se kaonafatša nako ya go tšweletša, le go fa maitemogelo a magolo go baeti ba gago.

Dintlha tša go kgaotša tšeo di lego gona

Bootstrap e akaretša di- breakpoint tše tshela tša go se fetoge, tšeo ka dinako tše dingwe di bitšwago di- grid tiers , bakeng sa go aga ka go arabela. Dintlha tše tša go kgaotša di ka rulaganywa ge e ba o diriša difaele tša rena tša mohlodi tša Sass.

Ntlha ya go kgaotša	Infix ya sehlopha	Ditekanyo tša go swana
X-E Nnyane	Ga go selo	<576px
Nnyane	`sm`	≥576px e le
Dirišwago	`md`	≥768px e le
Kgolo	`lg`	≥992px e le
E kgolo e eketsehileng	`xl`	≥1200px e le
E eketsehileng e khōlō e eketsehileng	`xxl`	≥1400px e le

Ntlha e nngwe le e nngwe ya go kgaotša e ile ya kgethwa go swara ka boiketlo ditshelo tšeo bophara bja tšona e lego di- multiple tša 12. Dintlha tša go kgaotša gape ke moemedi wa sehlopha se senyenyane sa bogolo bjo bo tlwaelegilego bja sedirišwa le ditekanyo tša lefelo la go lebelela—ga di nepiše ka go lebanya taba e nngwe le e nngwe ya tšhomišo goba sedirišwa. Go e na le moo, mehutahuta e nea motheo o tiilego le o sa fetogego wa go aga go wona mo e nyakilego go ba sedirišwa le ge e le sefe.

Dintlha tše tša go kgaotša di ka fetošwa ka Sass—o tla di hwetša mmapeng wa Sass letlakaleng la rena _variables.scssla setaele.

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

Bakeng sa tshedimošo ye ntši le mehlala ya ka moo o ka fetošago mebapa ya rena ya Sass le diphetogo, hle lebelela karolo ya Sass ya ditokomane tša Gridi .

Dipotšišo tša boraditaba

Ka ge Bootstrap e hlamilwe gore e be sellathekeng pele, re šomiša dipotšišo tše mmalwa tša methopo ya ditaba go hlama dintlha tša go kgaotša tše di nago le tlhaologanyo bakeng sa dipeakanyo tša rena le didirišwa tša go dirišana. Dintlha tše tša go kgaotša di theilwe kudu godimo ga bophara bja bonnyane bja lefelo la go lebelela gomme di re dumelela go oketša dielemente ge lefelo la go lebelela le fetoga.

Min-bophara

Bootstrap kudu-kudu e diriša meelo e latelago ya dipotšišo tša methopo ya ditaba—goba dintlha tša go kgaotša—ka difaeleng tša rena tša mohlodi tša Sass bakeng sa peakanyo ya rena, tshepedišo ya keriti le dikarolo.

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

Di-mixin tše tša Sass di fetolela ka go CSS ya rena ye e kgobokeditšwego ka go šomiša dikelo tšeo di tsebagaditšwego ka go diphetogo tša rena tša Sass. Mohlala:

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

Ka dinako tše dingwe re diriša dipotšišo tša methopo ya ditaba tšeo di yago ka lehlakoreng le lengwe (bogolo bja skrine bjo bo filwego goba bjo bonyenyane ):

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

Di- mixin tše di tšea dintlha tšeo tša go kgaotša tšeo di tsebagaditšwego, di di tloša .02pxgomme tša di diriša e le max-widthditekanyetšo tša rena. Mohlala:

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

Ke ka baka la’ng o tloša .02px? Diphensele ga bjale ga di thekge dipotšišo tša seemo sa mohuta , ka fao re šoma go dikologa mellwane ya min-le max-dihlongwapele le dipono tša go lebelela ka bophara bja karolwana (tšeo di ka diregago ka fase ga maemo a itšego go didirišwa tša dpi ya godimo, go fa mohlala) ka go šomiša boleng ka go nepagala mo go phagamego.

Ntlha e tee ya go kgaotša

Gape go na le dipotšišo tša boraditaba le di-mixin tša go nepiša karolo e tee ya bogolo bja skrine ka go šomiša bophara bja bonnyane le bjo bogolo bja ntlha ya go kgaotša.

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

Mohlala @include media-breakpoint-only(md) { ... }tla fella ka : .

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

Magareng ga dintlha tša go kgaotša

Ka mo go swanago, dipotšišo tša boraditaba di ka akaretša bophara bjo bontši bja dintlha tša go kgaotša:

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

Seo se feleletšago ka gore:

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