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 foydalaniladigan 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'lsa, quyuqroq fon, quyuqroq chegara va soyalar yoqilganda, ichki soya bilan bosilganda paydo bo'ladi. 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.
• Foydalanilayotgan o'chirilgan tugmalar yordamchi texnologiyalarga elementning holatini ko'rsatadigan atributni <a>o'z ichiga olishi kerak .aria-disabled="true"
• Foydalanilayotgan o'chirilgan tugmalar atributni o'z ichiga <a> olmaydihref .

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

Havola funksionalligi haqida ogohlantirish

hrefAtributni o'chirilgan havolada saqlashingiz kerak bo'lgan holatlarni qoplash uchun .disabledsinf s pointer-events: nonening havola funksiyasini o'chirishga harakat qiladi <a>. E'tibor bering, ushbu CSS xususiyati hali HTML uchun standartlashtirilmagan, ammo barcha zamonaviy brauzerlar uni qo'llab-quvvatlaydi. Bundan tashqari, qo'llab-quvvatlaydigan brauzerlarda ham pointer-events: noneklaviatura navigatsiyasi ta'sir qilmaydi, ya'ni ko'rish qobiliyatiga ega bo'lgan klaviatura foydalanuvchilari va yordamchi texnologiyalar foydalanuvchilari hali ham ushbu havolalarni faollashtirishi mumkin. Xavfsiz bo'lish uchun, ga qo'shimcha ravishda aria-disabled="true", tabindex="-1"klaviatura fokuslarini olishning oldini olish uchun ushbu havolalarga atributni qo'shing va ularning funksiyalarini butunlay o'chirish uchun maxsus JavaScript-dan foydalaning.

<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 oʻzgartirish harakatlarini faollashtirish uchun oʻsha oʻzgartirilgan tugmalarni oʻz ichiga olgan aʼga qoʻshing va tugmachalaringizdagi <label>s uslubiga qoʻshing . E'tibor bering, siz bitta kirish quvvatli tugmalar yoki ularning guruhlarini yaratishingiz mumkin.data-toggle="buttons".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