قسمت دوم bootstrap : مفاهیم مقدماتی بوت استرپ + ویدیو

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

برای سهولت دسترسی شما به قسمت های مختلف مقاله لیست زیر را تهیه کرده ایم:

• تقسیم بندی در bootstrap 4
• کلاس های تقسیم بندی
• ساختار پایه تقسیم بندی بوت استرپ 4
• سه ستون برابر
• ستون های واکنشگرا
• دو ستون نابرابر واکنشگرا
• ویدیوی این قسمت

تقسیم بندی در bootstrap 4

سیستم تقسیم بندی بوت استرپ 4 با استفاده از باکس هایی کاملا واکنشگرا طراحی شده است و به شما اجازه میدهد تا 12 ستون در سراسر صفحه داشته باشید.

اگر نمیخواهید 12 ستون را باهم استفاده کنید میتوانید از تقسیم بندی های گوناگون دیگری نیز استفاده کنید.

برای مثال بجای 12 ستون کوچک شما میتوانید 4 ستون بزرگتر در نظر بگیرید که در ادامه ی مقاله به طراحی انها خواهیم پرداخت.

همانطور که اشاره داشتیم سیستم تقسیم بندی بوت استرپ کاملا واکنشگرا است و نسبت به نمایشگرهای مختلف با حالت های مختلف به نمایش در خواهد امد.

این نکته ی بسیار مهم را در نظر داشته باشید که باید مجموع ستون های شما 12 و یا کمتر باشد ، حتما نیاز نیست که 12 قسمت را پر کنید.

کلاس های تقسیم بندی

برای تقسیم بندی بوت استرپ شما میتوانید از 5 کلاس استفاده کنید:

.col- (دستگاه های کوچک – دستگاه هایی با عرض کوچکتر از 576 پیکسل)

.col-sm- (دستگاه های کوچک – دستگاه هایی با عرض 576 پیکسل یا بیشتر)

.col-md- ( دستگاه هایی با سایز متوسط – دستگاه هایی با عرض 768 پیکسل یا بیشتر)

.col-lg- (دستگاه های بزرگ – دستگاه هایی با عرض 992 پیکسل یا بیشتر)

.col-xl- (دستگاه های بسیار بزرگ – دستگاه هایی با عرض 1200 پیکسل یا بیشتر)

کلاس های بالا می توانند برای ایجاد پوسته های پویا و انعطاف پذیر تر ترکیب شوند.

نکته: هر کلاس مقیاس را بالا می برد، برای مثال اگر می خواهید همان عرض را برای sm و md تنظیم کنید، فقط باید sm را مشخص کنید. با مشخص کردن مقایس کوچکتر مقادیر بزرگ نیز از ان تقسیم بندی استفاده خواهند کرد.

ساختار پایه ی تقسیم بندی bootstrap 4

کدهای زیر ساختار پایه برای تقسیم بندی بوت استرپ است :

مثال اول : در مثال اول برای ایجاد ردیف از (کلاس row) استفاده کردیم . سپس، تعداد دلخواه ستون را اضافه کنید (برچسب ها با کلاس های مناسب .col – * – *). اولین ستاره (*) نشان دهنده واکنشگرایی دستگاه های مختلف مانند : sm، md، lg یا xl است، در حالی که ستاره دوم نشان دهنده یک عدد است، که باید برای هر ردیف به مجموع عدد 12 و یا کمتر از ان برسد.

مثال دوم: به جای اضافه کردن یک عدد ،به هر ستون اجازه دهید بوت استرپ متناسب با طرح، برای ایجاد ستون های عرض برابر باشد: دو عنصر عنصر = عرض 50٪ به هر ستون. سه ستون = 33.33٪ عرض به هر ستون. چهار ستون = 25٪ عرض، و غیره شما همچنین می توانید استفاده کنید .col-sm | md | lg | xl برای ایجاد ستون ریسپانسیو.

در زیر تعدادی نمونه از پوسته های پایه Bootstrap 4 را جمع آوری کرده ایم.

سه ستون برابر

در مثال زیر سه ستون برابر ، برای نمایش در تمام دستگاه ها ساخته ایم:

ستون های واکنشگرا

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

دو ستون نابرابر واکنشگرا

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

این نکته را به یاد داشته باشید که درباره ی شبکه بندی و تقسیم بندی بوت استرپ در دروس بعدی صحبت خواهیم کرد.

ویدیوی این قسمت

امیدوارم این اموزش هم برای شما عزیزان مفید واقع شده باشد ، برای دریافت اطلاعات بیشتر میتوانید به سایت getbootstrap.com مراجعه فرمایید.

موفق و پیروز باشید.