Bagaimana cara menggunakan bobot font di bootstrap?

Question

Untuk pengalaman menonton terbaik, klik tombol Edit pada CodePen di pojok kanan atas Pena untuk membukanya di tab baru

Ringkasan

Anda dapat menambahkan kelas ke elemen Anda yang mengubah tampilan teks Anda. Lihat demo untuk melihat contoh semua kelas

Detail

Menuju kelas

Di Bootstrap 4 dan 5, Anda dapat menggunakan kelas h1, h2, h3, h4, h5, dan h6 untuk membuat elemen apa pun terlihat seperti heading

Menampilkan

Di Boostrap 4 dan 5 Anda dapat menggunakan kelas display-1, display-2, display-3, dan display-4. Di Bootstrap 5, Anda juga memiliki kelas h20 dan h21

Memimpin

Di Bootstrap 4 dan 5 Anda dapat menggunakan kelas h22 untuk menonjolkan elemen paragraf

Penyelarasan

Di Bootstrap 4, Anda dapat menggunakan kelas h23, h24, dan h25 untuk menyelaraskan teks

Di v5, Anda dapat menggunakan kelas h26, h24, dan h28

Transformasi teks

Di v4 dan v5, Anda dapat menggunakan kelas h29, h30, h31 untuk mengubah teks

Ukuran huruf

Di v5, Anda dapat menggunakan kelas h3_2, h33, h34, h35, h36, dan h37 untuk mengubah ukuran font suatu elemen. Kelas-kelas ini hanya mengubah ukuran font, sedangkan kelas heading di atas mengubah properti font-size, font-weight, dan line-height

Tinggi garis

Di v5, Anda dapat menggunakan kelas h3_8, h39, h40, dan h41 untuk mengubah tinggi garis dalam elemen

Berat dan gaya font

Di v4, Anda dapat menggunakan kelas h4_2, h43, h44, h45, dan h46 untuk mengontrol bobot font. Anda dapat menggunakan kelas h4_7 untuk mengubah gaya font

Di v5, Anda dapat menggunakan h4_8, h49, h50, h51, dan h52 untuk mengubah bobot font. Anda dapat menggunakan kelas h53 dan h54 untuk mengubah gaya font

Dekorasi teks

Di v4, Anda dapat menggunakan kelas h55 untuk menghapus garis bawah dari suatu elemen

Di v5, Anda dapat menggunakan kelas h5_6, h57, dan h55 untuk mengubah dekorasi teks

Latihan

Coba buat ulang beberapa kode HTML dari bagian Demo di index. html. Anda tidak perlu membuat ulang semua kode

Tutorial ini menjelaskan semua tentang Tipografi Bootstrap 4 termasuk warna, font, judul, perataan teks, warna latar belakang, dll

Dalam tutorial ini, kita telah membahas heading, display heading, lead, inline text element, text alignment, text wrapping, text truncate, word break, text-transform, font-weight, italics, monospace, reset color, text-decoration, colors . Tipografi

Kami juga menyertakan daftar pertanyaan Tipografi yang paling sering diajukan

=> Baca Seri Pelatihan Bootstrap Mudah

Apa yang Akan Anda Pelajari

Bootstrap 4 Tipografi

Harap perhatikan bahwa kami telah menggunakan Bootstrap versi 4 di semua contoh

Note: Use the following code skeleton to run the below example codes.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<!-- add code here -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Judul

Bootstrap adds styles to all HTML headings (from

to

) by adding bigger Bootstrap font sizes and bolder font-weight.

Contoh Judul

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode judul

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_

Keluaran browser dari Tajuk

Tabel di bawah ini menunjukkan perbandingan antara heading HTML dengan dan tanpa Bootstrap

Apakah Anda melihat perbedaannya?

Tajuk Tampilan

Bootstrap membuat tajuk tampilan lebih menonjol dari tajuk normal dengan menambahkan ukuran font Bootstrap yang lebih besar dan bobot font yang lebih ringan ke tajuk

Ini menyediakan empat kelas berikut untuk judul tampilan

tampilan-1. kelas. Kelas ini digunakan untuk menampilkan 1 judul
kelas tampilan-2. Kelas ini digunakan untuk menampilkan 2 judul
kelas tampilan-3. Kelas ini digunakan untuk menampilkan 3 judul
kelas tampilan-4. Kelas ini digunakan untuk menampilkan 4 judul

Contoh Judul Tampilan

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Judul Tampilan

