Penggunaan Interaksi di Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Interaksi (Interactions) dalam Bootstrap.

Sumber : Getbootstrap.com

Kelas utilitas yang mengubah cara pengguna berinteraksi dengan konten situs web.

1. Pemilihan Teks

Ubah cara konten dipilih saat pengguna berinteraksi dengannya.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

2. Peristiwa Penunjuk

Bootstrap menyediakan kelas .pe-none dan .pe-auto untuk mencegah atau menambahkan interaksi elemen.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

Kelas .pe-none (dan properti CSS pointer-events yang diaturnya) hanya berfungsi untuk mencegah interaksi melalui pointer, seperti mouse, stylus, atau sentuhan layar. Namun, tautan (link) dan elemen kontrol yang diberi kelas .pe-none secara default masih bisa difokuskan dan digunakan oleh pengguna keyboard.

Agar elemen-elemen tersebut benar-benar tidak dapat diakses, bahkan oleh pengguna keyboard, Anda perlu menambahkan beberapa atribut tambahan, seperti :

• tabindex="-1" → untuk mencegah elemen tersebut menerima fokus dari keyboard, dan
• aria-disabled="true" → untuk memberi tahu teknologi bantu (assistive technologies) bahwa elemen tersebut tidak aktif atau dinonaktifkan.

Selain itu, Anda juga bisa menggunakan JavaScript untuk memastikan elemen tersebut tidak dapat digunakan sama sekali.

Untuk elemen formulir, disarankan untuk menggunakan atribut HTML disabled karena lebih sesuai dan efektif dalam menonaktifkan kontrol input.

J. Spacing

Sumber : Getbootstrap.com

Bootstrap mencakup berbagai macam kelas utilitas margin, padding, dan gap responsif singkat untuk memodifikasi tampilan elemen.

1. Margin dan Padding

Anda dapat menetapkan nilai margin atau padding yang responsif pada suatu elemen, baik untuk semua sisi maupun sebagian sisi, dengan menggunakan kelas shorthand. Sistem ini mendukung properti individual, semua sisi sekaligus, serta sisi vertikal dan horizontal.

Kelas-kelas tersebut dibangun berdasarkan peta Sass bawaan (default Sass map) dengan rentang nilai mulai dari 0.25rem hingga 3rem.

Jika Anda menggunakan CSS Grid layout, pertimbangkan untuk memakai utility gap untuk mengatur jarak antar-elemen grid.

2. Notasi (Penamaan Kelas)

Utility spacing yang berlaku untuk semua breakpoint — dari xs hingga xxl — tidak memiliki singkatan breakpoint di dalamnya. Hal ini karena kelas tersebut diterapkan mulai dari min-width: 0 dan seterusnya, sehingga tidak terikat pada media query tertentu.

Untuk breakpoint lainnya, kelas akan mencantumkan singkatan breakpoint.

• Dengan properti salah satu dari :
• m - untuk kelas yang mengatur margin
• p - untuk kelas yang mengatur padding

Dengan sides salah satu dari :

• t - untuk kelas yang mengatur margin-top atau padding-top
• b - untuk kelas yang mengatur margin-bottom atau padding-bottom
• s - (mulai) untuk kelas yang mengatur margin-left atau padding-left di LTR, margin-right atau padding-right di RTL
• e - (akhir) untuk kelas yang mengatur margin-right atau padding-right di LTR, margin-left atau padding-left di RTL
• x - untuk kelas yang mengatur *-left dan *-right
• y - untuk kelas yang mengatur *-top dan *-bottom
• blank - untuk kelas yang mengatur margin atau padding di keempat sisi elemen

Dengan size salah satu dari :

• 0 - untuk kelas yang menghilangkan margin atau padding dengan mengaturnya ke 0
• 1 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * .25
• 2 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * .5
• 3 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer
• 4 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * 1.5
• 5 - (secara default) untuk kelas yang mengatur margin atau padding ke $spacer * 3
• auto - untuk kelas yang mengatur margin ke auto
• (Anda dapat menambahkan lebih banyak ukuran dengan menambahkan entri ke variabel peta Sass $spacers.)

Contoh :

Berikut adalah beberapa contoh representatif dari kelas-kelas ini :

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

2. Pemusatan Horizontal

Selain itu, Bootstrap juga menyertakan kelas .mx-auto untuk pemusatan horizontal pada konten tingkat blok dengan lebar tetap—yaitu, konten yang memiliki display: block dan lebar yang telah ditetapkan—dengan mengatur margin horizontal ke auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

3. Margin Negatif

Dalam CSS, properti margin dapat menggunakan nilai negatif (padding tidak dapat). Margin negatif ini dinonaktifkan secara default, tetapi dapat diaktifkan di Sass dengan mengatur $enable-negative-margins: true.

Sintaksnya hampir sama dengan utilitas margin positif default, tetapi dengan penambahan n sebelum ukuran yang diminta. Berikut contoh kelas yang merupakan kebalikan dari .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

4. Gap

Saat menggunakan display: grid, Anda dapat menggunakan utilitas gap pada kontainer grid induk. Ini dapat menghemat waktu karena tidak perlu menambahkan utilitas margin ke item grid individual (turunan dari kontainer display: grid). Utilitas gap bersifat responsif secara default, dan dihasilkan melalui API utilitas kami, berdasarkan peta Sass $spacers.

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Dukungan mencakup opsi responsif untuk semua titik henti grid Bootstrap, serta enam ukuran dari peta $spacers (0–5). Tidak ada kelas utilitas .gap-auto karena secara efektif sama dengan .gap-0.

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)