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

خلاصه 

 در سطح بالا، در اینجا چیزی است که روش ما را هدایت می کند.

1-قطعات باید ریسپانسیو و همراه اول باشند

2-اجزاء باید با یک کلاس پایه ساخته شوند و از طریق کلاس های اصلاح کننده گسترش یابد.

3-حالت های کامپوننت باید از یک مقیاس z-index معمولی استفاده کنند.

4-هر زمان که امکان دارد، یک HTML و CSS را بر روی جاوا اسکریپت ترجیح می دهیم.

5-هر زمان که امکان دارد، از ابزارهای بیش از سبک های سفارشی استفاده کنید.

 

ریسپانسیو

سبک پاسخگو بوت استرپ ساخته شده است که ریسپانسیو است، روشی که اغلب به عنوان اولین تلفن همراه شناخته می شود. ما از این اصطلاح در اسناد ما استفاده می کنیم و تا حد زیادی با آن موافق هستیم، اما در بعضی موارد می تواند خیلی گسترده باشد. در حالی که هر جزء نباید در Bootstrap به طور کامل پاسخگو باشد، این روش پاسخگو در مورد کاهش اختیارات CSS است که با فشار دادن شما برای اضافه کردن سبک ها به عنوان نمایشگر بزرگتر می شود.

در سراسر بوت استرپ، این را به وضوح در نمایش اطلاعات رسانه ای ما خواهید دید. در اغلب موارد، ما از نمایش min-width استفاده می کنیم که در یک نقطه متوقف خاص اعمال می شود و از طریق نقطه های نقطه پایانی بالاتر می رود. به عنوان مثال، یک .d-none از min-width اعمال می شود: 0 به بی نهایت. از سوی دیگر، a .d-md-none از نقطه توقف متوسط ​​و بالا استفاده می کند.

در بعضی مواقع از max-width استفاده می کنیم زمانی که یک پیچیدگی ذاتی آن نیاز به آن دارد. در بعضی موارد، این لغوها از لحاظ کارکردی و ذهنی واضحی برای پیاده سازی و پشتیبانی از بازنویسی قابلیت های اصلی از اجزای ما هستند. ما تلاش می کنیم این رویکرد را محدود کنیم اما از زمان به زمان استفاده می کنیم.

 

کلاس ها

به غیر از Reboot بوت استرپ، یک جدول شیوه سازگاری متقابل مرورگر، تمام سبک های بوت استرپ به دنبال استفاده از کلاس ها به عنوان انتخابگرها هستند. این بدان معنی است که فرمان را از انتخابگرهای نوع و کلاسهای والد بیرونی پاک می کند که باعث می شود سبک ها به راحتی لغو شوند.

به همین ترتیب، اجزای سازنده باید با یک کلاس پایه ساخته شوند که دارای جفت ارزشی مشترک و غیر قابل جبران باشد. به عنوان مثال، btn. و btn-primary.ما از btn.برای همه سبک های معمول مانند صفحه نمایش، padding و عرض مرز استفاده می کنیم. سپس ما از اصلاح کننده هایی مانند  btn-primary. برای اضافه کردن رنگ، رنگ پس زمینه، رنگ مرزی و غیره استفاده می کنیم.

کلاس های اصلاح کننده باید فقط زمانی استفاده شود که خواص یا مقادیر متعددی در چندین متغیر وجود داشته باشد. اصلاح کننده ها همیشه ضروری نیستند، بنابراین مطمئن شوید که در حین ساخت آنها خطوط کد را ذخیره می کنید و از لغو های غیر ضروری جلوگیری می کنید. نمونه های خوبی از اصلاح کنندگان کلاس های رنگ تم ما و انواع اندازه هستند.

 

مقیاس z-index

 

دو مقیاس z-index در بوت استرپ-عناصر در اجزای جزء و پوشش وجود دارد.

 

عناصر اجزا 

1-برخی از اجزای موجود در Bootstrap با عناصر همپوشانی ساخته شده اند تا از مرزهای دوگانه بدون تغییر ویژگی مرزی جلوگیری شود. به عنوان مثال، گروه های دکمه، گروه های ورودی و صفحه بندی.

