Source

کتنه

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

کانتینرونه

کانټینرونه په بوټسټریپ کې ترټولو لومړني ترتیب عنصر دي او زموږ د ډیفالټ گرډ سیسټم کارولو پرمهال اړین دي . د ځواب ویونکي، ثابت پلن کانټینر څخه غوره کړئ (د دې معنی چې د max-widthهرې وقفې په وخت کې د هغې بدلونونه) یا د مایع پلنوالی (پدې معنی چې دا 100%هر وخت پراخه وي).

پداسې حال کې چې کانټینرونه ځړول کیدی شي، ډیری ترتیبونه د ځړول شوي کانټینر ته اړتیا نلري.

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

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

<div class="container-fluid">
  ...
</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

په یاد ولرئ چې براوزر اوس مهال د رینج شرایطو پوښتنو ملاتړ نه کوي ، موږ د محدودیتونو min-او max-مخکینیو او ویو پورټونو په شاوخوا کې کار کوو د جزوي چوکیو سره (کوم چې په ځانګړي شرایطو کې په لوړ dpi وسیلو کې واقع کیدی شي ، د مثال په توګه) د دې پرتله کولو لپاره د لوړ دقیقیت سره ارزښتونو کارولو سره. .

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

@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ارزښتونه کاروو. په هور/فوکس/فعال کې، موږ یو ځانګړی عنصر د لوړ ارزښت سره مخ ته راوړو ترڅو د وروڼو عناصرو په اړه د دوی سرحد وښيي.123z-index