Aturan Penulisan pada Bootstrap

Seperti yang saya janjikan pada artikel sebelumnya, pada artikel kali ini saya akan membahas tentang Aturan Penulisan pada Bootstrap. Apa itu tipografi?

Tipografi, seni cetak atau tata huruf adalah suatu kesenian dan teknik memilih dan menata huruf dengan pengaturan penyebarannya pada ruang yang tersedia, untuk menciptakan kesan tertentu, guna kenyamanan membaca semaksimal mungkin. – Wikipedia.

Tipografi yang kita bicarakan disini adalah aturan/cara penulisan pada Bootstrap. FYI, secara default, Bootstrap 4 menggunakan font-size sebesar 16px, dengan line-height 1.5. Dan juga font-family nya adalah “Helvetica Neue”, Helvetica, Arial, sans-serif. Sebagai tambahan, semua tag <p> mempunyai margin-top:0 dan margin-bottom:1rem.

Baca juga: Memahami dan Membuat Grid pada Bootstrap.

Aturan Penulisan pada Bootstrap

Penggunaan <h1> sampai <h6>

[html]

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

[/html]
Hasilnya akan menjadi seperti ini,

<h1> – <h6> pada Bootstrap

<mark>

Tag ini digunakan untuk memberi background kuning.

<abbr>

Tag ini akan memberi border-bottom: dotted; pada teks.

<blockquote>

Tag yang satu ini kita gunakan untuk mengutip kata, kalimat ataupun paragraf.

<code>

Tag ini bisa kita gunakan untuk memberi tanda pada code. Misal seperti ini <div class="tes">

<kbd>

Tag ini akan menghasilkan output seperti ini, Codelatte.

<pre>

Tag pre menjadikan teks yang ditulis menjadi apa adanya sesuai format yang ditulis didalam file (dokumen HTML).

Class Tambahan pada Bootstrap 4

Selain class – class umum yang biasa kita pakai, Bootstrap menyediakan beberapa tambahan class yang bisa kita tambahkan dalam HTML, diantaranya adalah,

• .font-weight-bold > Menebalkan teks.
• .font-italic > Memiringkan teks.
• .text-left > Membuat teks menjadi rata kiri.
• .text-center > Membuat teks menjadi rata di tengah.
• .text-lowercase > Membuat teks menjadi lowercase.
• .text-uppercase > Membuat teks menjadi uppercase (HURUF KAPITAL).