Pada artikel ini, kita akan mempelajari tipografi yang ada pada Bootstrap 3. Tipografi menentukan bagaimana berbagai element teks akan muncul di halaman web.
Bootstrap 3 Typography
Daftar isi halaman ini :
- Bootstrap 3 Default
- Bootstrap 3 Heading
- Bootstrap 3 paragraph
- Bootstrap 3 <abbr>
- Bootstrap 3 <blockquote>
- Bootstrap 3 <dl>
- Bootstrap 3 <code>
- Bootstrap 3 <kbd>
- Bootstrap 3 <mark>
- Bootstrap 3 <pre>
- Bootstrap 3 <q>
- Bootstrap 3 <samp>
- Bootstrap 3 <small>
- Bootstrap 3 <var>
- Bootstrap 3 color
- Bootstrap 3 Align
- Bootstrap 3 Text Transform
- Bootstrap 3 Unordered lists dan Ordered lists
# Bootstrap 3 Default
Bootstrap 3 memiliki default setting yang ditrapkan pada element pada
<body> sebagai berikut :body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
# Bootstrap 3 Heading
Bootstrap 3 Typography pada bagian Heading bisa menggunakan secara langsung pada element heading dari
<h1> - <h6> atau dengan menggunakan nama class .h1, .h2, .h3, .h4, .h5 dan .h6<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
# Contoh menggunakan nama class
<div class="h1">Heading 1</div>
<div class="h2">Heading 2</div>
<div class="h3">Heading 3</div>
<div class="h4">Heading 4</div>
<div class="h5">Heading 5</div>
<div class="h6">Heading 6</div>
# Contoh menggunakan element
<small>Element
<small> dalam Typography Heading digunakan untuk menciptakan teks yang lebih kecil dari ukuran teks disekitarnya, contoh penerapannya sebagai berikut :<h1>Heading 1 <small>(Teks Kedua)</small></h1>
<h2>Heading 2 <small>(Teks Kedua)</small></h2>
<h3>Heading 3 <small>(Teks Kedua)</small></h3>
<h4>Heading 4 <small>(Teks Kedua)</small></h4>
<h5>Heading 5 <small>(Teks Kedua)</small></h5>
<h6>Heading 6 <small>(Teks Kedua)</small></h6>
<div class="h1">Heading 1 <small>(Teks Kedua)</small></div>
<div class="h2">Heading 2 <small>(Teks Kedua)</small></div>
<div class="h3">Heading 3 <small>(Teks Kedua)</small></div>
<div class="h4">Heading 4 <small>(Teks Kedua)</small></div>
<div class="h5">Heading 5 <small>(Teks Kedua)</small></div>
<div class="h6">Heading 6 <small>(Teks Kedua)</small></div># Bootstrap 3 paragraph
Ukuran huruf default global Bootstrap 3 adalah
14px, dengan garis-tinggi 1.4 yang diterapkan pada element <body> dan semua paragraf. Element <p> (paragraph) pada Bootstrap 3 memiliki gaya margin/batas sebagai berikut.margin-top(batas-atas) :0pxmargin-right (batas-kanan) :0pxmargin-bottom(batas-bawah) :10pxmargin-left(batas-kiri) :0px
.lead
Contoh Bootstrap paragraph
<p>Ini adalah normal paragraph</p>
<p>Ini adalah normal paragraph</p>
<p class="lead">Ini adalah paragraph dengan class (.lead)</p># Bootstrap 3 <abbr>
<p>
<abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr>
adalah rencana keuangan tahunan
pemerintahan negara Indonesia yang ...dst.
</p># .initialism {...}
Untuk menampilkan teks
abbr yang sedikit lebih kecil gunakan class .initialism pada element HTML <abbr>Contoh :
<p>
<abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr>
adalah rencana keuangan tahunan
pemerintahan negara Indonesia yang ...dst.
</p>
<p>
<abbr title="Anggaran Pendapatan dan Belanja Negara" class="initialism">
apbn
</abbr>
adalah rencana keuangan tahunan
pemerintahan negara Indonesia yang ...dst.
</p># Bootstrap 3 <blockquote>
<blockquote>
<p>
<strong>HTML5</strong> merupakan salah satu karya
Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)
untuk mendefinisikan sebuah bahasa markah tunggal
yang dapat ditulis dengan cara HTML ataupun XHTML.
</p>
<footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer>
</blockquote># .blockquote-reverse {...}
Untuk menampilkan sebuah kutipan dengan posisi rapat kanan, dapat menggunakan class
.blockquote-reverseContoh
<blockquote class="blockquote-reverse">
<p>
<strong>HTML5</strong> merupakan salah satu karya
Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C)
untuk mendefinisikan sebuah bahasa markah tunggal
yang dapat ditulis dengan cara HTML ataupun XHTML.
</p>
<footer>Sumber :https://id.wikipedia.org/wiki/HTML5</footer>
</blockquote># Bootstrap 3 <dl>
Untuk membuat daftar definisi dari sebuah istilah atau keterangan dapat menggunakan element
<dl>, class yang bisa diterapkan pada element ini adalah .dl-horizontalContoh :
<dl>
<dt>Hiperbola</dt>
<dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>
<dt>Symphony</dt>
<dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd>
</dl>
<dl class="dl-horizontal">
<dt>Hiperbola</dt>
<dd>Gaya bahasa yang menyatakan sesuatu secara berlebihan</dd>
<dt>Symphony</dt>
<dd>Karya musik panjang untuk orkestra, khususnya dalam bentuk sonata</dd>
</dl># Bootstrap 3 <code>
Untuk membuat/menuliskan bahasa program komputer secara inline gunakan element HTML
<code>Contoh :
<p>
Beberapa contoh element html adalah :
<code>span</code>, <code>div</code>, <code>main</code>
</p># Bootstrap 3 <kbd>
Untuk membuat/menuliskan sebuah tombol pada keyboard gunakan element HTML
<kbd>Contoh :
<p>
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>
<p>
<kbd>Ctrl + P</kbd>.
</p>
<p>
<kbd>Ctrl + Shift</kbd> + <kbd>F3</kbd>
</p># Bootstrap 3 <mark>
Untuk membuat/menuliskan sebuah sebuah teks yang tersorot dapat menggunakan element HTML
<mark>Contoh :
<p>
Gunakan element mark untuk <mark>menyorot</mark> sebuah teks.
</p># .mark {...}
Selain menggunakan element HTML
<mark>, untuk menyorot sebuah teks dapat juga dilakukan dengan menggunakan attribute class .mark pada element HTML seperti span, p, div dan element lainnyaContoh :
<p>
Gunakan class .mark untuk <span class="mark">menyorot</span>
sebuah teks.
</p>
<p class="mark">
Gunakan class .mark untuk menyorot sebuah teks.
</p># Bootstrap 3 <pre>
Digunakan untuk membuat teks yang terformat.
Contoh :
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Triksonic</title>
</head>
<body>
</body>
</html>
</pre># .pre-scrollable {...}
Untuk membatasi tinggi atau jika tidak ingin element
<pre> tidak terlalu panjang tingginya dapat menggunakan class .pre-scrollable pada HTML <pre>. Class .pre-scrollable mempunyai batas tinggi 340px dan scrolling pada axis-y mempunyai nilai : scroll.Contoh :
<pre class="pre-scrollable">
[INTRO]
G Am Bm Am C D
[Verse 1]
D G Bm Am
Bengawan Solo
D G Am Bm
Riwayatmu kini
E Am D
Sedari dulu jadi
A D7 G Am Bm
Perhatian insani
[Verse 2]
D G Bm Am
Musim kemarau
D G Am Bm
Tak s'brapa airmu
E Am D
Di musim hujan air
A D7 G C G
Meluap sampai jauh
...dan seterusnya ini hanya untuk demo
</pre># Bootstrap 3 <q>
Digunakan untuk menuliskan sebuah kutipan pendek
Contoh :
<p>
<strong>Apa arti Tema</strong> - <q>Tema merupakan suatu gagasan pokok atau ide
pikiran tentang suatu hal,salah satunya dalam membuat suatu tulisan</q>.
Di setiap tulisan pastilah mempunyai sebuah tema, karena dalam sebuah penulisan
dianjurkan harus memikirkan tema apa yang akan dibuat.
</p># Bootstrap 3 <samp>
Digunakan untuk menuliskan output/hasil sample dari bahasa program komputer melalui sebuah teks.
Contoh :
<pre>
<div>
<b:attr cond='data:view.isSearch' name='id' value='searchPage'/>
</div>
</pre>
<p>
maka akan menghasilkan :
<samp><div id="searchPage">...</div></samp>
</p># Bootstrap 3 <small>
Digunakan untuk teks yang lebih kecil dari teks yang ada disekitarnya.
Contoh :
<h1>
Tutorial Blog <small>Belajar dasar HTML</small>
</h1>
<p>
Reperensi belajar <small>HTML</small>
</p>Bootstrap 3 <var>
Digunakan untuk menuliskan teks yang bernilai sebuah variable.
Contoh :
<p>
3<var>x</var> + 5 = 7
</p>
<p>
2 - 3<var>y</var> = 6
</p>
<p>
<var>z</var> + 3 = 4<var>z</var>
</p># Bootstrap 3 warna teks dan Background
Bootstrap 3 menggunakan nama
class khusus dalam hal pewarnaan teks dan backround, antara lain :# Warna Teks(Text Color)
Untuk pewarnaan sebuah teks dapat menggunakan nama class pada HTML element yaitu :
.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-dangerContoh :
<h2 class="text-muted">h2.text-muted</h2>
<h2 class="text-primary">h2.text-primary</h2>
<h2 class="text-success">h2.text-success</h2>
<h2 class="text-info">h2.text-info</h2>
<h2 class="text-warning">h2.text-warning</h2>
<h2 class="text-danger">h2.text-danger</h2>
<hr>
<p class="text-muted">p.text-muted</p>
<p class="text-primary">p.text-primary</p>
<p class="text-success">p.text-success</p>
<p class="text-info">p.text-info</p>
<p class="text-warning">p.text-warning</p>
<p class="text-danger">p.text-danger</p>
<h2>
<span class="text-muted">Nama</span>
<span class="text-primary">Blog</span>
<span class="text-success">ini</span>
<span class="text-warning">adalah</span>
<span class="text-danger">TrikSonic</span>
</h2># Warna Latar Belakang (Background Color)
Untuk pewarnaan sebuah background/later belakang dapat menggunakan nama class pada element HTML dengan nama class yaitu :
.bg-primary, .bg-success, .bg-info, .bg-warning, dan .bg-dangerContoh :
<h2 class="bg-primary">h2.bg-primary</h2>
<h2 class="bg-success">h2.bg-success</h2>
<h2 class="bg-info">h2.bg-info</h2>
<h2 class="bg-warning">h2.bg-warning</h2>
<h2 class="bg-danger">h2.bg-danger</h2>
<hr>
<p class="bg-primary">p.bg-primary</p>
<p class="bg-success">p.bg-success</p>
<p class="bg-info">p.bg-info</p>
<p class="bg-warning">p.bg-warning</p>
<p class="bg-danger">p.bg-danger</p>
<h2>
<span class="bg-primary">Nama Blog</span>
<span class="bg-success">ini</span>
<span class="bg-warning">adalah</span>
<span class="bg-danger">TrikSonic</span>
</h2># Bootstrap 3 Align (keselarasan)
Untuk menentukan keselarasan posisi dapat menggunakan nama class pada element HTML, antara lain sebagai berikut :
.text-left: Rata kiri.text-center: Rata tengah.text-right: Rata kanan.text-justify: Rata kanan dan Rata kiri
Contoh :
<p class="text-left">
<b>Rata kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
<p class="text-center">
<b>Rata tengah</b> - Lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
<p class="text-right">
<b>Rata kanan</b> - Lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
<p class="text-justify">
<b>Rata kanan dan kiri</b> - Lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p># Bootstrap 3 Text Transform (Transformasi teks)
Untuk melakukan transformasi teks (perubahan teks bentuk) menggunakan bootstrap dapat menggunakan nama
class pada element HTML, antara lain sebagai berikut : .text-lowercase: digunakan untuk membuat seluruh teks menjadi huruf kecil, walaupun penulisan aslinya terdapat huruf besar (bukan size huruf).text-uppercase: digunakan untuk membuat seluruh teks menjadi huruf besar, walaupun penulisan aslinya terdapat huruf kecil (bukan size huruf).text-capitalize: digunakan untuk membuat huruf besar pada tiap kata, tetapi hanya pada bagian huruf pertamanya saja (bukan size huruf)
Contoh :
<p class="text-lowercase">
<b>text-lowercase</b> - LOREM IPSUm doLoR sit amet, an MELIORE feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
<p class="text-uppercase">
<b>text-uppercase</b> - Lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. Repudiandae reprehendunt
no eam, veniam animal principes in ius. Ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
<p class="text-capitalize">
<b>text-capitalize</b> - lorem ipsum dolor sit amet, an meliore feugait
delicata sed. Ius in inani aliquam. repudiandae reprehendunt
no eam, veniam animal principes in ius. ei vim animal tacimates,
pro ne alia quaeque, mei ea choro signiferumque.
</p>
# Bootstrap 3 Unordered lists dan Ordered lists
# Unordered lists
Digunakan untuk membuat daftar berupa bullet list.
Contoh :
<ul>
<li>Ketua</li>
<li>Wakil
<ul>
<li>Wakil ketua 1</li>
<li>Wakil ketua 2</li>
<li>Wakil ketua 3</li>
</ul>
</li>
<li>Sekretaris</li>
<li>Anggota
<ul>
<li>Anggota 1</li>
<li>Anggota 2</li>
<li>Anggota 3</li>
</ul>
</li>
</ul>
# Ordered lists
Digunakan untuk membuat daftar berupa angka atau nomor.
Contoh :
<ol>
<li>Ketua</li>
<li>Wakil
<ol>
<li>Wakil ketua 1</li>
<li>Wakil ketua 2</li>
<li>Wakil ketua 3</li>
</ol>
</li>
<li>Sekretaris</li>
<li>Anggota
<ol>
<li>Anggota 1</li>
<li>Anggota 2</li>
<li>Anggota 3</li>
</ol>
</li>
</ol># .list-unstyled {...}
Untuk menghapus bentuk styling default dari daftar item, gunakan class
.list-unstyled yang diterapkan untuk element <ul> atau <ol>.Contoh :
<ul class="list-unstyled">
<li>Ketua</li>
<li>Wakil</li>
<li>Sekretaris</li>
<li>Anggota</li>
</ul>
<hr>
<ol class="list-unstyled">
<li>Merah</li>
<li>Kuning</li>
<li>Hijau</li>
<li>Jingga</li>
</ol>
<hr>
<ul class="list-unstyled">
<li>Ketua</li>
<li>Wakil
<ul>
<li>Wakil ketua 1</li>
<li>Wakil ketua 2</li>
</ul>
</li>
<li>Sekretaris</li>
<li>Anggota</li>
</ul># .list-inline {...}
Untuk membuat daftar secara horizontal dalam satu baris, berdampingan, gunakan class
.list-inline yang diterapkan untuk element <ul> atau <ol>Contoh :
<ul class="list-inline">
<li><strong>Share To</strong></li>
<li><a href="#">G-Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
Posting Komentar