BS4 tugmalar
Tugma stillari
Bootstrap 4 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-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit 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 4 sakkizta outline/hoshiyali tugmani taqdim etadi:
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
Ota elementning butun kengligini egallaydigan blok darajasidagi tugma yaratish uchun .btn-block klassini qo‘shing.
Misol
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
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 BS4 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!