سبد (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>

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

دیدگاه‌ها  

+11 # نسرین ح 1395-09-04 15:24
سلام . و خسته نباشید. به خدا همه تون عشقید از این که این همه بدون انتظار دارید کمک می کنید به یادگیری دیگران. خدا هر چی می خواهید بهتون بده ..
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amirkain 1394-04-24 14:28
برای قسمت header صفحه بهتر است از چی استفاده کنیم؟
jmbotorn یا ...؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-24 18:21
برای هدر در بوتسترپ می توانید از jumbotron استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # saye kian 1394-04-27 13:06
سلام آقای احسان عباسی عزیز
ایمیل های پاسخ به این بخش برای من فرستاده نمی شود و من فکر میکردم شما دوست ندارید به سوالات من پاسخ دهید
دوست داریم ما :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-27 13:11
سلام . شما لطف دارید. در مورد ایمیل ها هم به زودی چک می کنیم تا درست بشه. شاید ندونید اما صفحه نظرات بیاموز رو من از صبح که بیدار میشم تا 12 شب روی رایانه ام نگه می دارم تا به نظرات سریع پاسخ بدهم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amirkian 1394-04-27 13:21
مشکل ایمیل من برطرف شد
ببینید اگه کمکی از دست من برمیاد میتونم کمک کنم البته رایگان
در زمینه Html,css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-04-27 13:50
ممنون و متشکر . اگر کمکی نیاز داشتیم حتما خبرتون می کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

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

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