ኮንቴይነሮች
ኮንቴይነሮች የእርስዎን ይዘት በተሰጠው መሣሪያ ወይም መመልከቻ ውስጥ የሚይዝ፣ የሚሸፍን እና የሚያስተካክል የBootstrap መሠረታዊ የግንባታ እገዳ ናቸው።
እንዴት እንደሚሠሩ
ኮንቴይነሮች በ Bootstrap ውስጥ በጣም መሠረታዊው የአቀማመጥ አካል ናቸው እና የእኛን ነባሪ የፍርግርግ ስርዓት ሲጠቀሙ ይፈለጋሉ ። ኮንቴይነሮች በውስጣቸው ያለውን ይዘት ለመያዝ፣ ለመጠቅለል እና (አንዳንድ ጊዜ) ወደ መሃል ለማስገባት ያገለግላሉ። ኮንቴይነሮች ሊሰቀሉ ቢችሉም, አብዛኛዎቹ አቀማመጦች የጎጆ መያዣ አያስፈልጋቸውም.
Bootstrap ከሶስት የተለያዩ ኮንቴይነሮች ጋር አብሮ ይመጣል።
.container
max-width
በእያንዳንዱ ምላሽ ሰጪ መግቻ ነጥብ ላይ ሀ ያዘጋጃል።.container-fluid
, ይህምwidth: 100%
በሁሉም የእረፍት ነጥቦች ላይ ነው.container-{breakpoint}
, ይህምwidth: 100%
እስከተጠቀሰው መግቻ ነጥብ ድረስ ነው
ከታች ያለው ሠንጠረዥ የእያንዳንዳቸው መያዣ max-width
ከመጀመሪያው .container
እና .container-fluid
ከእያንዳንዱ መግቻ ነጥብ ጋር እንዴት እንደሚነፃፀር ያሳያል።
እነሱን በተግባር ይመልከቱ እና በእኛ የፍርግርግ ምሳሌ ውስጥ ያወዳድሯቸው ።
በጣም ትንሽ <576px |
ትንሽ ≥576 ፒክስል |
መካከለኛ ≥768 ፒክስል |
ትልቅ ≥992 ፒክስል |
ኤክስ-ትልቅ ≥1200 ፒክስል |
XX- ትልቅ ≥1400 ፒክስል |
|
---|---|---|---|---|---|---|
.container |
100% | 540 ፒክስል | 720 ፒክስል | 960 ፒክስል | 1140 ፒክስል | 1320 ፒክስል |
.container-sm |
100% | 540 ፒክስል | 720 ፒክስል | 960 ፒክስል | 1140 ፒክስል | 1320 ፒክስል |
.container-md |
100% | 100% | 720 ፒክስል | 960 ፒክስል | 1140 ፒክስል | 1320 ፒክስል |
.container-lg |
100% | 100% | 100% | 960 ፒክስል | 1140 ፒክስል | 1320 ፒክስል |
.container-xl |
100% | 100% | 100% | 100% | 1140 ፒክስል | 1320 ፒክስል |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 ፒክስል |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
ነባሪ መያዣ
የእኛ ነባሪው .container
ክፍል ምላሽ ሰጪ፣ ቋሚ ስፋት ያለው መያዣ ነው፣ ይህ ማለት max-width
በእያንዳንዱ መግቻ ነጥብ ላይ ለውጦች ማለት ነው።
<div class="container">
<!-- Content here -->
</div>
ምላሽ ሰጪ መያዣዎች
ምላሽ ሰጪ ኮንቴይነሮች የተገለጸው መግቻ ነጥብ እስኪደርስ ድረስ 100% ስፋት ያለው ክፍል እንዲገልጹ ያስችሉዎታል፣ ከዚያ በኋላ max-width
ለእያንዳንዱ ከፍተኛ መግቻ ነጥብ s እንተገብራለን። ለምሳሌ፣ የመለያያ ነጥቡ .container-sm
እስኪደርስ ድረስ ለመጀመር 100% ስፋት ነው ፣ በ ፣፣ እና .sm
md
lg
xl
xxl
<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
ፈሳሽ መያዣዎች
.container-fluid
የእይታ መስጫውን አጠቃላይ ስፋት በመዘርጋት ለሙሉ ስፋት መያዣ ይጠቀሙ ።
<div class="container-fluid">
...
</div>
ሳስ
ከላይ እንደሚታየው፡ Bootstrap የሚፈልጓቸውን አቀማመጦች ለመገንባት እንዲረዳዎ ተከታታይ አስቀድሞ የተገለጹ የእቃ መያዢያ ክፍሎችን ያመነጫል። እነዚህን አስቀድሞ የተገለጹ የመያዣ ክፍሎችን የሚሰጣቸውን የ Sass ካርታ (በ ውስጥ የሚገኘውን) በማሻሻል ማበጀት ይችላሉ _variables.scss
፡-
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sassን ከማበጀት በተጨማሪ የእራስዎን መያዣዎች በ Sass mixin መፍጠር ይችላሉ.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
የእኛን የ Sass ካርታዎች እና ተለዋዋጮች እንዴት ማሻሻል እንዳለብን ለበለጠ መረጃ እና ምሳሌዎች፣ እባክዎን የፍርግርግ ዶክመንቴሽን Sass ክፍልን ይመልከቱ ።