Bootstrap: Text/Tipografi
Assalamu'alaikum wr.wb
Kali ini saya akan membahas Bootstrap Text/Tipografi.
Pengaturan Default Boootstrap
-
Bootstrap global standar fons-size adalah 14px, dengan garis tinggi 1,428.
-
Diterapkan pada <body> dan semua paragraf.
-
Semua element <p> memiliki margin bawah yang
sama dengan setengah mereka dihitung line-height (secara
default 10px).
Bootstrap vs Browser Default
Dalam bab ini, kita akan melihat beberapa elemen HTML yang akan ditata sedikit berbeda oleh Bootstrap dari browser default.<h1> - <h6>
Secara default, Bootstrap gaya judul HTML (<h1> untuk <h6>) dengan cara berikut:<!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>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>
</body>
</html>
Hasil:
<small>
Dalam bootstrap HTML elemen <small> digunakan untuk membuat lebih ringan, teks sekunder di heading manapun.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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, Teks Sekunder</h1>
<p>Elemen small digunakan untuk membuat lebih ringan, teks sekunder dalam pos manapun:</p>
<h1>h1 heading <small>Teks Sekunder</small></h1>
<h2>h2 heading <small>Teks Sekunder</small></h2>
<h3>h3 heading <small>Teks Sekunder</small></h3>
<h4>h4 heading <small>Teks Sekunder</small></h4>
<h5>h5 heading <small>Teks Sekunder</small></h5>
<h6>h6 heading <small>Teks Sekunder</small></h6>
</div>
</body>
</html>
Hasil:
<mark>
Menggunakan elemen <mark> untuk menyoroti teksContoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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>Sorot Teks</h1>
<p>Menggunakan elemen mark untuk<mark>menyoroti</mark> teks</p>
</div>
</body>
</html>
</html>
Hasil:
<abbr>
Elemen <abbr> digunakan untuk menandai sebuah singkatan atau akronimContoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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>The <abbr title="World Health Organization">WHO</abbr> didirikan pada tahun 1948.</p>
</div>
</body>
</html>
Hasil:
<blockquote>
Elemen <blockquote> digunakan untuk menyajikan konten dari sumber lain: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>Blok Kutipan</h1>
<p>Elemen blockquote digunakan untuk menyajikan konten dari sumber lain:</p>
<blockquote>
<p>Bootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.</p>
<footer>From Wikipedia</footer>
</blockquote>
</div>
</body>
</html>
Hasil:
<dl>
Unsur <dl> menunjukkan daftar deskripsi.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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>Deskripsi</h1>
<p>Unsur dl menunjukkan daftar deskripsi:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</body>
</html>
Hasil:
<code>
Contoh:<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar</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>Kode Cuplikan</h1>
<p>Potongan inline kode harus tertanam dalam elemen kode:</p>
<p>Elemen-elemen HTML berikut: <code>menjangkau</code>, <code>bagian</code>, dan <code>div</code> mendefinisikan bagian dalam sebuah dokumen.</p>
</div>
</body>
</html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Kode Cuplikan</h1>
<p>Potongan inline kode harus tertanam dalam elemen kode:</p>
<p>Elemen-elemen HTML berikut: <code>menjangkau</code>, <code>bagian</code>, dan <code>div</code> mendefinisikan bagian dalam sebuah dokumen.</p>
</div>
</body>
</html>
Hasil:
<kbd>
Elemen <kbd> digunakan untuk menunjukkan masukan yang biasanya masuk melalui keyboard.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootsrap</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>Input Keyboard</h1>
<p>Untuk menunjukkan masukan yang biasanya masuk melalui keyboard, menggunakan elemen kbd:</p>
<p>Use <kbd>ctrl + p</kbd> untuk membuka kotak dialog Print.</p>
</div>
</body>
</html>
<h1>Input Keyboard</h1>
<p>Untuk menunjukkan masukan yang biasanya masuk melalui keyboard, menggunakan elemen kbd:</p>
<p>Use <kbd>ctrl + p</kbd> untuk membuka kotak dialog Print.</p>
</div>
</body>
</html>
Hasil:
<pre>
Untuk Contoh baris kode, gunakan elemen pre.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar 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>Contoh Garis Kode</h1>
<p>Untuk Contoh baris kode, gunakan elemen pre:</p>
<pre>
Teks dalam elemen pre
ditampilkan dalam fixed-width
font, dan mempertahankan
baik ruang dan
jeda baris.
</pre>
</div>
</body>
</html>
Hasil:
Sekian pembahasan
Bootstrap Text/Tipografi.
Semoga Bermanfaat...!!!
0 komentar:
Posting Komentar