Rumah >hujung hadapan web >Tutorial Bootstrap >Bagaimana saya menggunakan kelas tipografi Bootstrap untuk teks gaya?
Bootstrap menyediakan pelbagai kelas tipografi untuk teks gaya, menjadikannya mudah untuk meningkatkan daya tarikan visual dan kebolehbacaan kandungan anda. Inilah cara menggunakannya dengan berkesan:
Tajuk : Bootstrap menawarkan kelas untuk tajuk dari h1
hingga h6
. Untuk menggunakannya, anda hanya boleh menggunakan tag yang sesuai, atau menggunakan kelas .h1
hingga .h6
untuk menggayakan mana -mana elemen teks untuk kelihatan seperti tajuk.
<code class="html"><h1>Heading 1</h1> <p class="h2">Styled as Heading 2</p></code>
Tajuk paparan : Untuk tajuk yang lebih besar dan berani, gunakan .display-1
ke kelas .display-6
.
<code class="html"><h1 class="display-1">Display Heading 1</h1></code>
Teks utama : Untuk membuat perenggan menonjol, gunakan .lead
.
<code class="html"><p class="lead">This is lead text.</p></code>
Elemen teks dalam talian : Gunakan kelas seperti .text-muted
, .text-primary
, .text-success
, dan lain-lain untuk menukar warna teks dalam talian.
<code class="html"><p class="text-muted">This text is muted.</p></code>
.text-decoration-underline
, .text-decoration-line-through
, dan penjajaran kelas seperti .text-start
, .text-center
, .text-end
. Fon Weight and Italics : Anda boleh menggunakan .fw-bold
, .fw-normal
, .fst-italic
untuk menukar berat dan gaya fon.
<code class="html"><p class="fw-bold">Bold text</p> <p class="fst-italic">Italic text</p></code>
Menggunakan kelas ini, anda boleh dengan cepat gaya elemen teks untuk memenuhi keperluan reka bentuk anda tanpa menulis CSS tersuai.
Bootstrap menyediakan beberapa kelas untuk menyesuaikan saiz fon dan berat:
Saiz fon : Bootstrap menggunakan skala dari .fs-1
hingga .fs-6
untuk saiz fon, dengan fs-1
menjadi yang terbesar dan fs-6
yang terkecil dalam skala yang telah ditetapkan.
<code class="html"><p class="fs-1">Large Text</p> <p class="fs-6">Small Text</p></code>
Berat fon : Untuk berat font, bootstrap mempunyai kelas dari .fw-lighter
hingga .fw-bolder
, termasuk .fw-normal
, .fw-bold
, dan .fw-semibold
.
<code class="html"><p class="fw-lighter">Lighter Text</p> <p class="fw-bold">Bold Text</p></code>
Menggunakan kelas ini, anda boleh menyempurnakan penampilan teks untuk memenuhi keperluan reka bentuk anda dengan mudah.
Kelas penjajaran teks Bootstrap membolehkan anda mengawal penjajaran teks anda merentasi saiz skrin yang berbeza dengan berkesan. Inilah cara anda boleh menggunakannya:
Penjajaran asas : Gunakan .text-start
, .text-center
, dan .text-end
untuk menyelaraskan teks ke kiri, pusat, dan kanan, masing-masing.
<code class="html"><p class="text-start">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">Right aligned text on all viewport sizes.</p></code>
Penjajaran responsif : Bootstrap menyediakan kelas responsif yang membolehkan anda menukar penjajaran berdasarkan saiz viewport:
.text-sm-start
, .text-md-start
, .text-lg-start
, .text-xl-start
, dan .text-xxl-start
untuk penjajaran kiri..text-sm-center
, .text-md-center
, .text-lg-center
, .text-xl-center
, dan .text-xxl-center
untuk penjajaran pusat..text-sm-end
, .text-md-end
, .text-lg-end
, .text-xl-end
, dan .text-xxl-end
untuk penjajaran yang betul.Contohnya:
<code class="html"><p class="text-sm-start text-md-center text-lg-end"> This text will be left-aligned on small devices, center-aligned on medium devices, and right-aligned on large devices. </p></code>
Menggunakan kelas ini, anda boleh memastikan teks anda diselaraskan dengan betul di semua peranti dan saiz skrin.
Untuk membuat gaya teks responsif menggunakan bootstrap, anda boleh menggunakan kelas yang menyesuaikan diri dengan saiz skrin yang berbeza. Berikut adalah beberapa kelas utama:
.fs-1
hingga .fs-6
bekerja di semua saiz skrin, tetapi untuk lebih banyak kawalan berbutir, anda boleh menggunakan pertanyaan media CSS tersuai..display-1
ke .display-6
skala yang sesuai di seluruh saiz skrin yang berbeza secara lalai..text-sm-start
, .text-md-center
) untuk menyesuaikan penjajaran teks berdasarkan saiz viewport..text-wrap
atau .text-nowrap
untuk mengawal pembungkus teks, dan .text-truncate
untuk memotong teks dan menunjukkan ellipsis..text-decoration-underline
dan kelas warna seperti .text-primary
.Inilah contoh yang menggabungkan unsur -unsur ini:
<code class="html"><p class="fs-3 text-sm-start text-md-center text-lg-end text-primary"> This text uses responsive font size, alignment, and color. </p></code>
Dengan memanfaatkan kelas -kelas ini, anda dapat memastikan teks anda boleh dibaca dan menarik secara visual pada pelbagai peranti dan saiz skrin.
Atas ialah kandungan terperinci Bagaimana saya menggunakan kelas tipografi Bootstrap untuk teks gaya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!