دکمه ها

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

مثال ها

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

<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>

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

اگر نمی خواهید متن دکمه پیچیده شود، می توانید .text-nowrapکلاس را به دکمه اضافه کنید. در Sass، می توانید تنظیم $btn-white-space: nowrapکنید که بسته بندی متن برای هر دکمه غیرفعال شود.

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

کلاس .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دکمه های لنگر گنجانده شده است. در مرورگرهایی که از آن ویژگی پشتیبانی می کنند، به هیچ وجه مکان نما غیرفعال شده را نمی بینید.
• دکمه های غیرفعال استفاده شده <a>باید دارای aria-disabled="true"ویژگی برای نشان دادن وضعیت عنصر به فناوری های کمکی باشند.
• دکمه های غیرفعال استفاده شده <a> نباید شامل این hrefویژگی باشند.

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

هشدار عملکرد پیوند

برای پوشش مواردی که باید hrefویژگی را روی یک پیوند غیرفعال نگه دارید، .disabledکلاس از pointer-events: noneتلاش برای غیرفعال کردن عملکرد پیوند <a>s استفاده می کند. توجه داشته باشید که این ویژگی CSS هنوز برای HTML استاندارد نشده است، اما همه مرورگرهای مدرن از آن پشتیبانی می کنند. علاوه بر این، حتی در مرورگرهایی که پشتیبانی می‌کنند pointer-events: none، پیمایش صفحه کلید بی‌تأثیر باقی می‌ماند، به این معنی که کاربران بینا صفحه کلید و کاربران فناوری‌های کمکی همچنان می‌توانند این پیوندها را فعال کنند. بنابراین برای ایمن بودن، علاوه بر aria-disabled="true", یک tabindex="-1"ویژگی را نیز در این پیوندها قرار دهید تا از دریافت فوکوس صفحه کلید جلوگیری کنید و از جاوا اسکریپت سفارشی برای غیرفعال کردن عملکرد آنها به طور کلی استفاده کنید.

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

مواد و روش ها