Fungsi typographi Bootstrap
Bukan hanya untuk keindahan suatu website, typographi membantu pengunjung membaca artikel dengan nyaman dan mudah untuk memahami isi dari sebuah artikel. Bootstrap pun telah mengatur typographi, elemen HTML apa saja yang diatur dan class – class apa saja yang digunakan.Typographi Bootstrap
Heading
Semau elemen HTML heading diatur, dari <h1> sampai <h6> yang digunakan untuk judul. Berikut contohnya :<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Small
Tag <small> juga diatur. Berikut contohnya:<h1>h1. Bootstrap heading <small> secondary text </small> </h1>
<h2>h2. Bootstrap heading <small> secondary text </small> </h2>
<h3>h3. Bootstrap heading <small> secondary text </small> </h3>
<h4>h4. Bootstrap heading <small> secondary text </small> </h4>
<h5>h5. Bootstrap heading <small> secondary text </small> </h5>
<h6>h6. Bootstrap heading <small> secondary text </small> </h6>
Body
Pada umumnya standar ukuran huruf di Bootstrap adalah 14px dan line-hight 1,428 yang diterapkan pada elemen tag HTML <body> dan semua paragraf. Selain itu semua elemen <p> line-hightnya 10px. Contohnya :<body>
Body Bootstrap
<p> Paragraf Bootstrap </p>
</body>
Bold
<strong> Bold Bootstrap </strong>
Italic
<em> Italic Bootstrap </em>
Pengaturan letak text (aligment)
Pengaturan letak text diatur oleh class – class yang sudah ditentukan.<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Transformation classes
Transformation classes digunakan untuk memanipulasi text, berikut contoh kodenya.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Abbreviations
Berikut cara membuat Abbreviations
<abbr title="attribute">attr</abbr>
Blockquotes
Berikut cara membuat blockquotes
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Lists
Berikut cara membuat list bootstrap
<ul>
<li>...</li>
</ul>
Ordered
Berikut cara membuat orderd
<ol>
<li>...</li>
</ol>
Unstyled
Menghapus default list-style, berikut caranya.<ul class="list-unstyled">
<li>...</li>
</ul>
Inline
Berikut cara membuat inline style
<ul class="list-inline">
<li>...</li>
</ul>
Description
Berikut cara membuat description
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Horizontal description
Berikut cara membuat Horizontal description.<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Code
Berikut cara membuat code
For example, <code><section></code> should be wrapped as inline.
kbd
Berikut cara membuat kbd
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Basic Block
Berikut cara membuat basic block
Contoh :
<pre> <p> Sample text here... </p> </pre>
Typographi Bootstrap
Reviewed by Admin
on
8:24 AM
Rating:
Reviewed by Admin
on
8:24 AM
Rating:
No comments: