ایجاد یک jumbotron (جعبه ی ویژه) در بوت استرپ

Wiki

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

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

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

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

 قرار دادن jumbotron درون ظرف(container)

Wiki

در صورتی که نمی خواهید جعبه ویژه(jumbotron) مورد نظر تا لبه های صفحه گسترش یابد، آن را درون <div class="container"> قرار دهید:

مثال (جعبه ویژه در بوت استرپ)

<div class="container">
  <div class="jumbotron">
    <h1>آموزش بوت استرپ</h1>
    <p>بوتسترپ یکی از فریم ورک های معروف است که از آن برای ایجاد سایت های ریسپانسیو استفاده می شود</p>
  </div>
  <p>این یک متن کوچک است</p>
  <p>این یک متن کوچک دیگر است</p>
</div>

خودتان امتحان کنید »

قرار دادن jumbotron در بیرون از ظرف(container)

Wiki

در صورتی که می خواهید جعبه ویژه(jumbotron) مورد نظر تا لبه های صفحه گسترش یابد، آن را خارج از <div class="container">قرار دهید.

مثال (جعبه ویژه در بوت استرپ)

<div class="jumbotron">
  <h1>آموزش بوت استرپ</h1>
  <p>بوت استرپ یکی از فریم ورک های معروف است که از آن برای ایجاد سایت های ریسپانسیو استفاده می شود</p>
</div>
<div class="container">
  <p>این یک متن است</p>
  <p>این یک متن دیگر است</p>
</div>

خودتان امتحان کنید »

ایجاد یک هدر(header) برای صفحه در بوت استرپ

Wiki

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

یک مثال در ایجاد هدر برای صفحه

شما می توانید از یک عنصر <div> با کلاس page-header. برای ایجاد یک هدر در صفحه، استفاده کنید. به مثال زیر دقت کنید:

مثال (جعبه ویژه در بوت استرپ)

<div class="page-header">
  <h1>مثال Page Header</h1>
</div>

خودتان امتحان کنید »