<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>

Keluaran browser dari Tajuk Tampilan

Anda dapat membandingkan output dari Bootstrap headings dan contoh Display headings dan melihat perbedaannya

Memimpin

Bootstrap menggunakan. memimpin kelas untuk membuat paragraf menonjol

Contoh Timbal

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Lead

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel enim iaculis,
 pretium augue non, consectetur tellus. Aenean efficitur enim interdum elit aliquet rhoncus. Ut ut nisl
 sit amet leo.</p>

Keluaran prospek dari browser

Elemen Teks Sebaris

Bootstrap memungkinkan Anda menambahkan gaya ke elemen HTML 5 inline umum

Ini menggunakan tag berikut untuk elemen teks sebaris

tag: This tag is used to indicate highlighted text.
tag: This tag is used to indicate deleted text.
tag: This tag is used to indicate the text that is no longer accurate.
tag: This tag is used to indicate text that is treated as an addition to the document.
tag: This tag is used to indicate underlined text.
tag: This tag is used to indicate text that is treated as fine print text.
tag: This tag is used to indicate bold text.
tag: This tag is used to indicate italicized text.

Contoh Elemen Teks Sebaris

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Elemen Teks Sebaris

<p><mark>This is highlighted text.</mark></p>

<p><del>This text is treated as deleted text.</del></p>

<p><s>This text is treated as no longer accurate.</s></p>

<p><ins>This text is treated as an addition to the document.</ins></p>

<p><u>This is underlined text.</u></p>

<p><small>This text is treated as fine print text.</small></p>

<p><strong>This is bold text.</strong></p>

<p><em>This is italicized text.</em></p>

_

Keluaran browser dari Elemen Teks Sebaris

Perataan Teks

Bootstrap menyediakan empat kelas berikut untuk Bootstrap center text, left text, right text, dan justify text

kelas teks-kiri. Kelas ini digunakan untuk mengubah teks menjadi Bootstrap teks rata kiri
kelas pusat teks. Kelas ini digunakan untuk mengonversi teks menjadi teks Bootstrap align center
kelas teks-kanan. Kelas ini digunakan untuk mengubah teks menjadi Bootstrap menyelaraskan teks kanan
kelas pembenaran teks. Kelas ini digunakan untuk mengubah teks menjadi Bootstrap menyelaraskan teks

Contoh Perataan Teks

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Perataan Teks

<p class="text-left">This is left aligned text.</p>

<p class="text-center">This is center aligned text.</p>

<p class="text-right">This is right aligned text.</p>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel enim
 iaculis, pretium augue non, consectetur tellus. Aenean efficitur enim interdum elit aliquet rhoncus. Ut
 ut nisl sit amet leo.</p>

Keluaran Browser dari Perataan Teks

Selanjutnya Anda dapat menggunakan. teks-sm-*,. teks-md-*,. teks-lg-* dan. text-xl-* untuk menyelaraskan teks pada viewports berukuran SM (kecil) atau lebih lebar, viewports berukuran MD (sedang) atau lebih lebar, viewports berukuran LG (besar) atau lebih lebar dan viewports berukuran XL (ekstra besar) atau lebih lebar

Pembungkusan Teks

Bootstrap menggunakan kelas. text-wrap untuk membungkus teks dan kelas. text-nowrap untuk melimpahkan induknya

Contoh Pembungkusan Teks

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Text Wrapping

<div class="text-wrap bg-info"style="width: 6rem;">This text should wrap.</div><br>
<div class="text-nowrap bg-info" style="width: 6rem;">This text should overflow the parent.</div>

_

Keluaran browser dari Pembungkusan Teks

Potong Teks

Bootstrap menggunakan. kelas text-truncate untuk memotong teks dengan elipsis

Contoh Teks Terpotong

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Text Truncate

<div class="row">
<div class="col-2 text-truncate">This is an example for text truncate.</div>
</div>

Output browser dari Text Truncate

Istirahat Kata

Bootstrap menggunakan. kelas text-break untuk menghindari kerusakan tata letak komponen karena string teks yang panjang

Contoh Kata Istirahat

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Word Break

<p class="text-break">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

_

Output browser dari Word Break

Transformasi Teks

Bootstrap menyediakan tiga kelas berikut untuk transformasi teks

