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

خانه » مقالات اموزشی » css » بوت استرپ » قسمت هفتم bootstrap : جومبوترن ( Jumbotron ) چیست و چگونه تعریف میشود ؟
قسمت هفتم bootstrap : جومبوترن ( Jumbotron ) چیست و چگونه تعریف میشود ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

4291

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۲-۱۸

Work time-rafiki

زمان مطالعه:

5 دقیقه

باعرض سلام خدمت شما عزیزان در قسمت هفتم به 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 مراجعه فرمایید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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