Bootstrap 3 Typography - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.36

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 :

View Mode

Bootstrap 3 Default
Bootstrap 3 Heading
Bootstrap 3 paragraph
Bootstrap 3 <abbr>
- 4.1 HTML abbr dengan Attribute class .initialism
Bootstrap 3 <blockquote>
- 5.1 HTML <blockquote> dengan Attribute class .blockquote-reverse
Bootstrap 3 <dl>
Bootstrap 3 <code>
Bootstrap 3 <kbd>
Bootstrap 3 
- 9.1 Efek mark hanya dengan attribute class .mark
Bootstrap 3 <pre>
- 10.1 HTML <pre> dengan Attribute class .pre-scrollable
Bootstrap 3 <q>
Bootstrap 3 <samp>
Bootstrap 3
Bootstrap 3 <var>
Bootstrap 3 color
- 15.1 Bootstrap 3 Warna teks (Text Color)
- 15.2 Bootstrap 3 Warna Latar Belakang (Background Color)
Bootstrap 3 Align
Bootstrap 3 Text Transform
Bootstrap 3 Unordered lists dan Ordered lists
- 18.1 Unordered lists
- 18.2 Ordered lists
- 18.3 Menghilangkan style list default dengan class .list-unstyled
- 18.4 Membuat daftar secara inline dengan class .list-inline

# 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

# Contoh menggunakan <h1> - <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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>

<div class="container">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

</body>
</html>

# 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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>

<div class="container">
  <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>
</div>

</body>
</html>

# Contoh menggunakan element 

Element  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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>

<div class="container">

  <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>
  
</div>

</body>
</html>

# 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  (paragraph) pada Bootstrap 3 memiliki gaya margin/batas sebagai berikut.

margin-top (batas-atas) : 0px
margin-right (batas-kanan) : 0px
margin-bottom (batas-bawah) : 10px
margin-left (batas-kiri) : 0px

Untuk membuat paragraf lebih menonjol dari paragraf lainnya gunakan class .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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<p>Ini adalah normal paragraph</p>
<p>Ini adalah normal paragraph</p>

<p class="lead">Ini adalah paragraph dengan class (.lead)</p>
<div class="lead">Ini adalah DIV dengan class (.lead)</div>

<hr>
Perbesar dan perkecil area Preview 
untuk melihat fungsi dari class= lead

</div>
</body>
</html>

# Bootstrap 3 `<abbr>`

<p>
  <abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr> 
  adalah rencana keuangan tahunan 
  pemerintahan negara Indonesia yang ...dst.
</p>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Demo Triksonic</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<p>
  <abbr title="Anggaran Pendapatan dan Belanja Negara">APBN</abbr> 
  adalah rencana keuangan tahunan 
  pemerintahan negara Indonesia yang ...dst.
</p>

</div>
</body>
</html>

# .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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">

<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>

</div>
</body>
</html>

# 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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<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>

</div>
</body>
</html>

# .blockquote-reverse {...}

Untuk menampilkan sebuah kutipan dengan posisi rapat kanan, dapat menggunakan class .blockquote-reverse

Contoh

<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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<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>

</div>
</body>
</html>

# 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-horizontal

Contoh :

<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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>dl</code></h2>

<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>

<p class="alert alert-info">
<strong>Catatan :</strong><br/>
<code>.dl-horizontal</code> hanya berlaku untuk area 768px keatas,
dibawah 768 akan tampil secara normal,
silahkan coba berbesar dan perkecil area preview
untuk melihat perbedaannya.
</p>

</div>
</body>
</html>

# 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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>code</code></h2>

<p>
  Beberapa contoh element html adalah : 
  <code>span</code>, <code>div</code>, <code>main</code>
</p>

</div>
</body>
</html>

# 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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>kbd</code></h2>

<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>

</div>
</body>
</html>

# Bootstrap 3 ``

Untuk membuat/menuliskan sebuah sebuah teks yang tersorot dapat menggunakan element HTML 

Contoh :

<p>
  Gunakan element mark untuk <mark>menyorot</mark> sebuah teks.
</p>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>mark</code></h2>

<p>
  Gunakan element mark untuk <mark>menyorot</mark> sebuah teks.
</p>

</div>
</body>
</html>

# .mark {...}

Selain menggunakan element HTML , untuk menyorot sebuah teks dapat juga dilakukan dengan menggunakan attribute class .mark pada element HTML seperti span, p, div dan element lainnya

Contoh :

<p>
  Gunakan class .mark untuk <span class="mark">menyorot</span> 
  sebuah teks.
</p>

<p class="mark">
  Gunakan class .mark untuk menyorot sebuah teks.
</p>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>.mark</code></h2>

<p>
  Gunakan class <code>.mark</code> untuk <span class="mark">menyorot</span> 
  sebuah teks.
</p>