kelas teks-huruf besar. Kelas ini digunakan untuk mengubah teks menjadi teks huruf besar
kelas teks-huruf kecil. Kelas ini digunakan untuk mengubah teks menjadi teks huruf kecil
kelas kapitalisasi teks. Kelas ini digunakan untuk mengubah teks menjadi teks dengan huruf kapital (huruf besar pertama dari setiap kata)

Contoh Transformasi Teks

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Text Transform

<p class="text-uppercase">this is uppercased text.</p>

<p class="text-lowercase">this is lowercased text.</p>

<p class="text-capitalize">this is capitalized text.</p>

_

Output browser Transformasi Teks

Berat Font

Bootstrap menggunakan kelas-kelas berikut untuk mengubah bobot font

Ini menyediakan kelas-kelas berikut untuk bobot font Bootstrap

kelas font-berat-tebal. Kelas ini digunakan untuk mengubah teks menjadi teks tebal
kelas font-weight-bolder. Kelas ini digunakan untuk mengubah teks menjadi teks yang lebih tebal
kelas font-berat-normal. Kelas ini digunakan untuk mengubah teks menjadi teks berbobot normal
kelas font-berat-ringan. Kelas ini digunakan untuk mengonversi teks menjadi teks ringan
kelas font-weight-lighter. Kelas ini digunakan untuk mengubah teks menjadi teks yang lebih ringan (relatif terhadap elemen induk).

Contoh Bobot Font

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Font Weight

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_0

Keluaran browser dari Bobot Font

Huruf miring

Bootstrap menggunakan. kelas font-italic untuk mengubah teks menjadi teks miring

Contoh Italic

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode miring

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_1

Keluaran browser dari Miring

Monoruang

Bootstrap menggunakan. kelas text-monospace untuk mengubah teks menjadi font monospace

Contoh Monospace

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Monospace

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_2

Keluaran browser dari Monospace

Atur Ulang Warna

Bootstrap menggunakan. kelas text-muted untuk mengatur ulang warna

Contoh Reset warna

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh Kode Reset Warna

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_3

Keluaran browser dari Atur Ulang Warna

Dekorasi Teks

Bootstrap menggunakan. text-decoration-none untuk menghapus dekorasi teks

Contoh Dekorasi Teks

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode dekorasi Teks

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_4

Output browser Dekorasi Teks

Warna Bootstrap

Warna Teks

Kelas utilitas bootstrap membantu menambahkan warna pada teks. Ini menyediakan kelas berikut untuk warna teks

kelas teks-primer. Kelas ini digunakan untuk menunjukkan warna teks utama
kelas menengah teks. Kelas ini digunakan untuk menunjukkan warna teks sekunder
kelas kesuksesan teks. Kelas ini digunakan untuk menunjukkan warna teks yang berhasil
kelas teks-bahaya. Kelas ini digunakan untuk menunjukkan warna teks bahaya
kelas peringatan teks. Kelas ini digunakan untuk menunjukkan warna teks peringatan
kelas info teks. Kelas ini digunakan untuk menunjukkan warna teks info
kelas teks-ringan. Kelas ini digunakan untuk menunjukkan warna teks terang
kelas teks-gelap. Kelas ini digunakan untuk menunjukkan warna teks yang gelap
kelas badan teks. Kelas ini digunakan untuk menunjukkan warna teks tubuh
kelas tanpa teks. Kelas ini digunakan untuk menunjukkan warna teks yang dibisukan
kelas teks-putih. Kelas ini digunakan untuk menunjukkan warna teks putih
kelas teks-hitam. Kelas ini digunakan untuk menunjukkan warna teks hitam

Contoh Warna Teks

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Warna Teks

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_5

Keluaran browser dari Warna Teks

Warna Latar Belakang

Kelas utilitas bootstrap membantu menambahkan warna ke latar belakang

Ini menyediakan kelas berikut untuk warna latar belakang

kelas bg-primer. Kelas ini digunakan untuk menunjukkan warna latar belakang utama
bg-kelas menengah. Kelas ini digunakan untuk menunjukkan warna latar sekunder
kelas bg-sukses. Kelas ini digunakan untuk menunjukkan warna latar belakang yang sukses
kelas bg-bahaya. Kelas ini digunakan untuk menunjukkan warna latar bahaya
kelas bg-peringatan. Kelas ini digunakan untuk menunjukkan warna latar belakang peringatan
kelas bg-info. Kelas ini digunakan untuk menunjukkan warna background info
kelas bg-ringan. Kelas ini digunakan untuk menunjukkan warna latar belakang terang
kelas bg-gelap. Kelas ini digunakan untuk menunjukkan warna latar belakang gelap
kelas bg-putih. Kelas ini digunakan untuk menunjukkan warna latar belakang putih
kelas bg-transparan. Kelas ini digunakan untuk menunjukkan warna latar transparan

