ຂໍ້ຄວາມ

ເອກະສານແລະຕົວຢ່າງສໍາລັບການນໍາໃຊ້ຂໍ້ຄວາມທົ່ວໄປເພື່ອຄວບຄຸມການຈັດລໍາດັບ, ການຫໍ່, ນ້ໍາຫນັກ, ແລະອື່ນໆ.

ການຈັດຮຽງຂໍ້ຄວາມ

ການຈັດຮຽງຂໍ້ຄວາມຄືນໃໝ່ໄດ້ຢ່າງງ່າຍດາຍກັບອົງປະກອບດ້ວຍຫ້ອງຮຽນການຈັດຮຽງຂໍ້ຄວາມ.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. ຢູ່ທີ່ nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

ສໍາລັບການຈັດວາງຊ້າຍ, ຂວາ, ແລະກາງ, ຫ້ອງຮຽນຕອບສະຫນອງແມ່ນສາມາດໃຊ້ໄດ້ທີ່ໃຊ້ breakpoints ຄວາມກວ້າງຂອງ viewport ດຽວກັນກັບລະບົບຕາຂ່າຍໄຟຟ້າ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍຢູ່ໃນທຸກຂະຫນາດຂອງຊ່ອງເບິ່ງ.

ວາງຂໍ້ຄວາມຢູ່ກາງໃນທຸກຂະໜາດຂອງຊ່ອງເບິ່ງ.

ຂໍ້ຄວາມຈັດຮຽງຂວາໃສ່ທຸກຂະໜາດຊ່ອງເບິ່ງ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍຢູ່ໃນຊ່ອງເບິ່ງຂະໜາດ SM (ນ້ອຍ) ຫຼືກວ້າງກວ່າ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍຢູ່ໃນຊ່ອງເບິ່ງຂະໜາດ MD (ປານກາງ) ຫຼືກວ້າງກວ່າ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍຢູ່ໃນຊ່ອງເບິ່ງຂະໜາດ LG (ໃຫຍ່) ຫຼືກວ້າງກວ່າ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍຢູ່ໃນຊ່ອງເບິ່ງຂະໜາດ XL (ໃຫຍ່ພິເສດ) ຫຼືກວ້າງກວ່າ.

<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>

ການຫໍ່ຂໍ້ຄວາມແລະ overflow

ຫໍ່ຂໍ້ຄວາມດ້ວຍ .text-wrapຊັ້ນຮຽນ.

ຂໍ້ຄວາມນີ້ຄວນຫໍ່.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

ປ້ອງກັນບໍ່ໃຫ້ຂໍ້ຄວາມຖືກຫໍ່ດ້ວຍ .text-nowrapຊັ້ນຮຽນ.

ຂໍ້ຄວາມນີ້ຄວນຈະລົ້ນພໍ່ແມ່.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

ສໍາລັບເນື້ອຫາທີ່ຍາວກວ່າ, ທ່ານສາມາດເພີ່ມ .text-truncateຊັ້ນຮຽນເພື່ອຕັດຂໍ້ຄວາມດ້ວຍຮູບໄຂ່. ຮຽກຮ້ອງໃຫ້ display: inline-blockຫຼື display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- 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>

ການແຕກແຍກຂອງຄໍາສັບ

ປ້ອງກັນບໍ່ໃຫ້ສາຍຍາວຂອງຂໍ້ຄວາມທໍາລາຍໂຄງຮ່າງອົງປະກອບຂອງທ່ານໂດຍການໃຊ້ .text-breakເພື່ອກໍານົດ word-wrap: break-wordແລະ word-break: break-word. ພວກເຮົາໃຊ້ word-wrapແທນທີ່ຈະເປັນແບບທົ່ວໄປ overflow-wrapສໍາລັບການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບທີ່ກວ້າງກວ່າ, ແລະເພີ່ມການປະຕິເສດ word-break: break-wordເພື່ອຫຼີກເວັ້ນບັນຫາກັບ flex containers.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

ການປ່ຽນຂໍ້ຄວາມ

ປ່ຽນຂໍ້ຄວາມໃນອົງປະກອບທີ່ມີຫ້ອງຮຽນຕົວພິມໃຫຍ່ຂອງຂໍ້ຄວາມ.

ໂຕພິມນ້ອຍ.

ໂຕພິມໃຫຍ່.

ຂໍ້ຄວາມ CapiTaliZed.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

ໃຫ້ສັງເກດວ່າ .text-capitalizeພຽງແຕ່ປ່ຽນຕົວອັກສອນທໍາອິດຂອງແຕ່ລະຄໍາ, ເຊິ່ງເຮັດໃຫ້ກໍລະນີຂອງຕົວອັກສອນອື່ນໆບໍ່ໄດ້ຮັບຜົນກະທົບ.

ນ້ຳໜັກຕົວໜັງສື ແລະໂຕເນີ້ງ

ປ່ຽນນ້ຳໜັກ (ຄວາມກ້າຫານ) ຂອງຂໍ້ຄວາມຢ່າງວ່ອງໄວ ຫຼືເຮັດໃຫ້ຂໍ້ຄວາມຕົວອຽງ.

ຂໍ້ຄວາມໜາ.

ຂໍ້ຄວາມນ້ຳໜັກທີ່ໃຫຍ່ກວ່າ (ກ່ຽວຂ້ອງກັບອົງປະກອບຫຼັກ).

ຂໍ້ຄວາມນ້ໍາຫນັກປົກກະຕິ.

ຂໍ້ຄວາມນ້ຳໜັກເບົາ.

ຂໍ້ຄວາມນ້ຳໜັກເບົາກວ່າ (ກ່ຽວຂ້ອງກັບອົງປະກອບຫຼັກ).

ໂຕເນີ້ງ.

<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

ປ່ຽນການເລືອກເປັນ stack font monospace ຂອງພວກເຮົາດ້ວຍ .text-monospace.

ນີ້ແມ່ນຢູ່ໃນ monospace

<p class="text-monospace">This is in monospace</p>

ຣີເຊັດສີ

ຣີເຊັດຂໍ້ຄວາມ ຫຼືສີຂອງລິ້ງດ້ວຍ .text-reset, ເພື່ອໃຫ້ມັນສືບທອດສີຈາກພໍ່ແມ່ຂອງມັນ.

ຂໍ້ຄວາມທີ່ຖືກປິດສຽງດ້ວຍ ລິ້ງຣີເຊັດ .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

ການຕົບແຕ່ງຂໍ້ຄວາມ

ເອົາການຕົກແຕ່ງຂໍ້ຄວາມດ້ວຍ .text-decoration-noneຊັ້ນຮຽນ.

ການເຊື່ອມຕໍ່ທີ່ບໍ່ມີຂີດກ້ອງ

<a href="#" class="text-decoration-none">Non-underlined link</a>

ຂໍ້​ຄວາມ