سبد (0)

jumbotron در بوت استرپ

 ایجاد یک 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>

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

 

آموزش صوتی Bootstrap

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه