Bootstrap Typhography

Pada pembahasan typhography kita akan membahas beberapa pembahasan seperti Heading, List, Body Text, Display dan lain sebagainya.
  • Heading 
    Pada HTML kita dapat membuat Heading dengan menggunakan tag <h1>,<h2>,<h3>,<h4>, <h5> dan<h6>. Namun pada Bootstrap kita dapat membuat heading cukup dengan menggunakan tag <p>.  dengan menambahkan class .h1, .h2, .h3, .h4, .h5 dan  .h6.

    Sebagai contoh 

    <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h2. Bootstrap heading</p>
    <p class="h3">h3. Bootstrap heading</p>
    <p class="h4">h4. Bootstrap heading</p>
    <p class="h5">h5. Bootstrap heading</p>
    <p class="h6">h6. Bootstrap heading</p>
      
    sehingga dihasilkan heading text sebagai berikut
  • Display Heading
    Heading yang kita bahas diatas merupakan heading standart yang juga dimiliki oleh HTML. Bootstrap menawarkan penampilan heading yang lebih besar dan juga modis yaitu display. Dengan menggunakan class .display-1, .display-2, .display-3 dan .display-4 maka secara otomatis Bootstrap akan membuat text tersebut menjadi heading yang lebih menarik dari pada heading yang HTML miliki. 

    Sebagai contoh 

    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
    maka akan dihasilkan text sebagai berikut 


    Display hanya memiliki 4 bentuk. Dimana semakin kecil angkanya ( Display-1 ) maka ukuran text yang dihasilkan akan besar sedangkan semakin kecil angkanya ( Display-4 ) makan ukuran text yang dihasilkan akan semakin kecil.
    Pertanyaannya, Apakah display hanya diterapkan pada tag heading saja? Jawabannya tentu saja tidak. Pada Bootstrap, yang terpenting itu penamaan class. Kita bisa menggunakan class display pada semua tag HTML yang menghasilkan text contoh <p>, <div> dan lainnya.

Komentar

Postingan populer dari blog ini

Pengenalan Struktur File Bootstrap

Pengenalan Bootstrap