Kode Program
Original PostPengukuran (Sizing) dalam Bootstrap
21 Nov 2023 0
Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Pengukuran (Sizing) dalam Bootstrap.
Sumber : Getbootstrap.com
Mudah membuat suatu elemen sepanjang atau setinggi (relatif terhadap parent-nya) dengan bantuan utilitas width dan height kami.
Utilitas width dan height dihasilkan dari peta Sass $sizes di _variables.scss. Secara default, mendukung 25%, 50%, 75%, dan 100%. Sesuaikan nilai-nilai tersebut sesuai kebutuhan untuk menghasilkan utilitas yang berbeda di sini.
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div><div class="w-50 p-3" style="background-color: #eee;">Width 50%</div><div class="w-75 p-3" style="background-color: #eee;">Width 75%</div><div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"><div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div><div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div><div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div><div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div></div>
Anda juga dapat menggunakan max-width: 100%; dan tinggi maksimal: 100%; utilitas sesuai kebutuhan.
<img class="mw-100" src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"><div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div></div>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
.png)
.png)