آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

containers

ظروف اساسی ترین عنصر طرح در بوت استرپ هستند و در هنگام استفاده از سیستم پیش فرض، شبکه مورد نیاز ما است. از یک کانتینر ریسپانسیو، با اندازه ی ثابت(به معنی تغییرات حداکثر عرض آن در هر نقطه توقف ) یا عرض  (به معنی اینکه 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 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 منبع ما را در Sass بنویسیم، تمام پرس و جوهای رسانه ای ما از طریق مخزن های Sass موجود است:

 

 @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Example usage: @include media-breakpoint-up(sm) { .some-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

 

 بار دیگر این درخواست های رسانه ای نیز از طریق مخزن های Sass موجود است:

 

 @include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... }

 

همچنین پرس و جو و ترکیب های رسانه ای برای هدف گیری یک قطعه از اندازه های صفحه نمایش با استفاده از عرض حداکثر و حداکثر نقطه توقف وجود دارد.

 

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

 

این پرونده های رسانه ای نیز از طریق مخزن های Sass موجود است:

 

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

 

مخزن Sass برای هدف قرار دادن همان محدوده اندازه صفحه نمایش خواهد بود:

 

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

 

z-index

چندین اجزای بوت استرپ از z-index استفاده می کنند، ویژگی CSS که با تنظیم محور سوم برای تنظیم محتوا کمک می کند تا طرح بندی را کنترل کند. ما از یک مقیاس z-index به طور پیش فرض در بوت استرپ استفاده می کنیم که به درستی لایه های ناوبری، راهنمایی ها و popovers، modals و موارد دیگر طراحی شده است.

این مقادیر بالاتر از تعداد دلخواه شروع می شود، به اندازه کافی بالا و دقیق است که به طور مطلوب از بی نظمی ها جلوگیری می کند. ما نیاز به یک مجموعه استاندارد در سراسر اجزای لایه دار ما، راهنمایی های ابزار، navbars, popovers, modals و کشوی ها- بمابر این ما می توانیم منطقی در رفتارها سازگار باشد. هیچ دلیلی وجود ندارد که ما بتوانیم 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 کم یک رقمی 1، 2 و 3 برای پیش فرض، hover و حالت های فعال استفاده می کنیم.