ساخت 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 به لبه صفحه نمایش ندهد:

مثال

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1> 
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p> 
  </div>
  <p>This is some text.</p> 
  <p>This is another text.</p> 
</div>

<h1>Bootstrap Tutorial</h1>

<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing

responsive, mobile-first projects on the web.</p>

</div>

<p>This is another text.</p>

</div>

Jumbotron خارج از container

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

مثال

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1> 
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p> 
</div>
<div class="container">
  <p>This is some text.</p> 
  <p>This is another text.</p> 
</div>

<h1>Bootstrap Tutorial</h1>

<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,

mobile-first projects on the web.</p>

</div>

<p>This is another text.</p>

</div>

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

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

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

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

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

مثال

<div class="page-header">
  <h1>Example Page Header</h1>
</div>

<h1>Example Page Header</h1>

</div>

5/5 - (1 امتیاز)

کلاس jumbotron در بوت استرپ

ایجاد Jumbotron

Jumbotron داخل container

Jumbotron خارج از container

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

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

ایجاد Jumbotron

Jumbotron داخل container

Jumbotron خارج از container

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

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

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

افزونه Popover بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