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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Jumbotron در بوت استرپ خواهیم پرداخت.

در این درس به یک ویژگی دیگر که بوت استرپ پشتیبانی می کند ، Jumbotron پرداخته خواهد شد. همانطور که از نام این عنصر پیداست می تواند به صورت اختیاری اندازه عناوین را افزایش دهد و حاشیه زیادی برای محتوای صفحه فرود اضافه کند. برای استفاده از Jumbotron –

یک ظرف <div> با کلاس .jumbotron ایجاد کنید.
علاوه بر <h1> بزرگتر ، فونت به 200px کاهش می یابد.

مثال زیر این را نشان می دهد –

&lt;div class = "container"&gt;

   &lt;div class = "jumbotron"&gt;
      &lt;h1&gt;Welcome to landing page!&lt;/h1&gt;
      &lt;p&gt;This is an example for jumbotron.&lt;/p&gt;
      
      &lt;p&gt;
         &lt;a class = "btn btn-primary btn-lg" role = "button"&gt;Learn more&lt;/a&gt;
      &lt;/p&gt;
   &lt;/div&gt;
   
&lt;/div&gt;

<h1>Welcome to landing page!</h1>

<p>This is an example for jumbotron.</p>

<p>

<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>

</p>

</div>

برای به دست آوردن یک jumbotron با عرض کامل و بدون گوشه های گرد ، از کلاس .jumbotron در خارج از تمام کلاس های container. استفاده کنید و به جای آن یک container. اضافه کنید ، همانطور که در مثال زیر نشان داده شده است –

&lt;div class = "jumbotron"&gt;
   
   &lt;div class = "container"&gt;
      &lt;h1&gt;Welcome to landing page!&lt;/h1&gt;
      &lt;p&gt;This is an example for jumbotron.&lt;/p&gt;
      
      &lt;p&gt;
         &lt;a class = "btn btn-primary btn-lg" role = "button"&gt;Learn more&lt;/a&gt;
      &lt;/p&gt;
   &lt;/div&gt;
   
&lt;/div&gt;

<h1>Welcome to landing page!</h1>

<p>This is an example for jumbotron.</p>

<p>

<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>

</p>

</div>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه