BS tugmalar
Tugma stillari
Bootstrap tugmalarning turli stillarini taqdim etadi:
Yuqoridagi tugma stillarini hosil qilish uchun Bootstrap’da quyidagi klasslar mavjud:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Quyidagi misolda turli tugma stillari uchun kod ko‘rsatilgan:
Misol
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-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 misollarimizda havola sifatida # qo‘yamiz. Aslida bu yerda muayyan sahifaga olib boradigan haqiqiy URL bo‘lishi kerak.
Tugma o‘lchamlari
Bootstrap tugmalarning to‘rt xil o‘lchamini taqdim etadi:
Turli o‘lchamlarni belgilaydigan klasslar:
.btn-lg.btn-sm.btn-xs
Quyidagi misolda turli o‘lchamdagi tugmalar uchun kod ko‘rsatilgan:
Misol
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
O‘zingiz sinab ko‘ring »
Blok darajasidagi tugmalar
Blok darajasidagi tugma ota elementning butun kengligini egallaydi.
Blok darajasidagi tugma yaratish uchun .btn-block klassini qo‘shing:
Misol
<button type="button" class="btn btn-primary btn-block">Button 1</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 klassi esa tugmani bosib bo‘lmaydigan qiladi:
Misol
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
O‘zingiz sinab ko‘ring »
Bootstrap tugmalari bo‘yicha to‘liq ma’lumotnoma
Barcha tugma klasslari bo‘yicha to‘liq ma’lumot uchun Bootstrap tugmalar ma’lumotnomamizga o‘ting.
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!