Didalam membuat suatu style atau model, pasti tidak terlepas dengan namanya ukuran, Ukuran ini sangat menentukan hasil akhir dari desain yang kita buat.
Misal, jika kita ingin membuat desain elemen, dimana elemen tersebut harus bersifat responsif atau tampilan elemen tersebut dapat menyesuaikan ukuran dari perangkat yang kita gunakan.
Maka, dibutuhkan suatu customisasi ukuran agar tampilan sebuah desain web dapat bersifat dinamis, sehingga menyesuaikan ukuran perangkat yang digunakan.
Sebelum lanjut mempelajari materi Bootstrap sizing ini, kita pahami dulu perbandingan syntax versi CSS dengan syntax versi Bootstrap ini.
| Syntax CSS | Syntax Bootstrap | Keterangan |
|---|---|---|
width |
w |
width |
max-width |
mw |
max-width |
height |
h |
height |
max-height |
mh |
max-height |
padding |
p |
padding |
padding-top |
pt |
padding-top |
padding-bottom |
pb |
padding-bottom |
padding-top-bottom |
py |
padding-vertikal |
padding-left |
ps |
padding-start |
padding-right |
pe |
padding-end |
padding-left-right |
px |
padding-horizontal |
margin |
m |
margin |
margin-top |
mt |
margin-top |
margin-bottom |
mb |
margin-bottom |
margin-top-bottom |
my |
margin-vertikal |
margin-left |
ms |
margin-start |
margin-right |
me |
margin-end |
margin-left-right |
mx |
margin-horizontal |
Didalam bootstrap sendiri, ukuran / sizing telah telah didefinisikan berdasarkan presentase berikut: 25%, 50%, 75%, 100%, dan auto.
Setiap presentase diatas mengacu berdasarkan ukuran layar yang kita gunakan.
Berikut merupakan penulisan didalam program.
< div class= "container">
< div class= "w-25"> Width-25%</ div>
< div class= "w-50"> Width-50%</ div>
< div class= "w-75"> Width-75%</ div>
< div class= "w-100"> Width-100%</ div>
< div class= "w-auto"> Width-auto</ div>
</ div>
Menghasilkan tampilan.
Contoh diatas merupakan penggunaan ukuran untuk lebar halaman (width).
Cara diatas juga dapat kita pakai untuk membuat tinggi elemen dalam suatu halaman (height).
Perhatikan program berikut.
< div class= "container d-flex" style= "height: 250px;">
< div class= "h-25"> Height-25%</ div>
< div class= "h-50"> Height-50%</ div>
< div class= "h-75"> Height-75%</ div>
< div class= "h-100"> Height-100%</ div>
< div class= "h-auto"> Height-auto</ div>
</ div>
Menghasilkan tampilan.
Selanjutnya, agar elemen-elemen yang kita buat tampil lebih rapi, maka harus kita berikan properti untuk jarak atau spasi.
Terdapat tiga macam properti yang dapat kita gunakan untuk mengatur jarak atau space, yaitu:
- padding
- margin
- gap
Yang dimana untuk setiap penulisan propertinya sudah kita pelajari pada table diatas, yaitu mt, pt, mb, mx, dsb.
Untuk setiap properti diatas, tentunya memiliki value size yang dapat kita gunakan sesuai kebutuhan.
Bootstrap sendiri telah mendefinisikan tujuh macam size, yaitu: 0, 1, 2, 3, 4, 5, auto.
Perlu diingat! Size yang didefinisikan hanya sampai 5, jika kalian merasa kurang.. dapat kalian tambahkan sendiri didalam atribut style.
< div class= "text-center" style= "width: 120px; height: 360px;">
Hello World!
</ div>
1. Padding
Untuk properti spacing yang pertama yaitu padding.
Padding merupakan properti jarak yang digunakan untuk memberikan space / ruang antara tepi elemen dengan isi konten.
Berikut penulisannya didalam program.
< div class= "container">
< div class= "row row-cols-2">
< div class= "col ps-5 py-3">
Elemen 1
</ div>
< div class= "col ps-5 py-3">
Elemen 2
</ div>
< div class= "col ps-5 py-3">
Elemen 3
</ div>
< div class= "col ps-5 py-3">
Elemen 4
</ div>
</ div>
</ div>
Program diatas kita menginputktan properti ps- yaitu untuk padding-start, atau padding-left. Lalu untuk size-nya kita berikan nilai 5 (ps-5).
Lalu, untuk padding vertikal-nya alias py- kita berikan nilai 3 (py-3).
Akan menghasilkan tampilan.
Jika elemen diatas tidak kita berikan padding, maka akan tampil sebagai berikut.
2. Margin
Properti spacing yang kedua yaitu margin.
Margin ini merupakan space yang dapat kita gunakan untuk memberikan jarak antar elemen.
Berikut merupakan penulisannya.
< div class= "container">
< div class= "row row-cols-2">
< div class= "col-sm-5 ps-5 py-3 my-3 mx-2">
Elemen 1
</ div>
< div class= "col-sm-5 ps-5 py-3 my-3 mx-2">
Elemen 2
</ div>
< div class= "col-sm-5 ps-5 py-3 my-3 mx-2">
Elemen 3
</ div>
< div class= "col-sm-5 ps-5 py-3 my-3 mx-2">
Elemen 4
</ div>
</ div>
</ div>
Pada program diatas kita ingin memberikan space pada tiap elemen, space yang kita berikan yaitu untuk margin atas dan margin bawah.
Maka, kita dapat menginputkan properti my- lalu diikuti size-nya 3 (my-3).
Lalu untuk margin kanan-kiri kita berikan nilai 2 (mx-2).
Akan menghasilkan tampilan.
3. Gap
Properti spacing yang ketiga yaitu Gap.
Sama seperti artinya, gap ini merupakan sekat, celah, atau jarak.
Sama halnya dengan margin, gap ini akan memberikan ruang spasi antar elemen.
properti gap ditulis didalam parent element, dengan value yang dimasukkan yaitu grid gap-[size].
grid menyatakan grid kolom yang akan diberikan gap.
Sedangkan, gap-[size] menyatakan ukuran gap tersebut.
Berikut merupakan syntax penulisannya.
< div class= "container">
< div class= "row row-cols-2 grid gap-5">
< div class= "col-sm-5 p-3">
Elemen 1
</ div>
< div class= "col-sm-5 p-3">
Elemen 2
</ div>
< div class= "col-sm-5 p-3">
Elemen 3
</ div>
< div class= "col-sm-5 p-3">
Elemen 4
</ div>
</ div>
</ div>
Program diatas kita menuliskan grid gap-5, yang berarti bahwa kita akan membuat gap antar elemen dengan size sebesar 5.
Akan menghasilkan tampilan.
Selain itu kita juga dapat membuat gap khusus untuk antar baris saja, dengan perintah row-gap-[size].
Perhatikan program berikut.
< div class= "container">
< div class= "row row-cols-2 grid row-gap-5">
< div class= "col-sm-6 p-3">
Elemen 1
</ div>
< div class= "col-sm-6 p-3">
Elemen 2
</ div>
< div class= "col-sm-6 p-3">
Elemen 3
</ div>
< div class= "col-sm-6 p-3">
Elemen 4
</ div>
</ div>
</ div>
Menghasilkan tampilan
Atau jika kita ingin membuat gap untuk antar kolom, dengan memasukkan value column-gap-[size].
< div class= "container">
< div class= "row row-cols-2 grid column-gap-5">
< div class= "col-sm-5 p-3">
Elemen 1
</ div>
< div class= "col-sm-5 p-3">
Elemen 2
</ div>
< div class= "col-sm-5 p-3">
Elemen 3
</ div>
< div class= "col-sm-5 p-3">
Elemen 4
</ div>
</ div>
</ div>
Menghasilkan tampilan.
Post a Comment
Post a Comment