Contoh Warna Latar Belakang

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Warna Latar Belakang

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_6

Keluaran browser dari Warna Latar Belakang

Gradien Latar Belakang

Kelas utilitas Bootstrap menyediakan cara untuk menambahkan gradien warna yang berbeda ke latar belakang. Anda perlu menyetel variabel $enable-gradients ke true (default adalah false) untuk mengaktifkan gradien latar belakang

Daftar berikut menunjukkan kelas yang tersedia untuk Gradien Latar Belakang

kelas bg-gradien-primer. Kelas ini digunakan untuk menunjukkan gradien latar belakang utama
bg-gradien-kelas menengah. Kelas ini digunakan untuk menunjukkan gradien latar belakang sekunder
kelas bg-gradien-sukses. Kelas ini digunakan untuk menunjukkan gradien latar belakang yang sukses
kelas bg-gradien-bahaya. Kelas ini digunakan untuk menunjukkan gradien latar belakang bahaya
kelas bg-gradien-peringatan. Kelas ini digunakan untuk menunjukkan gradien latar belakang peringatan
kelas bg-gradien-info. Kelas ini digunakan untuk menunjukkan gradien latar belakang info
kelas bg-gradien-ringan. Kelas ini digunakan untuk menunjukkan gradien latar belakang cahaya
kelas bg-gradien-gelap. Kelas ini digunakan untuk menunjukkan gradien latar belakang gelap

Singkatan

Bootstrap allows you to style element. The expanded version will be shown on hover.

Contoh Singkatan

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh Kode Singkatan

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_7

Output browser dari Singkatan

Blockquotes

You can add the .blockquote class into a

tag when the quoting content blocks from other resources.

Contoh Blockquote

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Blockquotes

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_8

Output browser dari Blockquotes

Ukuran Font Responsif

Bootstrap versi 4. 3. 0 menyediakan fasilitas untuk mengaktifkan ukuran font responsif. Tetapkan variabel Sass $enable-responsive-font-sizes ke true dan kompilasi ulang Bootstrap untuk mengaktifkan ukuran font responsif

Anda dapat mengunjungi tautan ini untuk mendapatkan detail lebih lanjut tentang ukuran font responsif Bootstrap

Kode

Kode sebaris

Bootstrap uses the tag to wrap inline code segments.

Catatan. Kurung sudut tidak boleh digunakan.

Contoh Kode Sebaris

Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini

Contoh kode Kode Inline

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6 </h6>

_9Output browser dari Kode Inline
Blok Kode
Bootstrap uses the 
 tags for multiple code lines. You may use the .pre-scrollable class to set max-height: 340px and insert a scrollbar (Y-axis).
Catatan.  Kurung sudut tidak boleh digunakan. 
Contoh Blok Kode
Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini
Contoh kode Code Block
<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>
0Output browser dari Blok Kode



Variabel
Bootstrap uses the  tag to indicate variables.
Contoh Variabel
Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini
Contoh Kode Variabel
<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>
1Keluaran Browser dari Variabel
Masukan Pengguna
Bootstrap uses the  tag to indicate keyboard input entered by the user.
Contoh Masukan Pengguna
Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini
Contoh kode Input Pengguna
<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>
2Output browser dari Input Pengguna
Keluaran Sampel
Bootstrap uses the  tag to indicate a sample output that belongs to a computer program.
Contoh Keluaran Sampel
Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini
Contoh kode Output Sampel
<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>
_3Output browser dari Output Sampel
Pemilihan Teks
Pemilihan teks bootstrap mengubah cara konten dipilih saat pengguna berinteraksi dengan konten
Ini menyediakan tiga kelas berikut untuk pemilihan teks
pengguna-pilih-semua. Kelas ini digunakan untuk sepenuhnya memilih teks saat diklik oleh pengguna
pengguna-pilih-otomatis. Kelas ini digunakan untuk menunjukkan perilaku pemilihan default
pengguna-pilih-tidak ada. Kelas ini digunakan untuk menonaktifkan pemilihan teks saat diklik oleh pengguna
Contoh Pemilihan Teks
Anda dapat mencoba contoh ini dengan menjalankan cuplikan kode di bawah ini
Contoh kode Pemilihan Teks
<h1 class="display-1">This is Display 1</h1>

