Tugmalar

Bir nechta o'lchamlar, holatlar va boshqalarni qo'llab-quvvatlaydigan shakllar, dialoglar va boshqalardagi harakatlar uchun Bootstrap-ning maxsus tugma uslublaridan foydalaning.

Misollar

Bootstrap bir nechta oldindan belgilangan tugma uslublarini o'z ichiga oladi, ularning har biri o'zining semantik maqsadiga xizmat qiladi va ko'proq nazorat qilish uchun bir nechta qo'shimchalar kiritilgan.

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

Matnni o'rashni o'chirib qo'ying

Agar siz tugma matnini o'rashni xohlamasangiz, .text-nowrapsinfni tugmaga qo'shishingiz mumkin. Sass-da siz $btn-white-space: nowraphar bir tugma uchun matnni o'rashni o'chirib qo'yishingiz mumkin.

Tugma teglari

Sinflar element .btnbilan foydalanish uchun mo'ljallangan . <button>Biroq, siz ushbu sinflarni <a>yoki <input>elementlarda ham foydalanishingiz mumkin (ba'zi brauzerlar biroz boshqacha ko'rsatishni qo'llashi mumkin).

Joriy sahifadagi yangi sahifalar yoki boʻlimlarga havola qilish oʻrniga sahifa ichidagi funksiyalarni ishga tushirish uchun ishlatiladigan elementlarda tugma sinflaridan foydalanilganda <a>(masalan, kontentni yigʻish), bu havolalar role="button"oʻz maqsadlarini yordamchi texnologiyalarga mos ravishda etkazish uchun berilishi kerak. ekran o'quvchilari.

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

Kontur tugmalari

Tugma kerak, lekin ular olib keladigan katta fon ranglari emasmi? .btn-outline-*Har qanday tugmachadagi barcha fon tasvirlari va ranglarini olib tashlash uchun standart modifikator sinflarini sinflar bilan almashtiring .

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

O'lchamlari

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qo'shish .btn-lgyoki .btn-smqo'shimcha o'lchamlar uchun.

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

Qo'shish orqali blok darajasidagi tugmalarni yarating - ota-onaning to'liq kengligini qamrab oladiganlar .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>

Faol holat

Tugmalar faol bo'lganda bosilgan ko'rinadi (qoraroq fon, quyuqroq chegara va ichki soya bilan). s ga sinf qo'shishning hojati yo'q <button>, chunki ular psevdo-sinfdan foydalanadilar . Shu bilan birga , holatni dasturiy tarzda takrorlashingiz kerak bo'lsa , siz hali ham bir xil faol ko'rinishni majburlashingiz mumkin .active(va atributni qo'shing).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>

O'chirilgan holat

Har qanday elementga disabledmantiqiy atributni qo'shish orqali tugmalarni nofaol ko'ring .<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>

Elementdan foydalangan holda o'chirilgan tugmalar <a>biroz boshqacha ishlaydi:

• <a>s atributni qo'llab-quvvatlamaydi disabled, shuning .disableduchun uni vizual ravishda o'chirib qo'yish uchun sinfni qo'shishingiz kerak.
• Ba'zi kelajak uchun qulay uslublar barcha pointer-eventslangar tugmachalarini o'chirish uchun kiritilgan. Ushbu xususiyatni qo'llab-quvvatlaydigan brauzerlarda siz o'chirilgan kursorni umuman ko'rmaysiz.
• O'chirilgan tugmalar aria-disabled="true"yordamchi texnologiyalarga element holatini ko'rsatish uchun atributni o'z ichiga olishi kerak.

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

Plagin tugmasi

Tugmalar yordamida ko'proq harakat qiling. Boshqaruv tugmasi asboblar paneli kabi ko'proq komponentlar uchun tugmalar guruhlarini belgilaydi yoki yaratadi.

Holatlarni almashtirish

data-toggle="button"Tugma holatini almashtirish uchun qo‘shish active. Agar tugmani oldindan almashtirayotgan bo'lsangiz, sinfni .activeqo'lda va .aria-pressed="true"<button>

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

Belgilash qutisi va radio tugmalari

Bootstrap uslublari belgilash katakchasini yoki radio uslubi tugmalarini almashtirishni ta'minlash uchun s .buttonkabi boshqa elementlarga qo'llanilishi mumkin . JavaScript orqali almashish harakatlarini yoqish va tugmachalaringizdagi s uslubini qo'shish uchun <label>o'sha data-toggle="buttons"o'zgartirilgan tugmalarni o'z ichiga olgan joyga qo'shing. E'tibor bering, siz bitta kirish quvvatli tugmalar yoki ularning guruhlarini yaratishingiz mumkin..btn-group.btn-group-toggle<input>

Ushbu tugmalar uchun belgilangan holat faqat tugmadagi hodisa orqali yangilanadiclick . Agar siz kiritishni yangilash uchun boshqa usuldan foydalansangiz, masalan, <input type="reset">kiritish xususiyatini qo'lda yoki qo'lda qo'llash orqali - qo'lda checkedyoqishingiz kerak .activebo'ladi <label>.

E'tibor bering, oldindan tekshirilgan tugmalar sizdan kirishga .activesinfni qo'lda qo'shishni talab qiladi <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>

Usullari