السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

انواع دکمه ها در بوت استرپ

معرفی دکمه های بوت استرپ

Wiki

بوت استرپ هفت نوع دکمه را به ما  ارائه می دهد:

برای ایجاد دکمه های بالا، می توانید از کلاس های زیر استفاده کنید:

  • btn-default.
  • btn-primary.
  • btn-success.
  • btn-info.
  • btn-warning.
  • btn-danger.
  • btn-link.

در مثال زیر، این دکمه ها را ایجاد کرده ایم. به آن دقت کنید و سپس آن را اجرا کنید:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

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

این کلاس ها می توانند بر روی یک عنصر <a> یا <button> یا <input> مورد استفاده قرار گیرند:

 

مثال (دکمه های بوت استرپ)

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

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

چرا ما از یک # درون خصوصیت href لینک مثال بالا استفاده کردیم؟

هنگامی که برای لینک کردن، هیچ صفحه ای نداریم، و همچنین نمی خواهیم پیغام خطای 404 را مشاهده کنیم، از یک علامت # بعنوان لینک استفاده می کنیم. 


انواع دکمه ها، با اندازه های مختلف

Wiki

بوت استرپ چهار نوع دکمه با اندازه های مختلف را به ما ارائه می دهد:

برای ایجاد دکمه ها با اندازه های مختلف، می توانید از کلاس های زیر استفاده کنید:

  • btn-lg.
  • btn-md.
  • btn-sm.
  • btn-xs.

در مثال زیر، روش ایجاد دکمه ها با اندازه های مختلف، نشان داده شده است:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

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

دکمه ها با عرض کامل:

Wiki

یک دکمه با عرض کامل، به دکمه ای گفته می شود که به اندازه ی عرض عنصر والد خود، گسترده می شود: 

برای ایجاد یک دکمه با عرض کامل می توانید از کلاس btn-block. استفاده کنید:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary btn-block">Button 1</button>

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

دکمه های فعال و غیر فعال در بوت استرپ

Wiki

در بوت استرپ، یک دکمه می تواند به حالت فعال(قابل فشار دادن) یا غیرفعال(غیر قابل کلیک) در بیاید:   

کلاس active. یک دکمه را به صورت قابل فشار دادن درمی آورد و کلاس disabled. یک دکمه را به صورت غیر قابل کلیک در می آورد:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

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

مرجع کامل دکمه های بو اتسترپ

Wiki

برای مشاهده ی  یک مرجع کامل از تمام کلاس های دکمه ی بوت استرپ، می توانید مرجع دکمه های بوت استرپ را مطالعه نمایید.

دیدگاه‌ها  

+1 # ma.kh 1395-10-29 12:38
میشه درباره این کد توضیح دهید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-29 16:38
کد شما نیومده که....
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # آزی 1395-08-19 10:51
سلام آیا میتونم استایل متفاوتی از استایل های ارایه شده در مبحث رو کدنویسی کنم؟ مثلا دکمه ای با رنگ دلخواه و شکل متفاوت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-08-19 11:13
سلام.
بله این امکان وجود داره. میتونید از یک تگ link در قسمت head از کار خودتون استفاده کنید و یک برگه ی استایل خارجی رو در داخل اون مشخص کنید و سپس کدهای خودتون رو در داخل اون بنویسید. (تگ link رو در زیر بقیه ی موارد قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # آزی 1395-08-19 14:30
ممنونم از توضیح کاملتون. برای اینکه دکه ساخته شده دققیقا وسط قرار بگیره از چه دستوری باید استفاده کنم. float:center جواب نمیده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-08-19 15:45
خواهش می کنم. در بوت استرپ برای اینکه دکمه از نوع button رو به وسط صفحه منتقل کنید، باید اون رو داخل یک عنصر div قرار دهید، و سپس به این عنصر div کلاس text-center رو بدهید. مثل زیر:

<div class="text-cen ter">
<button type="button" class="btn btn-default" >پیش فرض</button>
</div>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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