jumbotron در بوت استرپ
ایجاد یک jumbotron (جعبه ی ویژه) در بوت استرپ
یک jumbotron، یک جعبه ی بزرگ است که از آن، برای جلب توجه کردن کاربر به یک سری محتوا یا اطلاعات، استفاده می شود.
یک jumbotron به صورت یک جعبه ی خاکستری با گوشه های گرد شده نمایش داده می شود. همچنین اندازه ی فونت متن درون آن نیز بزرگ است.
نکته: شما می توانید در درون یک jumbotron تقریبا از هر نوع کد HTML به همراه دیگر عناصر یا کلاس های بوت استرپ، استفاده کنید.
برای ایجاد یک jumbotron می توانید از یک عنصر <div> با کلاس jumbotron. استفاده کنید.
قرار دادن jumbotron درون ظرف(container)
در صورتی که نمی خواهید جعبه ویژه(jumbotron) مورد نظر تا لبه های صفحه گسترش یابد، آن را درون <div class="container"> قرار دهید:
مثال (جعبه ویژه در بوت استرپ)
<div class="jumbotron">
<h1>آموزش بوت استرپ</h1>
<p>بوتسترپ یکی از فریم ورک های معروف است که از آن برای ایجاد سایت های ریسپانسیو استفاده می شود</p>
</div>
<p>این یک متن کوچک است</p>
<p>این یک متن کوچک دیگر است</p>
</div>
خودتان امتحان کنید »
قرار دادن jumbotron در بیرون از ظرف(container)
در صورتی که می خواهید جعبه ویژه(jumbotron) مورد نظر تا لبه های صفحه گسترش یابد، آن را خارج از <div class="container">قرار دهید.
مثال (جعبه ویژه در بوت استرپ)
<h1>آموزش بوت استرپ</h1>
<p>بوت استرپ یکی از فریم ورک های معروف است که از آن برای ایجاد سایت های ریسپانسیو استفاده می شود</p>
</div>
<div class="container">
<p>این یک متن است</p>
<p>این یک متن دیگر است</p>
</div>
خودتان امتحان کنید »
ایجاد یک هدر(header) برای صفحه در بوت استرپ
کلاس page-header یک خط افقی را در زیر عنوان اضافه می کند(همچنین مقداری فضا را به دور عنصر اضافه می کند):
یک مثال در ایجاد هدر برای صفحه
شما می توانید از یک عنصر <div> با کلاس page-header. برای ایجاد یک هدر در صفحه، استفاده کنید. به مثال زیر دقت کنید:
مثال (جعبه ویژه در بوت استرپ)
<h1>مثال Page Header</h1>
</div>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 15101