Source

ຂໍ້​ຄວາມ

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

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

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

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-nowrapຊັ້ນຮຽນ.

ຂໍ້ຄວາມນີ້ຄວນຈະລົ້ນພໍ່ແມ່.
<div class="text-nowrap" 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.
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>

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

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

ໂຕພິມນ້ອຍ.

ໂຕພິມໃຫຍ່.

ຂໍ້ຄວາມ 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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>