Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Tipografi Bootstrap.
Bootstrap Teks / Tipografi
Pengaturan Default Bootstrap ini
Bootstrap global standar font-size adalah 14px, dengan line-height 1,428.
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 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 gaya judul HTML (<h1> untuk <h6>) dengan cara berikut.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>h1 Heading Bootstrap (36px)</h1>
<h2>h2 Heading Bootstrap (30px)</h2>
<h3>h3 Heading Bootstrap (24px)</h3>
<h4>h4 Heading Bootstrap (18px)</h4>
<h5>h5 Heading Bootstrap (14px)</h5>
<h6>h6 Heading Bootstrap (12px)</h6>
</div>
</body>
</html>
<small>
Dalam bootstrap HTML <small> elemen digunakan untuk membuat lebih ringan, teks sekunder di heading manapun.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ringan, Text Sekunder</h1>
<p>Elemen kecil digunakan untuk membuat lebih ringan, teks sekunder dalam pos manapun:</p>
<h1>Heading h1 <small>teks sekunder</small></h1>
<h2>Heading h2 <small>teks sekunder</small></h2>
<h3>Heading h3 <small>teks sekunder</small></h3>
<h4>Heading h4 <small>teks sekunder</small></h4>
<h5>Heading h5 <small>teks sekunder</small></h5>
<h6>Heading h6<small>teks sekunder</small></h6>
</div>
</body>
</html>
<Mark>
Bootstrap gaya HTML elemen <mark> dengan cara berikut.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Teks Sorot</h1>
<p>Menggunakan elemen tanda untuk<mark>teks</mark> sorot.</p>
</div>
</body>
</html>
Hasil
<Abbr>
Bootstrap gaya HTML elemen <abbr> dengan cara berikut.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Singkatan</h1>
<p>Elemen abbr digunakan untuk menandai sebuah singkatan atau akronim:</p>
<p>Apa <abbr title="World Health Organization">yang</abbr>didirikan pada tahun 1948.</p>
</div>
</body>
</html>
<Blockquote>
Bootstrap gaya HTML elemen <blockquote> dengan cara berikut.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>Elemen blockquote digunakan untuk menyajikan konten dari sumber lain:</p>
<blockquote>
<p>Selama 50 tahun, WWF telah melindungi masa depan alam. organisasi konservasi terkemuka di dunia, WWF bekerja di 100 negara dan didukung oleh 1,2 juta anggota di Amerika Serikat dan dekat dengan 5 juta secara global.</p>
<footer>Website Dari WWF</footer>
</blockquote>
</div>
</body>
</html>
Hasil
Untuk menampilkan kutipan di sebelah kanan, menggunakan .blockquote-reverse class.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>Untuk menampilkan kutipan pada penggunaan yang tepat kelas .blockquote-balik:</p>
<blockquote class="blockquote-reverse">
<p>Selama 50 tahun, WWF telah melindungi masa depan alam. organisasi konservasi terkemuka di dunia, WWF bekerja di 100 negara dan didukung oleh 1,2 juta anggota di Amerika Serikat dan dekat dengan 5 juta secara global.</p>
<footer>Website dari WWF</footer>
</blockquote>
</div>
</body>
</html>
<DL>
Bootstrap gaya HTML elemen <dl> dengan cara berikut.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Daftar Deskripsi</h1>
<p>Unsur dl menunjukkan daftar deskripsi:</p>
<dl>
<dt>Kopi</dt>
<dd>- Minuman hitam panas</dd>
<dt>Susu</dt>
<dd>- Minuman putih dingin</dd>
</dl>
</div>
</body>
</html>
Hasil
<Code>
Bootstrap gaya HTML elemen <code> dengan cara berikut.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Cuplikan kode</h1>
<p>Potongan inline kode harus tertanam dalam elemen kode:</p>
<p>Elemen HTML berikut:<code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
</body>
</html>
<Kbd>
Bootstrap gaya HTML elemen <Kbd> dengan cara berikut.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Masukan Keyboard</h1>
<p>Untuk menunjukkan masukan yang biasanya masuk melalui keyboard, menggunakan elemen kbd:</p>
<p>Gunakan <kbd>ctrl + p</kbd> untuk membuka kotak dialog Print .</p>
</div>
</body>
</html>
Hasil
<Pre>
Bootstrap gaya HTML elemen <pre> dengan cara berikut.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Beberapa Baris Kode</h1>
<p>Atau beberapa baris kode, gunakan pre elemen:</p>
<pre>
Teks dalam elemen pre
ditampilkan dalam fixed-width
font, dan mempertahankan
baik ruang dan
jeda baris.
</pre>
</div>
</body>
</html>
Warna Kontekstual dan Latar Belakang
Bootstrap juga memiliki beberapa kelas kontekstual yang dapat digunakan untuk memberikan "makna melalui warna".
Kelas-kelas untuk teks warna: .text-muted, .text-primary, .text-success, .text-info, .text-warning, dan .text-danger.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Warna kontekstual</h2>
<p>Menggunakan kelas kontekstual untuk memberikan "makna melalui warna":</p>
<p class="text-muted">Teks ini diredam.</p>
<p class="text-primary">teks ini adalah penting.</p>
<p class="text-success">Teks ini menunjukkan keberhasilan.</p>
<p class="text-info">Teks ini mewakili beberapa informasi.</p>
<p class="text-warning">Teks ini merupakan peringatan.</p>
<p class="text-danger">Teks ini merupakan bahaya.</p>
</div>
</body>
</html>
Hasil
Kelas-kelas untuk warna latar belakang adalah : .bg-primary, .bg-success, .bg-info, .bg-warning, dan .bg-danger.
Contoh
<!DOCTYPE html>Hasil
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Latar Belakang Kontekstual</h2>
<p>Menggunakan kelas latar belakang kontekstual untuk memberikan "makna melalui warna":</p>
<p class="bg-primary">teks ini adalah penting.</p>
<p class="bg-success">Teks ini menunjukkan keberhasilan.</p>
<p class="bg-info">Teks ini mewakili beberapa informasi.</p>
<p class="bg-warning">Teks ini merupakan peringatan.</p>
<p class="bg-danger">Teks ini merupakan bahaya.</p>
</div>
</body>
</html>
REFERENSI
http://www.w3schools.com/bootstrap/bootstrap_typography.asp
No comments:
Post a Comment