2-این اجزا یک استاندارد z-index را از 0 تا 3 به اشتراک می گذارند.

3-این رویکرد ما را با بالاترین اولویت کاربر منطبق می کند. اگر یک عنصر متمرکز باشد، آن را در نظر و توجه کاربر است. عناصر فعال درجه دوم هستند زیرا آنها نشان دهنده حالت است. شناور سوم است، زیرا نشان دهنده هدف کاربر است، اما تقریبا هر چیزی را می توان شناور کرد.

 

اجزای overlay

بوت استرپ شامل اجزای متعددی است که به عنوان پوشش یک نوع عمل می کنند. این شامل، به ترتیب از بالاترین z-index، منقبض، navbars ثابت و چسبنده، modals، راهنمایی ها و popovers است. این اجزا دارای مقیاس شاخص z خود هستند که از 1000 شروع می شوند. این شماره شروع به صورت تصادفی است و به عنوان یک بافر کوچک بین سبک های بوت استرپ و سبک های سفارشی پروژه شما عمل می کند.

 

html و css بیش از js

هر گاه امکان پذیر است، ترجیح می دهیم HTML و CSS را بیش از جاوا اسکریپت بنویسیم. به طور کلی، HTML و CSS برای افراد بیشتری از همه سطوح مختلف تجربه، کارآمدتر و قابل دسترس هستند. HTML و CSS نیز در مرورگر شما از جاوااسکریپت سریعتر هستند و مرورگر شما عموما قابلیت بسیار زیادی را برای شما فراهم می کند.

این اصل اولین کلاس جاوا اسکریپت API ویژگی های داده است. شما نیازی به نوشتن تقریبا هیچ جاوا اسکریپت برای استفاده از افزونه های جاوا اسکریپت ندارید به جای آن، HTML را بنویسید.

در نهایت، سبکهای ما بر رفتارهای بنیادی عناصر وب مشترک استوار است. هر گاه ممکن است، ما ترجیح می دهیم از آنچه مرورگر فراهم می کند استفاده کنیم. به عنوان مثال، شما می توانید یک کلاس btn. را در تقریبا هر عنصر قرار دهید، اما اکثر عناصر ارزش معنایی یا قابلیت مرورگر را ارائه نمی دهند. بنابراین، در عوض، از button> s> وa> s> استفاده می کنیم.

همین امر برای اجزای پیچیده تر نیز می باشد. در حالیکه می توانیم پلاگین اعتبار سنجی خودمان را برای اضافه کردن کلاس به یک عنصر والدین بر اساس وضعیت ورودی بنویسیم، به این ترتیب ما اجازه می دهیم سبک متن قرمز باشد، ما ترجیح می دهیم با استفاده از: valid /: pseudo-elements invalid هر مرورگر ما را پشتیبانی می کند.

 

خدمات رفاهی

کلاس های سودمند - کمک های پیشین در Bootstrap 3 - یک متحد قدرتمند در مبارزه با نفخ CSS و عملکرد ضعیف صفحه است. یک کلاس ابزار به طور معمول یک جفت ارز یکنواخت و ارزشمستقیم است که به عنوان یک کلاس بیان می شود. درخواست اولیه آنها سرعت استفاده در هنگام نوشتن HTML و محدود کردن مقدار CSS سفارشی است که شما باید آن را بنویسید.

به خصوص در مورد CSS سفارشی، ابزار می تواند به کاهش حجم فایل ها کمک کند با کاهش جفت های ارزشمند ترین اموال ارزش خود را به کلاس های تک. این می تواند تاثیر قابل توجهی در مقیاس در پروژه های شما داشته باشد.

 

html انعطاف پذیر 

در حالی که همیشه امکان پذیر نیست، ما در تلاش برای اجتناب از بیش از حد داگماتیک در الزامات HTML ما برای اجزای سازنده است. بنابراین، ما بر روی کلاس های تک در انتخابگر های CSS تمرکز می کنیم و سعی می کنیم از انتخاب فرزندان فوری (~) اجتناب کنیم. این به شما انعطاف پذیری بیشتری در اجرای شما می دهد و CSS ما را ساده تر و کمتر مشخص می کند.