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

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت هفتم bootstrap : جومبوترن ( Jumbotron ) چیست و چگونه تعریف میشود ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

4291

Calendar-amico (2)

تاریخ انتشار:

12 , شهریور , 1398

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 مراجعه فرمایید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

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

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

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.