Kode Program
Original PostPenggunaan Posisi dalam Bootstrap
Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Posisi (Positions) dalam Bootstrap.
Sumber : Getbootstrap.com
Gunakan utilitas singkat ini untuk mengonfigurasi posisi elemen dengan cepat.
1. Nilai Posisi
Kelas pemosisian cepat tersedia, meskipun tidak responsif.
<div class="position-static">...</div><div class="position-relative">...</div><div class="position-absolute">...</div><div class="position-fixed">...</div><div class="position-sticky">...</div>
2. Atur Elemen
Atur elemen dengan mudah menggunakan utilitas pemosisian tepi. Formatnya adalah {property}-{position}.
Dengan properti sebagai salah satu dari :
- top - untuk posisi vertikal atas
- start - untuk posisi horizontal kiri (dalam LTR)
- bottom - untuk posisi vertikal bawah
- end - untuk posisi horizontal kanan (dalam LTR)
Dengan position sebagai salah satu dari :
- 0 - untuk posisi tepi 0
- 50 - untuk posisi tepi 50%
- 100 - untuk posisi tepi 100%
(Anda dapat menambahkan lebih banyak nilai posisi dengan menambahkan entri ke variabel peta Sass $position-values.)
<div class="position-relative"><div class="position-absolute top-0 start-0"></div><div class="position-absolute top-0 end-0"></div><div class="position-absolute top-50 start-50"></div><div class="position-absolute bottom-50 end-50"></div><div class="position-absolute bottom-0 start-0"></div><div class="position-absolute bottom-0 end-0"></div></div>
3. Elemen Tengah
Selain itu, Anda juga dapat memusatkan elemen dengan kelas utilitas transformasi .translate-middle.
Kelas ini menerapkan transformasi translateX(-50%) dan translateY(-50%) ke elemen yang, jika dikombinasikan dengan utilitas pemosisian tepi, memungkinkan Anda untuk memusatkan elemen secara absolut.
<div class="position-relative"><div class="position-absolute top-0 start-0 translate-middle"></div><div class="position-absolute top-0 start-50 translate-middle"></div><div class="position-absolute top-0 start-100 translate-middle"></div><div class="position-absolute top-50 start-0 translate-middle"></div><div class="position-absolute top-50 start-50 translate-middle"></div><div class="position-absolute top-50 start-100 translate-middle"></div><div class="position-absolute top-100 start-0 translate-middle"></div><div class="position-absolute top-100 start-50 translate-middle"></div><div class="position-absolute top-100 start-100 translate-middle"></div></div>
Dengan menambahkan kelas .translate-middle-x atau .translate-middle-y, elemen hanya dapat diposisikan dalam arah horizontal atau vertikal.
<div class="position-relative"><div class="position-absolute top-0 start-0"></div><div class="position-absolute top-0 start-50 translate-middle-x"></div><div class="position-absolute top-0 end-0"></div><div class="position-absolute top-50 start-0 translate-middle-y"></div><div class="position-absolute top-50 start-50 translate-middle"></div><div class="position-absolute top-50 end-0 translate-middle-y"></div><div class="position-absolute bottom-0 start-0"></div><div class="position-absolute bottom-0 start-50 translate-middle-x"></div><div class="position-absolute bottom-0 end-0"></div></div>
Contoh :
Berikut adalah beberapa contoh nyata dari kelas-kelas tersebut :
<button type="button" class="btn btn-primary position-relative">Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span></button><button type="button" class="btn btn-dark position-relative">Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg></button><button type="button" class="btn btn-primary position-relative">Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span></button>
Anda dapat menggunakan kelas-kelas ini dengan komponen yang sudah ada untuk membuat yang baru. Ingatlah bahwa Anda dapat memperluas fungsinya dengan menambahkan entri ke variabel $position-values.
<div class="position-relative m-4"><div class="progress" style="height: 1px;"><div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button><button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button><button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button></div>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
