ຕົວພິມ
ເອກະສານແລະຕົວຢ່າງສໍາລັບການພິມ Bootstrap, ລວມທັງການຕັ້ງຄ່າທົ່ວໂລກ, ຫົວຂໍ້, ຂໍ້ຄວາມ, ລາຍຊື່, ແລະອື່ນໆ.
Bootstrap ກໍານົດພື້ນຖານການສະແດງທົ່ວໂລກ, typography, ແລະຮູບແບບການເຊື່ອມຕໍ່. ເມື່ອຕ້ອງການການຄວບຄຸມຫຼາຍຂຶ້ນ, ໃຫ້ກວດເບິ່ງ ຫ້ອງຮຽນທີ່ເປັນປະໂຫຍດ ຂອງຂໍ້ຄວາມ .
- ໃຊ້ຊຸດ ຟອນພື້ນເມືອງ ທີ່ເລືອກທີ່ດີທີ່ສຸດ
font-family
ສໍາລັບແຕ່ລະ OS ແລະອຸປະກອນ. - ສໍາລັບຂະຫນາດປະເພດລວມແລະສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍ, ພວກເຮົາສົມມຸດວ່າຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງ root
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. ຫົວຂໍ້ Bootstrap |
|
h2. ຫົວຂໍ້ Bootstrap |
|
h3. ຫົວຂໍ້ Bootstrap |
|
h4. ຫົວຂໍ້ Bootstrap |
|
h5. ຫົວຂໍ້ Bootstrap |
|
h6. ຫົວຂໍ້ Bootstrap |
.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.
ອົງປະກອບຫົວຂໍ້ແບບດັ້ງເດີມຖືກອອກແບບມາເພື່ອເຮັດວຽກທີ່ດີທີ່ສຸດໃນເນື້ອໃນຂອງຫນ້າຂອງທ່ານ. ເມື່ອທ່ານຕ້ອງການຫົວຂໍ້ທີ່ໂດດເດັ່ນ, ພິຈາລະນາໃຊ້ ຫົວຂໍ້ສະແດງຜົນ - ແບບຫົວຂໍ້ທີ່ ໃຫຍ່ກວ່າ, ມີຄວາມຄິດເຫັນຫຼາຍເລັກນ້ອຍ.
ຈໍສະແດງຜົນ 1 |
ຈໍສະແດງຜົນ 2 |
ຈໍສະແດງຜົນ 3 |
ຈໍສະແດງຜົນ 4 |
ເຮັດໃຫ້ວັກໂດດເດັ່ນໂດຍການເພີ່ມ .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ມັນບໍ່ແມ່ນ commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>
ສໍາລັບການອ້າງອີງຕັນຂອງເນື້ອຫາຈາກແຫຼ່ງອື່ນພາຍໃນເອກະສານຂອງທ່ານ. ຫໍ່ ໃສ່ HTML<blockquote class="blockquote">
ໃດໆ ທີ່ເປັນຄໍາເວົ້າ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ເພີ່ມ a <footer class="blockquote-footer">
ສໍາລັບການກໍານົດແຫຼ່ງ. ຫໍ່ຊື່ຂອງແຫຼ່ງທີ່ເຮັດວຽກຢູ່ໃນ <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ໃຊ້ປະໂຫຍດຂອງຂໍ້ຄວາມຕາມຄວາມຈໍາເປັນເພື່ອປ່ຽນການຈັດຕໍາແຫນ່ງຂອງ blockquote ຂອງທ່ານ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ເອົາຄ່າເລີ່ມຕົ້ນ list-style
ແລະຂອບຊ້າຍໃນລາຍການລາຍການ (ເດັກນ້ອຍທັນທີເທົ່ານັ້ນ). ອັນນີ້ໃຊ້ໄດ້ກັບລາຍການລາຍຊື່ເດັກນ້ອຍທັນທີ , ຊຶ່ງໝາຍຄວາມວ່າເຈົ້າຈະຕ້ອງເພີ່ມຊັ້ນຮຽນສຳລັບລາຍຊື່ທີ່ຕິດຢູ່ນຳ.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis ໃນ pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ຢູ່
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
ເອົາລູກປືນຂອງລາຍການອອກ ແລະໃຊ້ແສງບາງອັນ margin
ດ້ວຍການປະສົມຂອງສອງຫ້ອງຮຽນ, .list-inline
ແລະ .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
ຈັດຮຽງຄຳສັບ ແລະຄຳອະທິບາຍຕາມແນວນອນໂດຍການໃຊ້ຫ້ອງຮຽນທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງລະບົບຕາໜ່າງຂອງພວກເຮົາ (ຫຼືຄຳສັບປະສົມ). ສໍາລັບເງື່ອນໄຂທີ່ຍາວກວ່າ, ທ່ານສາມາດເລືອກເພີ່ມ .text-truncate
ຊັ້ນຮຽນເພື່ອຕັດຂໍ້ຄວາມດ້ວຍຮູບໄຂ່.
- ລາຍລະອຽດ
- ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested definition list
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<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">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size
within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
ນີ້ແມ່ນຕົວຢ່າງຂອງມັນໃນການປະຕິບັດ. ເລືອກອັນໃດກໍ font-size
ໄດ້ ແລະຄຳຖາມສື່ທີ່ທ່ານຕ້ອງການ.