کلیدها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع


استایل های کلید

بوت استرپ ۴ استایل‌های مختلفی برای کلیدها فراهم می‌کند:[۱]

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



مثال

 1 <button type="button" class="btn">Basic</button>
 2 <button type="button" class="btn btn-primary">Primary</button>
 3 <button type="button" class="btn btn-secondary">Secondary</button>
 4 <button type="button" class="btn btn-success">Success</button>
 5 <button type="button" class="btn btn-info">Info</button>
 6 <button type="button" class="btn btn-warning">Warning</button>
 7 <button type="button" class="btn btn-danger">Danger</button>
 8 <button type="button" class="btn btn-dark">Dark</button>
 9 <button type="button" class="btn btn-light">Light</button>
10 <button type="button" class="btn btn-link">Link</button>

مشاهدهٔ نتیجه


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

مثال

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

مشاهدهٔ نتیجه

چرا در ویژگی href مربوط به لینک یک کاراکتر # قرار می‌دهیم ؟

از آنجایی که هیچ صفحه ای برای لینک کردن به آن نداریم، و نمی‌خواهیم با پیام "۴۰۴" مواجه شویم، یک کاراکتر # را بعنوان لینک در مثال‌ها قرار می‌دهیم. در یک صفحه خاص بجای این کاراکتر باید یک آدرس (به انگلیسی: URL) واقعی قرار بگیرد.

طرح کلی (به انگلیسی: Outline) کلید

بوت استرپ ۴ هشت کلید کادر دار (به انگلیسی: Outline) / طرح کلی را ایجاد کرده‌است:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-info">Info</button>
5 <button type="button" class="btn btn-outline-warning">Warning</button>
6 <button type="button" class="btn btn-outline-danger">Danger</button>
7 <button type="button" class="btn btn-outline-dark">Dark</button>
8 <button type="button" class="btn btn-outline-light text-dark">Light</button>

مشاهدهٔ نتیجه


اندازه های کلید

از کلاس .btn-lg برای کلیدهای بزرگ و کلاس .btn-sm برای کلیدهای کوچک استفاده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

1 <button type="button" class="btn btn-primary btn-lg">Large</button>
2 <button type="button" class="btn btn-primary">Default</button>
3 <button type="button" class="btn btn-primary btn-sm">Small</button>

مشاهدهٔ نتیجه


کلیدهای سطح بلوک

کلاس .btn-block برای ایجاد کلید سطح بلوک به کار می‌رود که به اندازه عرض کل والد می‌شد.

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

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

مشاهدهٔ نتیجه


کلیدهای فعال / غیرفعال

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلاس .active کلید را در حالت کلیک شده قرار می‌دهد و ویژگی disabledکلید را در حالت غیرقابل کلیک قرار می‌دهد. دقت کنید که عنصرهای <a> از ویژگی غیرفعال پشتیبانی نمی‌کنند و بنابراین از کلاس .disabled برای اینکه ظاهر کلید هم غیرفعال شود استفاده می‌شود.

مثال

1 <button type="button" class="btn btn-primary active">Active Primary</button>
2 <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
3 <a href="#" class="btn btn-primary disabled">Disabled Link</a>

مشاهدهٔ نتیجه


کلیدهای چرخنده (به انگلیسی: Spinner)

می‌توانید “spinner” را به یک کلید اضافه کنید که در مورد آن در آموزش BS4 Spinners بیشتر خواهید آموخت:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

 1 <button class="btn btn-primary">
 2   <span class="spinner-border spinner-border-sm"></span>
 3 </button>
 4 
 5 <button class="btn btn-primary">
 6   <span class="spinner-border spinner-border-sm"></span>
 7   Loading..
 8 </button>
 9 
10 <button class="btn btn-primary" disabled>
11   <span class="spinner-border spinner-border-sm"></span>
12   Loading..
13 </button>
14 
15 <button class="btn btn-primary" disabled>
16   <span class="spinner-grow spinner-grow-sm"></span>
17   Loading..
18 </button>

مشاهدهٔ نتیجه


منابع آموزشی