Dulmar

Qaybaha iyo xulashooyinka dejinta mashruucaaga Bootstrap, oo ay ku jiraan weelasha duubida, nidaam awood badan, shay warbaahin oo dabacsan, iyo fasalo tasiilaad ah.

Konteenarada

Konteenarada ayaa ah sheyga ugu aasaasiga ah ee qaabaynta ee Bootstrap waxaana loo baahan yahay marka la isticmaalayo nidaamkayaga khadka caadiga ah . Weelasha waxaa loo isticmaalaa in lagu daro, suuf, iyo (mararka qaarkood) xuddun u ah waxa ku jira. Iyadoo weelasha buul la dhigi karo, badi qaabaynta uma baahna weel buul leh.

Bootstrap waxay la socotaa saddex weel oo kala duwan:

• .container, kaas oo dejinaya meel max-widthkasta oo jawaab celin ah
• .container-fluid, kaas oo width: 100%ah dhammaan meelaha jaban
• .container-{breakpoint}, kaas oo ah width: 100%ilaa inta la cayimay goynta

Jadwalka hoose wuxuu muujinayaa sida weel kastaa u max-widthbarbar dhigo kan asalka ah .containeriyo .container-fluidmeel kasta oo jaban.

Ficil ku arag iyaga oo ku barbar dhig tusaalahayaga Grid .

All-in-one

Fasalkayaga caadiga .containerah waa jawaab celin, weel ballaadhkiisu go'an yahay, taasoo la macno ah max-widthisbeddelkiisa meel kasta oo nasashada.

<div class="container">
  <!-- Content here -->
</div>

Dheecaan

U isticmaal .container-fluidweel ballac buuxa ah, oo ku dhereraya ballaca goobta daawashada oo dhan.

<div class="container-fluid">
  ...
</div>

Ka jawaaba

Weelasha jawaab celinta ayaa ku cusub Bootstrap v4.4. Waxay kuu oggolaanayaan inaad qeexdo fasal 100% ballac ah ilaa barta goynta ee la cayimay laga gaarayo, ka dib waxaan codsaneynaa max-widths mid kasta oo ka mid ah meelaha sare ee jabinta. Tusaale ahaan, .container-smwaa 100% ballaaran in la bilaabo ilaa barta smgoynta laga gaarayo, halkaas oo ay ku kordhin doonto md, lg, iyo xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Meelo jaban oo jawaab ah

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.

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.

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

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

Maadaama aan ku qorno ishayada CSS ee Sass, dhammaan weydiimahayada warbaahinta waxaa laga heli karaa Sass 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) { ... }

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

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

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

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Mar labaad, weydiimahan warbaahinta ayaa sidoo kale laga heli karaa Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

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

Weydiimahan warbaahinta waxaa sidoo kale laga heli karaa Sass mixins:

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

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

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

Isku darka Sass ee lagu beegsanayo cabbirka cabbirka isku midka ah wuxuu noqon lahaa:

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

Z-index

Qaybo badan oo Bootstrap ah ayaa isticmaala z-index, hantida CSS ee ka caawisa xakamaynta qaabeynta iyadoo la siinayo dhidibka saddexaad si loo habeeyo nuxurka. Waxaan u isticmaalnaa cabbirka z-index-ka caadiga ah ee Bootstrap kaas oo loo qaabeeyey inuu si sax ah lakabka ugu dhejiyo navigation, tabaha aaladaha iyo popovers, moodooyinka, iyo in ka badan.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.