Tutorial Belajar Bootstrap Bagian 6 : Cara Membuat Typhography di Bootstrap

0
1448

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 5 : Cara Membuat Responsive Layout, selanjutnya kita akan belajar cara membuat typhography di Bootstrap.

Dalam tutorial ini Anda akan belajar tentang penataan dan pemformatan konten teks seperti judul, paragraf, blockquote, dll. Dengan Bootstrap.

Bekerja dengan Judul

Anda dapat menentukan judul HTML, <h1> hingga <h6> – Dengan cara yang sama Anda mendefinisikan dalam dokumen HTML.

Anda juga dapat menggunakan class heading .h1 hingga .h6 pada elemen lain, jika Anda ingin menerapkan style pada teks elemen yang sama seperti heading.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widtfh, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Headings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
</div>
</body>
</html>

Menyesuaikan Judul

Selain itu, Anda dapat menggunakan tag <small> dengan class .text-muted untuk menampilkan teks sekunder dari judul apa pun dalam variasi yang lebih kecil dan lebih ringan.

Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Headings with Secondary Text</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h2>
        Fancy display heading
        <small class="text-muted"> Dengan teks sekunder yang pudar</small>
    </h2>
</div>
</body>
</html>

Judul Tampilan

Bootstrap memperkenalkan judul tampilan yang dapat digunakan saat Anda membutuhkan judul agar menonjol.

Judul tampilan ditampilkan dalam ukuran font yang lebih besar tetapi dengan ukuran font yang lebih ringan.

Empat judul tampilan berbeda tersedia.

Berikut ini contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Display Headings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1 class="display-1">Display Heading 1</h1>
    <h1 class="display-2">Display Heading 2</h1>
    <h1 class="display-3">Display Heading 3</h1>
    <h1 class="display-4">Display Heading 4</h1>
</div>
</body>
</html>

Bekerja dengan Paragraf

Ukuran font default global Bootstrap adalah 1rem (biasanya 16px), dengan tinggi baris 1,5.

Ini diterapkan ke <body> dan semua paragraf.

Selain itu, margin bawah setengah tinggi barisnya (10px secara default) diterapkan ke semua paragraf, yaitu <p> elemen.

Anda juga dapat membuat paragraf menonjol dengan menambahkan class .lead di atasnya.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Paragraphs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p> Seperti inilah tampilan paragraf normal di Bootstrap.</p>
    <p class="lead"> Ini adalah bagaimana paragraf menonjol di Bootstrap.</p>
</div>
</body>
</html>
Tip: Dalam rem CSS adalah singkatan dari “root em”. 1rem sama dengan ukuran font dari elemen root (yaitu elemen <html>), yaitu 16px di sebagian besar browser secara default.

