آموزش بوت استرپ

ساخت jumbotron و page header بوت استرپ bootstrap

این مقاله به بررسی jumbotron و ساخت jumbotron و کار با jumbotoron  و نحوه ایجاد jumbotoron  و هدر صفحه در بوت استرپ bootstrap خواهیم پرداخت.

ایجاد Jumbotron

در فریم ورک بوت استرپ  bootstrap کلاسی برای نمایش متن ویژه در یک برگه یا صفحه خاص سایت وجود دارد. توسعه دهنده براحتی می تواند با کلاس jumbotron  یک جعبه یا باکس ویژه در صفحه خود ایجاد کند. اگر دقت کنید شبیه به jumbotron  رو در وب سایت ها و فروشگاه های مختلف دیده اید.

یک jumbotron نشان دهنده یک جعبه بزرگ برای توجه اضافی و ویژه کاربر ببه برخی از محتوای خاص و یا اطلاعات مورد نظر شماست.

یک jumbotron به عنوان یک جعبه خاکستری با گوشه های گرد نمایش داده می شود. همچنین اندازه فونت متن داخل آن را افزایش می دهد.

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

از یک عنصر <div> با کلاس .jumbotron برای ایجاد jumbotron استفاده کنید:

Jumbotron داخل container

jumbotron را در داخل <div class=”container”> اگر مایلید که jumbotron به لبه صفحه نمایش ندهد:

مثال

Jumbotron خارج از container

jumbotron را خارج از <div class=”container”> اگر مایلید که jumbotron به لبه های صفحه نمایش گسترش یابد:

مثال

ایجاد هدر صفحه

هدر صفحه  page header مانند یک تقسیم کننده div است.

کلاس .page-header یک خط افقی را در زیر عنوان می افزاید (+ یک عدد اضافی در اطراف عنصر اضافه می کند):

سربرگ صفحه نمونه

از یک عنصر <div> با کلاس .page-header برای ایجاد یک صفحه هدر:

مثال

 

نوشته های مشابه

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

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

بستن