Burburinta

Fikradaha asaasiga ah

• Burburinta ayaa ah dhismaha naqshadeynta jawaab celinta. U isticmaal si aad u xakamayso marka qaabkaaga la waafajin karo meel gaar ah ama cabbirka qalabka.

• Isticmaal su'aalaha warbaahinta si aad u naqshadayso CSS kaaga iyada oo la adeegsanayo barta jabinta. Weydiimaha warbaahintu waa sifo CSS ah oo kuu oggolaanaysa inaad si shuruudaysan u adeegsato qaababka ku salaysan cabbirrada browserka iyo nidaamka hawlgalka. Inta badan waxaan u isticmaalnaa min-widthweydiimahayada warbaahinta.

• Mobilada marka hore, nashqad kajawaabi karta waa yoolka. Bootstrap's CSS waxa uu hiigsanayaa in uu dabaqo qaabka ugu yar ee qaawan si uu qaabayntu ugu shaqeeyo meesha ugu yar, ka dibna lakabyo qaabab lagu hagaajinayo nashqadaas qalabyada waaweyn. Tani waxay wanaajisaa CSS kaaga, waxay wanaajisaa wakhtiga wax bixinta, waxayna siisaa khibrad aad u wanaagsan booqdayaashaada.

Meelo jaban oo la heli karo

Bootstrap waxaa ka mid ah lix dhibcood oo jabin ah, oo mararka qaarkood loo yaqaan heerar kala duwan , si loo dhiso si jawaab celin ah. Meelaha jaban waa la habeyn karaa haddii aad isticmaaleyso ishayada faylasha Sass.

Meel kasta oo jabin ah ayaa loo doortay inay si raaxo leh u hayso weelasha ballackoodu yahay dhufsanaanno 12 ah. Burburku waxay sidoo kale wakiil ka yihiin qayb ka mid ah cabbirrada aaladaha caadiga ah iyo cabbirrada muuqaalka - si gaar ah uma beegsadaan kiis kasta ama qalab kasta oo la isticmaalo. Taa baddalkeeda, kala duwanaanshuhu waxay bixiyaan aasaas adag oo joogto ah si loogu dhiso ku dhawaad ​​qalab kasta.

Meelahan jabinta waxaa lagu habeyn karaa Sass- waxaad ka heli doontaa khariidadda Sass ee xaashida _variables.scssqaabkayaga.

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

Macluumaad dheeraad ah iyo tusaaleyaal ku saabsan sida loo beddelo khariidadaha Sass iyo doorsoomayaashayada, fadlan tixraac qaybta Sass ee dukumeentiga Grid .

Weydiimaha warbaahinta

Maadaama Bootstrap loo hormariyay inuu noqdo mobilka marka hore, waxaan isticmaalnaa dhowr su'aalood oo warbaahin ah si aan u abuurno go'aan macquul ah qaabayntayada iyo isku xidhkayada. Meelahan jaban waxay inta badan ku salaysan yihiin ballaadhka ugu yar ee daawashada waxayna noo ogolaanayaan inaan kor u qaadno walxaha marka muuqaalku isbeddelo.

Ballac-yar

Bootstrap waxay u isticmaashaa kala duwanaanshaha su'aalaha warbaahinta ee soo socda-ama meelaha jaban-ee ishayada faylasha Sass ee qaabayntayada, nidaamka grid, iyo qaybahayada.

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

Isku darka Sass-ku waxay ku turjumaan CSS-tayada la soo ururiyey iyadoo la adeegsanayo qiyamka lagu sheegay doorsoomayaashayada Sass. Tusaale ahaan:

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

Ballaca ugu badan

Waxaan marmar isticmaalnaa weydiimaha warbaahinta ee jihada kale u socda ( cabbirka shaashadda la bixiyay ama ka yar ):

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

Isku darkaani waxa ay qaataan qodobbada jaban ee lagu dhawaaqay, ka jar .02px, oo u isticmaal sida max-widthqiyamkayaga. Tusaale ahaan:

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

Meesha kaliga ah

Waxa kale oo jira su'aalo warbaahineed iyo iskudhafyo lagu beegsanayo hal qayb oo cabbirrada shaashadda ah iyadoo la adeegsanayo ballaadhka ugu yar iyo ugu badnaan.

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

Tusaale ahaan @include media-breakpoint-only(md) { ... }natiijadu waxay noqon doontaa:

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

Inta u dhaxaysa meelaha goynta

Sidoo kale, su'aalaha warbaahintu waxay koobi karaan balaadhyo kala duwan:

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

Taas oo ka dhalata:

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