کتنه

ستاسو د بوټسټریپ پروژې ایښودلو لپاره اجزاوې او اختیارونه ، پشمول د ریپ کولو کانټینرونه ، د قوي گرډ سیسټم ، د انعطاف وړ میډیا اعتراض ، او د ځواب ویونکي کارونې ټولګي.

کانټینرونه

کانټینرونه په بوټسټریپ کې ترټولو لومړني ترتیب عنصر دي او زموږ د ډیفالټ گرډ سیسټم کارولو پرمهال اړین دي . کانټینرونه د مینځپانګې مینځپانګې ، پیډ ، او (کله ناکله) د مینځپانګې مینځلو لپاره کارول کیږي. پداسې حال کې چې کانټینرونه ځړول کیدی شي، ډیری ترتیبونه د ځړول شوي کانټینر ته اړتیا نلري.

بوټسټریپ د دریو مختلف کانټینرونو سره راځي:

• .containermax-width، کوم چې په هر ځواب ویونکي وقفه کې ټاکي
• .container-fluid، کوم چې width: 100%په ټولو وقفو کې دی
• .container-{breakpoint}، کوم چې width: 100%د ټاکلي وقفې پورې وي

لاندې جدول روښانه کوي چې څنګه هر کانټینر د max-widthاصلي سره .containerاو .container-fluidد هرې وقفې نقطې سره پرتله کوي.

دوی په عمل کې وګورئ او زموږ د ګریډ مثال کې یې پرتله کړئ .

ټول په یوه کی

زموږ ډیفالټ .containerټولګی یو ځواب ویونکی ، ثابت پلن کانټینر دی ، پدې معنی چې max-widthپه هر وقفه کې د هغې بدلونونه.

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

مایع

د بشپړ پلن کانټینر لپاره وکاروئ .container-fluid، د لید پورټ ټول پراخوالی.

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

ځواب ورکوونکی

ځواب ورکوونکي کانټینرونه په بوټسټریپ v4.4 کې نوي دي. دوی تاسو ته اجازه درکوي چې یو ټولګي مشخص کړئ چې 100٪ پراخه وي تر هغه چې ټاکل شوي وقفې پای ته ورسي ، له هغې وروسته موږ max-widthد هرې لوړې وقفې لپاره غوښتنه کوو. د مثال په توګه، .container-smد پیل کولو لپاره 100٪ پراخ دی تر هغه چې د smوقفې نقطې ته ورسیږي، چیرته چې دا به د ,، او سره mdاندازه lgشي 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>

ځواب ورکوونکي وقفې

څنګه چې بوټسټریپ لومړی د ګرځنده کیدو لپاره رامینځته شوی ، موږ د خپلو ترتیبونو او انٹرفیسونو لپاره د پام وړ وقفې رامینځته کولو لپاره یو څو میډیا پوښتنې کاروو. دا وقفې نقطې اکثرا د لږترلږه لید پورټ چوکۍ پراساس دي او موږ ته اجازه راکوي چې د لید لید بدلون سره عناصر اندازه کړو.

بوټسټریپ په عمده ډول زموږ د ترتیب ، گرډ سیسټم ، او برخو لپاره زموږ د سرچینې Sass فایلونو کې د لاندې میډیا پوښتنو سلسلې — یا بریک پوائنټونه کاروي.

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

څرنګه چې موږ په ساس کې زموږ سرچینه CSS لیکو، زموږ ټولې رسنۍ پوښتنې د ساس مکسین له لارې شتون لري:

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

موږ کله ناکله د رسنیو پوښتنې کاروو چې بل لوري ته ځي (د ورکړل شوي سکرین اندازه یا کوچنۍ ):

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

یوځل بیا، دا د رسنیو پوښتنې د ساس مکسین له لارې هم شتون لري:

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

د لږترلږه او اعظمي وقفې چوکۍ په کارولو سره د سکرین اندازې یوې واحدې برخې په نښه کولو لپاره د رسنیو پوښتنې او مکسینونه هم شتون لري.

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

دا د رسنیو پوښتنې د ساس مکسین له لارې هم شتون لري:

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

په ورته ډول، د رسنیو پوښتنې کیدای شي د ډیری وقفې چوکۍ پراخه کړي:

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

د ورته سکرین اندازې سلسلې په نښه کولو لپاره د ساس مکسین به دا وي:

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

Z-index

د بوټسټریپ ډیری برخې کاروي z-index، د CSS ملکیت چې د مینځپانګې تنظیم کولو لپاره دریم محور چمتو کولو سره کنټرول ترتیب کې مرسته کوي. موږ په بوټسټریپ کې د ډیفالټ z-index پیمانه کاروو چې په سمه توګه د نیویګیشن ، ټوټیپونو او پاپورونو ، موډلونو او نور ډیر څه لپاره ډیزاین شوی.

دا لوړ ارزښتونه په خپل سري شمیره پیل کیږي، لوړ او په کافي اندازه مشخص دي چې په مثالي توګه د شخړو مخه ونیسي. موږ زموږ په سطحه برخو کې د دې معیاري سیټ ته اړتیا لرو - اوزار ټیپونه ، پاپورونه ، نوبارز ، ډراپ ډاونونه ، موډلونه - نو موږ کولی شو په چلندونو کې په معقول ډول ثابت واوسو. 100هیڅ دلیل شتون نلري چې موږ + یا + کارولی نه وي 500.

موږ د دې انفرادي ارزښتونو دودیز کول نه هڅوو؛ که تاسو یو بدل کړئ، تاسو احتمال لرئ چې دا ټول بدل کړئ.

$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;

په اجزاوو کې د متقابل سرحدونو اداره کولو لپاره (د بیلګې په توګه، بټنونه او د ان پټ ګروپونو کې ننوتونه)، موږ د ټیټ واحد ډیجیټل z-indexارزښتونه کاروو 1، 2او 3د ډیفالټ، هور، او فعال حالتونو لپاره. په هور/فوکس/فعال کې، موږ یو ځانګړی عنصر د لوړ z-indexارزښت سره مخ ته راوړو ترڅو د وروڼو عناصرو په اړه د دوی سرحد وښيي.