دکمه ها

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

مثال ها

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

برچسب های دکمه

کلاس .btnها برای استفاده با <button>عنصر طراحی شده اند. با این حال، می‌توانید از این کلاس‌ها بر روی <a>یا <input>عناصر نیز استفاده کنید (اگرچه برخی از مرورگرها ممکن است رندر کمی متفاوت اعمال کنند).

هنگام استفاده از کلاس های دکمه بر روی <a>عناصری که برای فعال کردن عملکرد درون صفحه (مانند جمع شدن محتوا) استفاده می شوند، به جای پیوند دادن به صفحات یا بخش های جدید در صفحه فعلی، این پیوندها باید به این پیوندها داده شود role="button"تا هدف خود را به طور مناسب به فناوری های کمکی مانند صفحه خوان ها

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

دکمه های طرح کلی

به یک دکمه نیاز دارید، اما نه به رنگ‌های پس‌زمینه سنگینی که می‌آورند؟ کلاس‌های اصلاح‌کننده پیش‌فرض را با کلاس‌هایی .btn-outline-*جایگزین کنید تا همه تصاویر پس‌زمینه و رنگ‌های روی هر دکمه حذف شوند.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

اندازه ها

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ اضافه کردن .btn-lgیا .btn-smبرای اندازه های اضافی.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

حالت فعال

هنگامی که فعال است، دکمه‌ها فشار داده شده (با پس‌زمینه تیره‌تر، حاشیه تیره‌تر، و سایه داخلی) ظاهر می‌شوند. نیازی به اضافه کردن یک کلاس به <button>s نیست زیرا آنها از یک کلاس شبه استفاده می کنند . با این حال، در صورتی که نیاز به تکرار حالت به صورت برنامه‌ریزی داشته باشید، همچنان می‌توانید همان ظاهر فعال را با .active(و شامل ویژگی) مجبور کنید.aria-pressed="true"

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

حالت غیر فعال

با افزودن disabledویژگی Boolean به هر <button>عنصر، دکمه‌ها را غیرفعال کنید.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

دکمه های غیرفعال شده با استفاده از <a>عنصر کمی متفاوت عمل می کنند:

• <a>s ویژگی را پشتیبانی نمی کند disabled، بنابراین باید .disabledکلاس را اضافه کنید تا بصری غیرفعال به نظر برسد.
• برخی از سبک های آینده پسند برای غیرفعال کردن همه pointer-eventsدکمه های لنگر گنجانده شده است. در مرورگرهایی که از آن ویژگی پشتیبانی می کنند، به هیچ وجه مکان نما غیرفعال شده را نمی بینید.
• دکمه‌های غیرفعال باید دارای aria-disabled="true"ویژگی برای نشان دادن وضعیت عنصر به فناوری‌های کمکی باشند.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

افزونه دکمه

با دکمه ها کارهای بیشتری انجام دهید. کنترل حالت های دکمه یا ایجاد گروه هایی از دکمه ها برای اجزای بیشتر مانند نوار ابزار.

وضعیت ها را تغییر دهید

data-toggle="button"به تغییر وضعیت یک دکمه اضافه کنید active. اگر از قبل دکمه ای را تغییر می دهید، باید .activeکلاس را aria-pressed="true" به صورت دستی به آن اضافه کنید <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

چک باکس و دکمه های رادیویی

استایل‌های بوت استرپ را .buttonمی‌توان روی عناصر دیگر مانند <label>s اعمال کرد تا کادر انتخاب یا تغییر دکمه استایل رادیویی ارائه شود. data-toggle="buttons"به یک دکمه حاوی آن دکمه‌های اصلاح‌شده اضافه .btn-groupکنید تا رفتار جابه‌جایی آن‌ها از طریق جاوا اسکریپت فعال شود و .btn-group-toggleبه استایل <input>s در دکمه‌های خود اضافه کنید. توجه داشته باشید که می‌توانید دکمه‌های تک ورودی یا گروه‌هایی از آنها ایجاد کنید.

وضعیت علامت‌گذاری شده برای این دکمه‌ها فقط از طریق رویداد روی دکمه به‌روزرسانی می‌شود. clickاگر از روش دیگری برای به‌روزرسانی ورودی استفاده می‌کنید - مثلاً با <input type="reset">یا با اعمال دستی ویژگی ورودی checked- باید به صورت دستی .activeآن را تغییر دهید.<label>

.activeتوجه داشته باشید که دکمه‌های از پیش علامت‌گذاری شده از شما می‌خواهند که کلاس را به‌صورت دستی به ورودی اضافه کنید <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

مواد و روش ها