BS5 tugmalar
Tugma stillari
Bootstrap 5 tugmalarning turli stillarini taqdim etadi:
Misol
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
O‘zingiz sinab ko‘ring »
Tugma klasslarini <a>, <button> yoki <input> elementlarida ishlatish mumkin:
Misol
<a href="#" class="btn btn-success">Link Button</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">
O‘zingiz sinab ko‘ring »
Nega havolaning href atributiga # qo‘yamiz?
Bizda havola beriladigan sahifa yo‘q va "404" xabarini olishni istamaganimiz uchun havola sifatida # qo‘yamiz. Haqiqiy loyihada, albatta, bu yerda "Search" sahifasiga olib boradigan haqiqiy URL bo‘lishi kerak.
Hoshiyali (outline) tugmalar
Bootstrap 5, shuningdek, sakkizta outline/hoshiyali tugmani taqdim etadi.
Qo‘shimcha "hover" effektini ko‘rish uchun sichqonchani ularning ustiga olib boring:
Misol
<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
O‘zingiz sinab ko‘ring »
Tugma o‘lchamlari
Katta tugmalar uchun .btn-lg klassidan, kichik tugmalar uchun esa .btn-sm klassidan foydalaning:
Misol
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
O‘zingiz sinab ko‘ring »
Blok darajasidagi tugmalar
Blok darajasidagi tugma ota elementning butun kengligini egallaydi.
Bootstrap 5’da tugmani .d-grid klassiga ega konteyner ichiga joylashtirib, to‘liq kenglikdagi tugma yaratishingiz mumkin.
.d-grid klassi tugmaning butun kenglik bo‘ylab cho‘zilishiga imkon beruvchi grid konteyner hosil qiladi.
Misol
<div class="d-grid">
<button type="button" class="btn btn-primary">Full-Width Button</button>
</div>
O‘zingiz sinab ko‘ring »
Agar blok darajasidagi tugmalar ko‘p bo‘lsa, ular orasidagi masofani .gap-* klassi yordamida boshqarishingiz mumkin:
Misol
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary">Full-Width Button</button>
<button type="button" class="btn btn-primary">Full-Width Button</button>
<button type="button" class="btn btn-primary">Full-Width Button</button>
</div>
O‘zingiz sinab ko‘ring »
Faol/nofaol tugmalar
Tugmani faol (bosilgan ko‘rinishda) yoki nofaol (bosib bo‘lmaydigan) holatga keltirish mumkin:
.active klassi tugmani bosilgan ko‘rinishga keltiradi, disabled atributi esa tugmani bosib bo‘lmaydigan qiladi. E’tibor bering, <a> elementlari disabled atributini qo‘llab-quvvatlamaydi, shuning uchun ularni vizual jihatdan nofaol ko‘rsatish uchun .disabled klassidan foydalanish kerak.
Misol
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
O‘zingiz sinab ko‘ring »
Spinnerli tugmalar
Tugmaga "spinner"lar ham qo‘shishingiz mumkin — ular haqida BS5 spinnerlar darsligimizda batafsil bilib olasiz:
Misol
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!