Anda dapat dengan mudah meratakan teks ke kiri, kanan, dan tengah di dalam paragraf menggunakan class perataan teks.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Text Alignment</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        width: 600px;
    	margin: 20px;
        padding: 20px;
        border: 1px solid #ccc;
    }
    .bd-highlight{
        background-color: #ffe1ef;
    	border: 1px solid #f75da4;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="text-left"> Teks rata kiri.</p>
	<p class="text-center"> Teks rata tengah.</p>
	<p class="text-right"> Teks rata kanan.</p>
	<p class="text-justify">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in.</p>
	<p class="text-nowrap bd-highlight" style="width: 10rem;"> Tidak ada wrap teks. Teks ini harus melebihi induknya.</p>
</div>
</body>
</html>

Anda juga dapat meratakan teks berdasarkan ukuran layar menggunakan class perataan teks responsif. Class-class ini menggunakan breakpoint lebar viewport yang sama dengan sistem grid.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responsive Text Alignment</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="text-sm-left"> Teks diratakan ke kiri pada viewports yang kecil atau lebih lebar.</p>
    <p class="text-md-left"> Teks diratakan ke kiri pada area pandang sedang atau lebih lebar.</p>
    <p class="text-lg-left"> Teks diratakan ke kiri pada viewport yang besar atau lebih lebar.</p>
    <p class="text-xl-left"> Teks diratakan ke kiri pada viewport ekstra besar atau lebih lebar.</p>
</div>
</body>
</html>

Pemformatan Teks

Anda bebas menggunakan tag pemformatan teks seperti <strong>, <i>, <small> untuk membuat teks Anda tebal, miring, kecil dan seterusnya, dengan cara yang sama seperti yang Anda lakukan di HTML sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Text Formatting</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p><b>Ini adalah teks tebal </b></p>
    <p><code>Ini adalah kode komputer </code></p>
    <p><em>Ini adalah emphasized teks</em></p>
    <p><i>Ini adalah italic teks</i></p>
    <p><mark>Ini adalah teks yang ditandai </mark></p>
    <p><small>Ini adalah teks kecil </small></p>
    <p><strong>Ini adalah strongly emphasized teks</strong></p>
    <p>This is <sub>subscript</sub> dan<sup>superscript</sup></p>
    <p><ins> Teks ini dimasukkan ke dokumen</ins></p>
    <p><del> Teks ini dihapus dari dokumen</del></p>
</div>
</body>
</html>

Transformasi Teks

Anda juga dapat mengubah teks menjadi huruf kecil, huruf besar, atau membuatnya menjadi huruf besar.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Text Transformation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="text-lowercase"> Rubah cokelat cepat melompati anjing malas itu.</p>
    <p class="text-uppercase"> Rubah cokelat cepat melompati anjing malas itu.</p>
    <p class="text-capitalize"> Rubah cokelat cepat melompati anjing malas itu.</p>
</div>
</body>
</html>

Pewarnaan Teks

Warna adalah metode yang ampuh untuk menyampaikan informasi penting dalam desain situs web.

Bootstrap memiliki beberapa class utilitas penekanan yang dapat digunakan untuk tujuan ini seperti menampilkan pesan sukses dalam warna hijau, peringatan atau pesan kesalahan dalam warna merah, dll.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Text Emphasis Classes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="text-primary">Primary: Harap baca instruksi dengan seksama sebelum melanjutkan..</p>
    <p class="text-secondary">Secondary: Fitur ini telah dihapus dari versi terbaru.</p>
    <p class="text-success">Success: Pesan Anda telah berhasil dikirim.</p>
    <p class="text-info">Info: Anda harus setuju dengan syarat dan ketentuan untuk menyelesaikan proses pendaftaran.</p>
    <p class="text-warning">Warning: Ada masalah dengan koneksi jaringan Anda.</p>
    <p class="text-danger">Danger: Terjadi kesalahan saat mengirimkan data Anda.</p>
    <p class="text-muted">Muted: Paragraf teks ini berwarna abu-abu.</p>
</div>
</body>
</html>

Styling Blockquotes

Anda juga dapat memberikan tampilan cantik pada blockquote Anda – Cukup tentukan blockquote menggunakan elemen standar <blockquote> dan selebihnya adalah style sheet bootstrap.

Selain itu, untuk mengidentifikasi sumber, Anda dapat menambahkan elemen <footer> dengan class .blockquote-footer, dan menggabungkan nama pekerjaan sumber di <cite>, seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Blockquotes Styling</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <blockquote class="blockquote">
        <p class="mb-0"> Dunia adalah tempat yang berbahaya untuk hidup; bukan karena orang-orang yang jahat, tetapi karena orang-orang yang tidak melakukan apa-apa.</p>
        <footer class="blockquote-footer">oleh <cite>Albert Einstein</cite></footer>
    </blockquote>
</div>
</body>
</html>

Anda juga dapat meratakan blockquote ke kanan atau tengah hanya dengan menerapkan class perataan teks .text-right atau .text-center pada elemen <blockquote>.

Semoga tutorial ini membantu Anda untuk belajar typhograpy untuk memforat teks menggunakan Bootstrap.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.