Print this page
Settingan default Bootstrap sendiri adalah font-size 14px, dengan line-height of 1.428.
Hal ini di aplikasikan pada <body> dan seluruh paragraf.
Hal ini di aplikasikan pada <body> dan seluruh paragraf.
Ok sebelum saya memulai tutorial ini, saya sudah mendownload Bootstrapnya, saya menggunakan bootstrap-3.3.6, dan seperti biasa scriptnya akan saya share di akhir tutorial okok
1. <h1> - <h6><html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="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>
Hasilnya
<small> digunakan untuk membuat text lighter
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Small Element</h1>
<p>small element digunakan untuk membuat lighter, contohnya</p>
<h1>h1 heading <small>Small text</small></h1>
<h2>h2 heading <small>Small text</small></h2>
<h3>h3 heading <small>Small text</small></h3>
<h4>h4 heading <small>Small text</small></h4>
<h5>h5 heading <small>Small text</small></h5>
<h6>h6 heading <small>Small text</small></h6>
</div>
</body>
</html>
3.<mark>
<mark> digunakan untuk menebalkan<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Mark Element</h1>
<p>Digunakan untuk <mark>menebalkan</mark> text</p>
</div>
</body>
</html>
4. <abbr>
abbr element digunakan untuk menandai sebuah Singkatan atau akronomim
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Singkatan</h1>
<p>abbr element digunakan untuk menandai sebuah Singkatan atau akronomim:</p>
<p>The <abbr title="Liverpool Fans Club">LFC</abbr> adalah tim yang berasal dari inggris</p>
</div>
</body>
</html>
5. <blockquote>
blockquote element digunakan untuk menampilkan konten dari sumber lain
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>blockquote element digunakan untuk menampilkan konten dari sumber lain</p>
<blockquote>
<p>Jika engkau ingin bahagia,
syukurilah yang sudah ada padamu,
hormatilah impianmu,
bergembiralah dalam pekerjaanmu,
setialah dalam cintamu,
tuluslah dalam persahabatanmu,
dan sandarkanlah semua harapanmu
hanya kepada Tuhan..</p>
<footer>Mario Teguh</footer>
</blockquote>
</div>
</body>
</html>
6. <blockquote class="blockquote-reverse">
.blockquote-reverse element digunakan jika ingin menampilkan blackquotes disebelah kanan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes-reverse</h1>
<p>.blockquote-reverse element digunakan jika ingin menampilkan blackquotes disebelah kanan</p>
<blockquote class="blockquote-reverse">
<p>Jika engkau ingin bahagia,
syukurilah yang sudah ada padamu,
hormatilah impianmu,
bergembiralah dalam pekerjaanmu,
setialah dalam cintamu,
tuluslah dalam persahabatanmu,
dan sandarkanlah semua harapanmu
hanya kepada Tuhan.</p>
<footer>Mario Teguh</footer>
</blockquote>
</div>
</body>
</html>
7. <dl>
dl element digunakan untuk menampilkan list
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Deskripsi List</h1>
<p>dl element digunakan untuk menampilkan list</p>
<dl>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>- Lorem ipsum dolor sit amet</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>- Lorem ipsum dolor sit amet</dd>
</dl>
</div>
</body>
</html>
.blockquote-reverse element digunakan jika ingin menampilkan blackquotes disebelah kanan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Blockquotes-reverse</h1>
<p>.blockquote-reverse element digunakan jika ingin menampilkan blackquotes disebelah kanan</p>
<blockquote class="blockquote-reverse">
<p>Jika engkau ingin bahagia,
syukurilah yang sudah ada padamu,
hormatilah impianmu,
bergembiralah dalam pekerjaanmu,
setialah dalam cintamu,
tuluslah dalam persahabatanmu,
dan sandarkanlah semua harapanmu
hanya kepada Tuhan.</p>
<footer>Mario Teguh</footer>
</blockquote>
</div>
</body>
</html>
dl element digunakan untuk menampilkan list
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Deskripsi List</h1>
<p>dl element digunakan untuk menampilkan list</p>
<dl>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>- Lorem ipsum dolor sit amet</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>- Lorem ipsum dolor sit amet</dd>
</dl>
</div>
</body>
</html>
8. <code>
Code element digunakan untuk merubah text menjadi bentuk lain
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Potongan Kode</h1>
<p>Code element digunakan untuk merubah text menjadi bentuk lain</p>
<p>HTML elemente meliputi <code>span</code>, <code>section</code>, dan <code>div</code> semuanya merupakan bagian dari section</p>
</div>
</body>
</html>
9. <kbd>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Keyboard Inputs</h1>
<p>sebagai penanda tombol apa yang harus dipencet pada keyboard, gunakan kdb element</p>
<p>gunakan <kbd>ctrl + c</kbd> untuk mencopy data</p>
</div>
</body>
</html>
10. <pre>
untuk membuat multiple lines code, gunakan pre element
text di browser akan tampil sesuai dengan susunan di text editor
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<div class="container">
<h1>Multiple Code Lines</h1>
<p>untuk membuat multiple lines code, gunakan pre element:</p>
<pre>
Pada pre element kamu bisa membuat tampilan text sesuai
keinginan kamu
seperti spasi dan baris
</pre>
</div>
</body>
</html>
11. contextual
Gunakan contextual classes sebagai penanda sebuah action
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<body>
<div class="container">
<h2>Warna Contextual</h2>
<p>Gunakan contextual classes sebagai penanda sebuah action</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
</body>
</html>
12. Contextual Backgrounds
Gunakan contextual background classes untuk menampilkan warna background pada text
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Gunakan contextual background classes untuk menampilkan warna background pada text</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
</body>
</html>
13. Lowercased, Uppercased, Capitalized
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kodekidi.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Typography</h2>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>
</div>
</body>
</html>
Ok sekian tutorial Tutorial Bootstrap Text/Typography 3 Indonesia, semoga bermanfaat
0 comments:
Post a Comment