Mengenal Sizing Pada Bootstrap 4

Haloo teman-teman Source Code Aplikasi, Kali ini saya akan membahas mengenai Mengenal Sizing Pada Bootstrap 4 dimana sizing ini berhubungan bagi menentukan sebuah lebar dari suatu objek atau element serta menentukan suatu tinggi dari unsur tersebut. Teman-teman dapat seketika pelajari pun di link resminya yaitu di getbootstrap.com.

Oke seketika saja saya akan membahas sedikit bagi dapat Mengenal Sizing Pada Bootstrap 4. Pertama-tama yang akan saya jelaskan yaitu mengenai class bootstrap bagi mengatur lebar dari suatu unsur. Berikut ini yaitu contoh penulisan scriptnya.

    <div class=w-25 p-3 bg-primary;>Lebar 25%</div>
    <div class=w-50 p-3 bg-info>Lebar 50%</div>
    <div class=w-75 p-3 bg-secondary>Lebar 75%</div>
    <div class=w-100 p-3 bg-warning>Lebar 100%</div>
    <div class=w-auto p-3 bg-success>Lebar auto</div>

Tampilannya script diatas akan seperti di gambar di bawah ini. W mendeklarasikan width dan disambung dengan simbol “-“ baru kemudian persentase dari lebarnya.

Dan berikut yaitu penjelasan mengenai class bootstrap bagi mengatur tinggi suatu unsur. Dimana h mendeklarasikan height lalu disambung dengan simbol “-“ lalu kemudian presentase dari tinggi. Di bawah ini contoh scriptnya ya teman-teman.

<div style=height: 150px; background-color: rgba(255,0,0,0.1); class=p-3>
      <div class=h-25 d-inline-block bg-primary text-center style=width: 120px;>Tinggi 25%</div>
      <div class=h-50 d-inline-block bg-info text-center style=width: 120px;>Tinggi 50%</div>
      <div class=h-75 d-inline-block bg-secondary text-center style=width: 120px;>Tinggi 75%</div>
      <div class=h-100 d-inline-block bg-warning text-center style=width: 120px;>Tinggi 100%</div>
      <div class=h-auto d-inline-block bg-success text-center style=width: 120px;>Tinggi auto</div>
</div>

Dan kalau teman-teman buka di browser masing-masing karenanya akan tampil seperti di gambar di bawah ini.

Disini teman-teman pun dapat menggunakan max width dan max height. Dan format penulisannya seperti di bawah ini.

<img class=mw-100 src=.../1000px100?text=Max-width%20%3D%20100%25 alt= dimana sizing ini berhubungan bagi menentukan sebuah lebar dari suatu objek atau element Mengenal Sizing Di Bootstrap 4>

<div style=height: 100px; background-color: rgba(255,0,0,0.1);>
  <div class=mh-100 w-25 bg-primary>Max-height 100%</div>
</div>

Nah teman-teman dapat perhatikan value presentase bagi menentukan suatu lebar atau tinggi dari unsur atau objek tertentu. Dimana presentase yang disediakan oleh bootstrap 4 yaitu 25%, 50%, 75% dan 100% kemudian value auto. Teman-teman dapat memanfaatkan class ini bagi menolong membangun sebuah tampilan blog yang lebih memiliki tampilan yang dinamis. Dan di bootstrap 4 ini banyak class yang dapat amat menolong kita pada perancangan blog.

Demikian artikel tenatng Mengenal Sizing Pada Bootstrap 4. Semoga dapat bermanfaat dan selamat mencoba ya.

Sumber https://kursuswebsite.org