Teks
Dokumentasi dan contoh untuk utiliti teks biasa untuk mengawal penjajaran, pembalut, berat dan banyak lagi.
Penjajaran teks
Selaraskan semula teks dengan mudah kepada komponen dengan kelas penjajaran teks.
Beberapa teks pemegang tempat untuk menunjukkan penjajaran teks yang wajar. Adakah anda akan melakukan perkara yang sama untuk saya? Sudah tiba masanya untuk menghadapi muzik saya bukan lagi muse anda. Dengarnya cantik, jadilah hakim dan anak perempuan saya akan mengundi. Saya dapat merasakan burung phoenix dalam diri saya. Syurga cemburu dengan cinta kita, malaikat menangis dari atas. Ya, awak bawa saya ke utopia.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>Untuk penjajaran kiri, kanan dan tengah, kelas responsif tersedia yang menggunakan titik putus lebar port pandang yang sama seperti sistem grid.
Teks dijajar ke kiri pada semua saiz port pandangan.
Teks yang dijajarkan ke tengah pada semua saiz port pandangan.
Teks dijajar ke kanan pada semua saiz viewport.
Teks dijajar ke kiri pada viewport bersaiz SM (kecil) atau lebih luas.
Teks dijajar ke kiri pada viewport bersaiz MD (sederhana) atau lebih luas.
Teks dijajar ke kiri pada port pandangan bersaiz LG (besar) atau lebih luas.
Teks dijajar ke kiri pada viewport bersaiz XL (lebih besar) atau lebih luas.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Pembalut dan limpahan teks
Balut teks dengan .text-wrapkelas.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Elakkan teks daripada dibalut dengan .text-nowrapkelas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Untuk kandungan yang lebih panjang, anda boleh menambah .text-truncatekelas untuk memotong teks dengan elipsis. Memerlukan display: inline-blockatau display: block.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Pecah kata
Elakkan rentetan teks yang panjang daripada memecahkan reka letak komponen anda dengan menggunakan .text-breakuntuk menetapkan word-wrap: break-worddan word-break: break-word. Kami menggunakan word-wrapbukannya yang lebih biasa overflow-wrapuntuk sokongan penyemak imbas yang lebih luas dan menambah yang tidak digunakan word-break: break-worduntuk mengelakkan isu dengan bekas fleksibel.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Transformasi teks
Ubah teks dalam komponen dengan kelas huruf besar teks.
Teks berhuruf kecil.
Teks huruf besar.
Teks CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Perhatikan bagaimana .text-capitalizehanya menukar huruf pertama setiap perkataan, meninggalkan kes mana-mana huruf lain tidak terjejas.
Berat fon dan huruf condong
Tukar berat (keberanian) teks dengan cepat atau condongkan teks.
Teks tebal.
Teks berat yang lebih tebal (berbanding dengan elemen induk).
Teks berat biasa.
Teks ringan.
Teks yang lebih ringan (berbanding dengan elemen induk).
Teks miring.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>Monospace
Tukar pilihan kepada timbunan fon monospace kami dengan .text-monospace.
Ini dalam monospace
<p class="text-monospace">This is in monospace</p>Tetapkan semula warna
Tetapkan semula teks atau warna pautan dengan .text-reset, supaya ia mewarisi warna daripada induknya.
Teks diredamkan dengan pautan tetapan semula .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Hiasan teks
Alih keluar hiasan teks dengan .text-decoration-nonekelas.
<a href="#" class="text-decoration-none">Non-underlined link</a>