tRikSonic
Tema
  • Original
  • Translate

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

# 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 <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>
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 <p> (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 <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>
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 <mark>, 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 <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>
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 :
  1. .text-left : Rata kiri
  2. .text-center : Rata tengah
  3. .text-right : Rata kanan
  4. .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 :
<!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 :
  1. .text-lowercase : digunakan untuk membuat seluruh teks menjadi huruf kecil, walaupun penulisan aslinya terdapat huruf besar (bukan size huruf)
  2. .text-uppercase : digunakan untuk membuat seluruh teks menjadi huruf besar, walaupun penulisan aslinya terdapat huruf kecil (bukan size huruf)
  3. .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

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

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

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.