in English

ຕົວພິມ

ເອກະສານແລະຕົວຢ່າງສໍາລັບການພິມ Bootstrap, ລວມທັງການຕັ້ງຄ່າທົ່ວໂລກ, ຫົວຂໍ້, ຂໍ້ຄວາມ, ລາຍຊື່, ແລະອື່ນໆ.

ການຕັ້ງຄ່າທົ່ວໂລກ

Bootstrap ກໍານົດພື້ນຖານການສະແດງທົ່ວໂລກ, typography, ແລະຮູບແບບການເຊື່ອມຕໍ່. ເມື່ອຕ້ອງການການຄວບຄຸມຫຼາຍຂຶ້ນ, ໃຫ້ກວດເບິ່ງ ຫ້ອງຮຽນທີ່ເປັນປະໂຫຍດ ຂອງຂໍ້ຄວາມ .

  • ໃຊ້ຊຸດ ຟອນພື້ນເມືອງ ທີ່ເລືອກທີ່ດີທີ່ສຸດ font-familyສໍາລັບແຕ່ລະ OS ແລະອຸປະກອນ.
  • ສໍາລັບຂະຫນາດປະເພດທີ່ລວມແລະສາມາດເຂົ້າເຖິງໄດ້, ພວກເຮົາໃຊ້ຮາກເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ font-size(ໂດຍປົກກະຕິ 16px) ເພື່ອໃຫ້ຜູ້ເຂົ້າຊົມສາມາດປັບແຕ່ງຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບຕາມຄວາມຕ້ອງການ.
  • ໃຊ້ $font-family-base, $font-size-base, ແລະ $line-height-baseຄຸນລັກສະນະເປັນພື້ນຖານການພິມຂອງພວກເຮົານໍາໃຊ້ກັບ <body>.
  • ກໍານົດສີເຊື່ອມຕໍ່ທົ່ວໂລກຜ່ານ $link-colorແລະນໍາໃຊ້ການເຊື່ອມຕໍ່ underlines ພຽງແຕ່ໃນ :hover.
  • ໃຊ້ $body-bgເພື່ອຕັ້ງຄ່າ background-colorໃນ <body>( #fffຕາມຄ່າເລີ່ມຕົ້ນ).

ຮູບແບບເຫຼົ່ານີ້ສາມາດພົບໄດ້ພາຍໃນ _reboot.scss, ແລະຕົວແປທົ່ວໂລກຖືກກໍານົດໄວ້ໃນ _variables.scss. ໃຫ້ແນ່ໃຈວ່າຕັ້ງ $font-size-baseຢູ່ໃນ rem.

ຫົວຂໍ້

ຫົວຂໍ້ HTML ທັງຫມົດ, <h1>ຜ່ານ <h6>, ແມ່ນມີຢູ່.

ຫົວ​ຂໍ້ ຕົວຢ່າງ
<h1></h1> h1. ຫົວຂໍ້ Bootstrap
<h2></h2> h2. ຫົວຂໍ້ Bootstrap
<h3></h3> h3. ຫົວຂໍ້ Bootstrap
<h4></h4> h4. ຫົວຂໍ້ Bootstrap
<h5></h5> h5. ຫົວຂໍ້ Bootstrap
<h6></h6> h6. ຫົວຂໍ້ Bootstrap 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1ໂດຍຜ່ານ .h6ຫ້ອງຮຽນຍັງມີຢູ່, ສໍາລັບເວລາທີ່ທ່ານຕ້ອງການກົງກັບຮູບແບບຕົວອັກສອນຂອງຫົວຂໍ້ແຕ່ບໍ່ສາມາດໃຊ້ອົງປະກອບ HTML ທີ່ກ່ຽວຂ້ອງ.

h1. ຫົວຂໍ້ Bootstrap

h2. ຫົວຂໍ້ Bootstrap

h3. ຫົວຂໍ້ Bootstrap

h4. ຫົວຂໍ້ Bootstrap

h5. ຫົວຂໍ້ Bootstrap

h6. ຫົວຂໍ້ Bootstrap

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

ປັບແຕ່ງຫົວຂໍ້

ໃຊ້ຫ້ອງຮຽນຜົນປະໂຫຍດລວມເພື່ອສ້າງຂໍ້ຄວາມຫົວຂໍ້ຍ່ອຍຍ່ອຍຈາກ Bootstrap 3.

ຫົວຂໍ້ສະແດງແບບແຟນຊີ ພ້ອມຂໍ້ຄວາມສຳຮອງທີ່ຈືດໆ 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

ສະແດງຫົວຂໍ້

ອົງປະກອບຫົວຂໍ້ແບບດັ້ງເດີມຖືກອອກແບບມາເພື່ອເຮັດວຽກທີ່ດີທີ່ສຸດໃນເນື້ອໃນຂອງຫນ້າຂອງທ່ານ. ເມື່ອທ່ານຕ້ອງການຫົວຂໍ້ທີ່ໂດດເດັ່ນ, ພິຈາລະນາໃຊ້ ຫົວຂໍ້ສະແດງຜົນ - ແບບຫົວຂໍ້ທີ່ ໃຫຍ່ກວ່າ, ມີຄວາມຄິດເຫັນຫຼາຍເລັກນ້ອຍ. ຈື່ໄວ້ວ່າຫົວຂໍ້ເຫຼົ່ານີ້ບໍ່ຕອບສະໜອງຕາມຄ່າເລີ່ມຕົ້ນ, ແຕ່ມັນເປັນໄປໄດ້ທີ່ຈະເປີດໃຊ້ ຂະໜາດຕົວອັກສອນທີ່ຕອບສະໜອງ ໄດ້.

ຈໍສະແດງຜົນ 1
ຈໍສະແດງຜົນ 2
ຈໍສະແດງຜົນ 3
ຈໍສະແດງຜົນ 4 
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

ນຳ

ເຮັດໃຫ້ວັກໂດດເດັ່ນໂດຍການເພີ່ມ .lead.

ນີ້​ແມ່ນ​ວັກ​ນໍາ​ພາ​. ມັນໂດດເດັ່ນຈາກວັກປົກກະຕິ.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

ອົງປະກອບຂໍ້ຄວາມໃນແຖວ

ການຈັດຮູບແບບສຳລັບອົງປະກອບ HTML5 ໃນແຖວທົ່ວໄປ.

ທ່ານສາມາດນໍາໃຊ້ແທັກເຄື່ອງຫມາຍເພື່ອຈຸດເດັ່ນຂໍ້​ຄວາມ.

ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນຂໍ້ຄວາມທີ່ຖືກລົບ.

ຂໍ້ຄວາມເສັ້ນນີ້ຖືກໝາຍວ່າຖືກຖືວ່າບໍ່ຖືກຕ້ອງອີກຕໍ່ໄປ.

ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນການເພີ່ມເຕີມຂອງເອກະສານ.

ແຖວຂອງຂໍ້ຄວາມນີ້ຈະສະແດງຕາມທີ່ຂຽນໄວ້

ເສັ້ນຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍເຖິງການພິມດີ.

ແຖວນີ້ສະແດງເປັນຕົວໜັງສືໜາ.

ແຖວນີ້ສະແດງເປັນຂໍ້ຄວາມຕົວອຽງ.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markແລະ .smallຫ້ອງຮຽນຍັງມີຢູ່ເພື່ອນໍາໃຊ້ຮູບແບບດຽວກັນກັບ <mark>ແລະ <small>ໃນຂະນະທີ່ຫຼີກເວັ້ນການຜົນສະທ້ອນ semantic ທີ່ບໍ່ຕ້ອງການທີ່ tags ຈະນໍາມາ.

ໃນຂະນະທີ່ບໍ່ໄດ້ສະແດງຂ້າງເທິງ, ຮູ້ສຶກວ່າບໍ່ເສຍຄ່າເພື່ອໃຊ້ <b>ແລະ <i>ໃນ HTML5. <b>ແມ່ນຫມາຍເຖິງການເນັ້ນຄໍາສັບຫຼືປະໂຫຍກໂດຍບໍ່ມີການສະແດງຄວາມສໍາຄັນເພີ່ມເຕີມໃນຂະນະທີ່ <i>ສ່ວນໃຫຍ່ແມ່ນສໍາລັບສຽງ, ຄໍາສັບດ້ານວິຊາການ, ແລະອື່ນໆ.

ຜົນປະໂຫຍດຂໍ້ຄວາມ

ການ​ປ່ຽນ​ແປງ​ການ​ຈັດ​ຕໍາ​ແຫນ່ງ​ຂໍ້​ຄວາມ​, ການ​ຫັນ​ປ່ຽນ​, ແບບ​, ນ​້​ໍາ​ຫນັກ​, ແລະ​ສີ​ທີ່​ມີ ​ຄຸນ​ນະ​ສົມ ​ບັດ​ຕົວ​ຫນັງ​ສື ​ແລະ ​ສີ ​ຂອງ​ພວກ​ເຮົາ ​.

ຕົວຫຍໍ້

ການປະຕິບັດແບບສະໄຕລ໌ຂອງອົງປະກອບຂອງ HTML <abbr>ສໍາລັບຕົວຫຍໍ້ແລະຕົວຫຍໍ້ເພື່ອສະແດງສະບັບທີ່ຂະຫຍາຍຢູ່ໃນ hover. ຕົວຫຍໍ້ມີຂີດກ້ອງເລີ່ມຕົ້ນ ແລະໄດ້ຮັບຕົວກະພິບຊ່ວຍເຫຼືອເພື່ອສະໜອງບໍລິບົດເພີ່ມເຕີມໃນການເລື່ອນ ແລະ ໃຫ້ກັບຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ.

ຕື່ມ .initialismໃສ່ຕົວຫຍໍ້ສໍາລັບຂະຫນາດຕົວອັກສອນທີ່ນ້ອຍກວ່າເລັກນ້ອຍ.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

ສໍາລັບການອ້າງອີງຕັນຂອງເນື້ອຫາຈາກແຫຼ່ງອື່ນພາຍໃນເອກະສານຂອງທ່ານ. ຫໍ່ ໃສ່ HTML<blockquote class="blockquote"> ໃດໆ ທີ່ເປັນຄໍາເວົ້າ.

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

ການຕັ້ງຊື່ແຫຼ່ງ

ເພີ່ມ a <footer class="blockquote-footer">ສໍາລັບການກໍານົດແຫຼ່ງ. ຫໍ່ຊື່ຂອງແຫຼ່ງທີ່ເຮັດວຽກຢູ່ໃນ <cite>.

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ຈັດຮຽງ

ໃຊ້ປະໂຫຍດຂໍ້ຄວາມຕາມຄວາມຈໍາເປັນເພື່ອປ່ຽນການຈັດຕໍາແຫນ່ງຂອງ blockquote ຂອງທ່ານ.

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ຄໍາເວົ້າທີ່ມີຊື່ສຽງ, ບັນຈຸຢູ່ໃນອົງປະກອບ blockquote.

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ລາຍການ

ບໍ່ມີຮູບແບບ

ເອົາຄ່າເລີ່ມຕົ້ນ list-styleແລະຂອບຊ້າຍໃນລາຍການລາຍການ (ເດັກນ້ອຍທັນທີເທົ່ານັ້ນ). ອັນນີ້ໃຊ້ໄດ້ກັບລາຍການລາຍຊື່ເດັກນ້ອຍທັນທີ , ຊຶ່ງໝາຍຄວາມວ່າເຈົ້າຈະຕ້ອງເພີ່ມຊັ້ນຮຽນສຳລັບລາຍຊື່ທີ່ຕິດຢູ່ນຳ.

  • ນີ້ແມ່ນບັນຊີລາຍຊື່.
  • ມັນເບິ່ງຄືວ່າບໍ່ມີຮູບແບບຢ່າງສົມບູນ.
  • ໂຄງສ້າງ, ມັນຍັງເປັນບັນຊີລາຍຊື່.
  • ຢ່າງໃດກໍຕາມ, ຮູບແບບນີ້ໃຊ້ໄດ້ກັບອົງປະກອບຂອງເດັກນ້ອຍທັນທີທັນໃດ.
  • ລາຍຊື່ທີ່ຊ້ອນກັນ:
    • ບໍ່ໄດ້ຮັບຜົນກະທົບຈາກຮູບແບບນີ້
    • ຍັງຈະສະແດງລູກປືນ
    • ແລະມີຂອບຊ້າຍທີ່ເຫມາະສົມ
  • ອັນນີ້ອາດຈະຍັງມີປະໂຫຍດໃນບາງສະຖານະການ.
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

ໃນແຖວ

ເອົາລູກປືນຂອງລາຍການອອກ ແລະໃຊ້ແສງບາງອັນ marginດ້ວຍການປະສົມຂອງສອງຫ້ອງຮຽນ, .list-inlineແລະ .list-inline-item.

  • ນີ້ແມ່ນລາຍການລາຍການ.
  • ແລະອີກອັນຫນຶ່ງ.
  • ແຕ່ພວກມັນຖືກສະແດງຢູ່ໃນແຖວ.
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

ການຈັດຮຽງລາຍການຄໍາອະທິບາຍ

ຈັດຮຽງຄຳສັບ ແລະຄຳອະທິບາຍຕາມແນວນອນໂດຍການໃຊ້ຫ້ອງຮຽນທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງລະບົບຕາໜ່າງຂອງພວກເຮົາ (ຫຼືຄຳສັບປະສົມ). ສໍາລັບເງື່ອນໄຂທີ່ຍາວກວ່າ, ທ່ານສາມາດເລືອກເພີ່ມ .text-truncateຊັ້ນຮຽນເພື່ອຕັດຂໍ້ຄວາມດ້ວຍຮູບໄຂ່.

ລາຍ​ລະ​ອຽດ​
ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
ໄລຍະ

ຄໍານິຍາມສໍາລັບຄໍາສັບ.

ແລະບາງຂໍ້ຄວາມນິຍາມຕົວຍຶດບ່ອນເພີ່ມເຕີມ.

ໄລຍະອື່ນ
ຄໍານິຍາມນີ້ແມ່ນສັ້ນ, ສະນັ້ນບໍ່ມີວັກເພີ່ມເຕີມຫຼືຫຍັງ.
ຄໍາສັບທີ່ຖືກຕັດຖືກຕັດອອກ
ນີ້ສາມາດເປັນປະໂຫຍດເມື່ອພື້ນທີ່ໃກ້ຊິດ. ເພີ່ມ ellipsis ໃນຕອນທ້າຍ.
ຮັງ
ລາຍຊື່ນິຍາມທີ່ຊ້ອນກັນ
ຂ້ອຍໄດ້ຍິນເຈົ້າມັກລາຍການນິຍາມ. ໃຫ້ຂ້ອຍໃສ່ບັນຊີລາຍຊື່ຄໍານິຍາມພາຍໃນບັນຊີລາຍຊື່ຄໍານິຍາມຂອງເຈົ້າ. 
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

ຂະໜາດຕົວອັກສອນທີ່ຕອບສະໜອງ

ຕັ້ງແຕ່ v4.3.0, Bootstrap ມີທາງເລືອກໃນການເປີດໃຊ້ຂະຫນາດຕົວອັກສອນທີ່ຕອບສະຫນອງ, ອະນຸຍາດໃຫ້ຂໍ້ຄວາມສາມາດປັບຂະຫນາດໄດ້ຕາມທໍາມະຊາດໃນທົ່ວອຸປະກອນແລະຂະຫນາດ viewport. RFS ສາມາດເປີດໃຊ້ໄດ້ໂດຍການປ່ຽນ $enable-responsive-font-sizesຕົວແປ Sass ເປັນ trueແລະລວບລວມ Bootstrap ຄືນໃໝ່.

ເພື່ອສະຫນັບສະຫນູນ RFS , ພວກເຮົາໃຊ້ Sass mixin ເພື່ອທົດແທນ font-sizeຄຸນສົມບັດປົກກະຕິຂອງພວກເຮົາ. ຂະ​ຫນາດ​ຕົວ​ອັກ​ສອນ​ທີ່​ຕອບ​ສະ​ຫນອງ​ຈະ​ໄດ້​ຮັບ​ການ​ສັງ​ລວມ​ເຂົ້າ​ໄປ​ໃນ calc()​ຫນ້າ​ທີ່​ທີ່​ມີ​ການ​ປະ​ສົມ​ຂອງ rem​ແລະ​ຫົວ​ຫນ່ວຍ viewport ເພື່ອ​ເຮັດ​ໃຫ້​ພຶດ​ຕິ​ກໍາ​ການ​ປັບ​ຂະ​ຫນາດ​ຕອບ​ສະ​ຫນອງ​ໄດ້​. ເພີ່ມເຕີມກ່ຽວກັບ RFS ແລະການຕັ້ງຄ່າຂອງມັນສາມາດພົບເຫັນຢູ່ໃນ ບ່ອນເກັບມ້ຽນ GitHub ຂອງມັນ .