<h1 class="display-2">This is Display 2</h1>

<h1 class="display-3">This is Display 3</h1>

<h1 class="display-4">This is Display 4</h1>
_4Keluaran browser dari Pemilihan Teks
Pertanyaan yang Sering Diajukan
Pada bagian ini, kita akan melihat beberapa pertanyaan umum tipografi Bootstrap
T #1) Apakah Bootstrap menambahkan gaya ke judul HTML 5
Menjawab. Ya, itu menambahkan gaya ke semua judul HTML 5
T #2) Apa perbedaan antara judul Bootstrap dan judul Tampilan?
Menjawab. Judul tampilan Bootstrap lebih menonjol daripada judul Bootstrap normal. Judul tampilan Bootstrap memiliki ukuran font yang lebih besar dan bobot font yang lebih ringan jika dibandingkan dengan judul Bootstrap normal
T #3) Kelas apa yang digunakan untuk judul tampilan?
Menjawab. Ini mendukung empat judul dan penggunaan tampilan. kelas tampilan-1,. kelas tampilan-2,. kelas tampilan-3 dan. kelas tampilan-4
T #4) Apa tujuan penggunaan timbal?
Menjawab. Ini digunakan untuk menonjolkan paragraf
T #5) Bagaimana Anda bisa mengonversi kata dengan huruf kecil menjadi kata dengan huruf besar?
Menjawab. Anda dapat menggunakan. kelas teks-huruf besar untuk mengubah teks menjadi huruf besar
T #6) Apakah Bootstrap mendukung ukuran font responsif?
Menjawab. Ya, ini mendukung ukuran font yang responsif
Kesimpulan
Bootstrap menyediakan beberapa kelas untuk menata teks dengan berbagai cara. Utilitas warna bootstrap membantu menambahkan berbagai macam warna ke teks. Lebih lanjut, ini mendukung ukuran font yang responsif
 
Bagaimana Anda menggunakan bobot font?
Perhatikan bahwa saat menggunakan bobot relatif, hanya empat bobot font yang dipertimbangkan — tipis (100), normal (400), tebal (700), dan tebal (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.
Bagaimana cara mengubah ukuran font di Bootstrap?
Kelas ukuran Font Teks.  . 
 fs-1. Kelas ini digunakan untuk mengatur ukuran teks sama dengan tag h1
 fs-2. Kelas ini digunakan untuk mengatur ukuran teks sama dengan tag h2
 fs-3. Kelas ini digunakan untuk mengatur ukuran teks sama dengan tag h3
 fs-4. Kelas ini digunakan untuk mengatur ukuran teks sama dengan tag h4
 
Bagaimana cara membuat label tebal di Bootstrap?
Anda dapat meletakkan kelas "font-weight-bold" untuk label di sebelah kiri menjadi tebal dan "font-weight- . 
Bagaimana cara menebalkan teks di Bootstrap 3?
fw-bold class untuk membuat teks tebal. Dalam kode di atas, kami telah menggunakan. kelas fw-bold ke teks tebal. Periksa output dari contoh kode di atas.

kode bootstrap

Bagaimana cara menggunakan bobot font di bootstrap?

Ringkasan

Detail

Menuju kelas

Menampilkan

Memimpin

Penyelarasan

Transformasi teks

Ukuran huruf

Tinggi garis

Berat dan gaya font

Dekorasi teks

Latihan

Bootstrap 4 Tipografi

Judul

to

Tajuk Tampilan

Memimpin

Elemen Teks Sebaris

Perataan Teks

Pembungkusan Teks

Potong Teks

Istirahat Kata

Transformasi Teks

Berat Font

Huruf miring

Monoruang

Atur Ulang Warna

Dekorasi Teks

Warna Bootstrap

Warna Teks

Warna Latar Belakang

Gradien Latar Belakang

Singkatan

Blockquotes

Ukuran Font Responsif

Kode

Kode sebaris

Blok Kode

Variabel

Masukan Pengguna

Keluaran Sampel

Pemilihan Teks

Pertanyaan yang Sering Diajukan

Kesimpulan

Bagaimana Anda menggunakan bobot font?

Bagaimana cara mengubah ukuran font di Bootstrap?

Bagaimana cara membuat label tebal di Bootstrap?

Bagaimana cara menebalkan teks di Bootstrap 3?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social