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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 15457
دیدگاه‌ها
سلام . و خسته نباشید. به خدا همه تون عشقید از این که این همه بدون انتظار دارید کمک می کنید به یادگیری دیگران. خدا هر چی می خواهید بهتون بده ..
برای قسمت header صفحه بهتر است از چی استفاده کنیم؟
jmbotorn یا ...؟
برای هدر در بوتسترپ می توانید از jumbotron استفاده کنید.
سلام آقای احسان عباسی عزیز
ایمیل های پاسخ به این بخش برای من فرستاده نمی شود و من فکر میکردم شما دوست ندارید به سوالات من پاسخ دهید
دوست داریم ما :)
سلام . شما لطف دارید. در مورد ایمیل ها هم به زودی چک می کنیم تا درست بشه. شاید ندونید اما صفحه نظرات بیاموز رو من از صبح که بیدار میشم تا 12 شب روی رایانه ام نگه می دارم تا به نظرات سریع پاسخ بدهم.
مشکل ایمیل من برطرف شد
ببینید اگه کمکی از دست من برمیاد میتونم کمک کنم البته رایگان
در زمینه Html,css
ممنون و متشکر . اگر کمکی نیاز داشتیم حتما خبرتون می کنیم.