Bootstrap Teks / Tipografi
Membuat suatu tampilan dengan Bootsrap.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Agar tampilan suatu program itu responsiv.
IV.Penjelasan.
Bootstrap Teks / Tipografi
Pengaturan Default Bootstrap ini
Bootstrap global standar font-size adalah 14px, dengan garis-tinggi 1,428.
Hal ini diterapkan pada <body> dan semua paragraf.
Selain itu, semua elemen <p> memiliki margin bawah yang sama dengan setengah mereka dihitung line-height (10px secara default).
Bootstrap vs Default Browser
Dalam bab ini, kita akan melihat beberapa elemen HTML yang akan ditata sedikit berbeda oleh Bootstrap dari default browser.
<H1> - <h6>
Secara default, Bootstrap akan gaya judul HTML (<h1> untuk <h6>) dengan cara sebagai berikut:
Contoh
<div class="container">
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>
<small>
Dalam Bootstrap HTML <small> elemen digunakan untuk membuat ringan, teks sekunder dalam pos manapun:
Contoh
<div class="container">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
<mark>Bootstrap akan gaya HTML <mark> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
<abbr>
Bootstrap akan gaya HTML <abbr> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
<blockquote>
Bootstrap akan gaya HTML <blockquote> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
Untuk menampilkan kutipan di sebelah kanan, menggunakan kelas .blockquote-terbalik:
Contoh
<div class="container">
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
<dl>
Bootstrap akan gaya HTML <dl> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<code>
Bootstrap akan gaya HTML <code> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
<kbd>
Bootstrap akan gaya HTML <kbd> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
<pre>
Bootstrap akan gaya HTML <pre> elemen dengan cara berikut:
Contoh
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
Warna kontekstual dan Backgrounds
Bootstrap juga memiliki beberapa kelas kontekstual yang dapat digunakan untuk memberikan "makna melalui warna".
Kelas-kelas untuk warna teks: .text-mute, .text-primer, .text-sukses, .text-info, .text-peringatan, dan .text-bahaya:
Contoh
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
Kelas-kelas untuk warna latar belakang adalah: BG-primer, BG-sukses, bg-info, bg-peringatan, dan BG-bahaya:
Contoh
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
Contoh :
Maka outputnya :
V.Kesimpulan.Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.
VI.Refrensi.
https://www.w3schools.com/bootstrap/bootstrap_typography.asp
Komentar
Posting Komentar