قسمت هفتم bootstrap : جومبوترن ( Jumbotron ) چیست و چگونه تعریف میشود ؟

باعرض سلام خدمت شما عزیزان در قسمت هفتم به jumbotron خواهیم پرداخت.

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

ساخت jumbotron

جومبوترن ( jumbotron ) یک تلویزیون صفحه نمایش بزرگ که برای قرار دادن یک مکان بسیار بزرگ مانند استادیوم ورزشی طراحی شده است.

jumbotron برای جلب توجه بیشتر به برخی از مطالب یا اطلاعات ویژه ، یک جعبه خاکستری بزرگ را نشان می دهد.

به یاد داشته باشید که در داخل یک jumbotron می توانید تقریباً هر HTML معتبری از جمله سایر عناصر / کلاس های بوت استرپ را وارد کنید.

برای ساخت یک jumbotron یک کار ساده باید انجام داد ، المان div در html تعریف کرد و به ان کلاس .jumbotron اضافه کنید به همین سادگی یک باکس ساختید:

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

jumbotron تمام صفحه

شما چندین راه برای ساخت یک jumbotron دارید ، اولین راه ساخت jumbotron با استفاده از کلاس .jumbotron و .jumbotron-fluid به مثال زیر توجه کنید :

حال قصد دارید که قسمتی از jumbotron خود را در داخل کادر مشخص قرار دهید برای این کار از کلاس .container به شکل زیر استفاده کنید :

همچنین شما میتوانید در مثال اول بجای contianer از کلاس container-fluid استفاده کنید.

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

کلاس .container-fluid به این صورت است که در تمامی نمایشگر ها میتوانید به صورت تمام صفحه ببینید. و در تمام نمایشگر ها به صورت تمام صفحه المان های شما به نمایش در خواهند امد.

ویدیوی قسمت هفتم

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

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

موفق باشید.