نمادها

شما اینجا هستید

آموزش Bootstrap جلسه پنجم (تمرینcolوrow)

در خدمت شما هستیم با آموزش Bootstrap جلسه پنجم (تمرینcolوrow)

آموزش Bootstrap جلسه پنجم (تمرینcolوrow) از سری آموزش های تک قسمتی است.

سلام برنامه در این جلسه یک مثال عملی از نحوه چیدمان عناصر در بوت استرپ را آموزش میدهد.

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

بر اساس col ها و row ها صفحه ای متناسب برای دکستاپ و موبایل میسازیم.

 

ساخت col ها به شکل زیر است که برای شما لیست کرده ایم:

  • col-lg : از این col که اعداد ۱ تا ۱۲ را به خود میگیرد برای صفحه نمایش های عریض استفاده میشود.
  • col-md : این col نیز اعداد ۱ تا ۱۲ به خود میگیرد و برای صفحه نمایش های معمولی استفاده میشود.
  • col-sm : این col برای تبلت ها و کتاب خوان ها استفاده میشود و مقدار عددی ۱ تا ۱۲ میگیرد.
  • col-xs: برای گوشی های هوشمن و موبایل های تا ۷ اینچ استفاده میشود و مقدار عددی ۱ تا ۱۲ میگیرد.

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

در کد بالا ما برای یک div گفتیم که در حالت مانیتور عریض مقدار ۴ بگیرد در معمولی ۴ در تبلت ۴ و در موبایل ۱۲
این یعنی اگر یک row مقدار ۱۲ باشد ۴ قسمت آن متعلق به این div در حالت مانیتور است.

مثال زیر یک حالت کلی از اجرای col ها در حالت sm است:

همانطور که در بالا میبینید در یک row که نهایت تعداد آن ۱۲ است ما ۲ col با مقدار ۴ و ۸ قرار دادیم.
در خط بعدی نیز ۳ col با مقادیر ۲ ۸ ۲ قار دادیم که هر دو خط مجموعشان میشود ۱۲٫

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه چهارم (col/row)

آموزش Bootstrap جلسه ششم (تایپوگرافی)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه پنجم (تمرینcolوrow): نوع فایل:mp4 حجم فایل:29.89 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.