<p class="mark">
  Gunakan class <code>.mark</code> untuk menyorot sebuah teks.
</p>

</div>
</body>
</html>

# Bootstrap 3 `<pre>`

Digunakan untuk membuat teks yang terformat.

Contoh :

<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;title&gt;Triksonic&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;/body&gt;
&lt;/html&gt;
</pre>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>pre</code></h2>

<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;title&gt;Triksonic&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;/body&gt;
&lt;/html&gt;
</pre>

</div>
</body>
</html>

# .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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>.pre-scrollable</code></h2>

<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>

</div>
</body>
</html>

# 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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>q</code></h2>

<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>

</div>
</body>
</html>

# Bootstrap 3 `<samp>`

Digunakan untuk menuliskan output/hasil sample dari bahasa program komputer melalui sebuah teks.

Contoh :

<pre>
&lt;div&gt;
  &lt;b:attr cond=&#039;data:view.isSearch&#039; name=&#039;id&#039; value=&#039;searchPage&#039;/&gt;
&lt;/div&gt;
</pre>

<p>
 maka akan menghasilkan : 
 <samp>&lt;div id=&quot;searchPage&quot;&gt;...&lt;/div&gt;</samp>
</p>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>samp</code></h2>

<pre>
&lt;div&gt;
  &lt;b:attr cond=&#039;data:view.isSearch&#039; name=&#039;id&#039; value=&#039;searchPage&#039;/&gt;
&lt;/div&gt;
</pre>

<p>
 maka akan menghasilkan : 
 <samp>&lt;div id=&quot;searchPage&quot;&gt;...&lt;/div&gt;</samp>
</p>

</div>
</body>
</html>

# Bootstrap 3 ``

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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h1>Bootstrap 3 <code>small</code></h1>
<hr>

<h2>
  Tutorial Blog <small>Belajar dasar HTML</small>
</h2>

<p>
  Reperensi belajar <small>HTML</small>
</p>

</div>
</body>
</html>

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>

Hasil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>var</code></h2>

<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>

</div>
</body>
</html>

# 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-danger

Contoh :

<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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h1>Bootstrap 3 <code>Text Color</code></h1>
<hr>

<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>

</div>
</body>
</html>

# 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-danger

Contoh :

<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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h1>Bootstrap 3 <code>Background Color</code></h1>
<hr>

<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>

<hr>

<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>

</div>
</body>
</html>

# 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>

Hasil :

<div class="container"> Rata kiri - 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.Rata tengah - 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.Rata kanan - 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.Rata kanan dan kiri - 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.</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<style>
/*hanya untuk demo*/
p {
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Align</h2>

<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>

</div>
</body>
</html>

# 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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<style>
/*hanya untuk demo*/
p {
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">

<h2>Bootstrap 3 Text Transform</h2>

<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>


</div>
</body>
</html>

# 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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<h2>Bootstrap 3 Unordered lists</h2>

<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>


</div>
</body>
</html>

# 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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<h2>Bootstrap 3 Ordered lists</h2>

<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>


</div>
</body>
</html>

# .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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<h2>Bootstrap 3 <code>list-unstyled</code></h2>

<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>

</div>
</body>
</html>

# .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>

Hasil :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Triksonic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">

<h2>Bootstrap 3 <code>list-inline</code></h2>

<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>

</div>
</body>
</html>

Tidak ada komentar

Posting Komentar

Untuk menyisipkan sebuah link atau tautan gunakan teks disini
- Tanpa menggunakan https: dan http:
Untuk menyisipkan sebuah kode yang pendek gunakan kode disini
Untuk menyisipkan sebuah kode yang panjang gunakan kode disini
Untuk menyisipkan sebuah teks Tebal gunakan teks tebal disini
Untuk menyisipkan sebuah teks Miring gunakan teks miring disini
Untuk menyisipkan sebuah gambar gunakan url gambar disini

Ketentuan Komentar

Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
Pengguna bertanggung jawab atas komentar yang dikirim
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Judul	`Bootstrap 3 Typography - Tutorial Bootstrap Indonesia`
Label	`Bootstrap 3`
Diposting pada	`11 Maret 2018 - 04:41`
Diperbaharui pada	`22 Mei 2018 - 05:36`
Komentar	Tidak ada komentar

Bootstrap 3 Typography - Tutorial Bootstrap Indonesia

# 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 warna teks dan Background

# Bootstrap 3 Align (keselarasan)

# Bootstrap 3 Text Transform (Transformasi teks)

# Bootstrap 3 Unordered lists dan Ordered lists

Tidak ada komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label

Bootstrap 3 Typography - Tutorial Bootstrap Indonesia

# 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 warna teks dan Background

# Bootstrap 3 Align (keselarasan)

# Bootstrap 3 Text Transform (Transformasi teks)

# Bootstrap 3 Unordered lists dan Ordered lists

Tidak ada komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label

# 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>`