ຕົວພິມ
ເອກະສານແລະຕົວຢ່າງສໍາລັບການພິມ 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
ໃຊ້ຫ້ອງຮຽນຜົນປະໂຫຍດລວມເພື່ອສ້າງຂໍ້ຄວາມຫົວຂໍ້ທີສອງໃຫມ່ຈາກ Bootstrap 3.
ອົງປະກອບຫົວຂໍ້ແບບດັ້ງເດີມຖືກອອກແບບມາເພື່ອເຮັດວຽກທີ່ດີທີ່ສຸດໃນເນື້ອໃນຂອງຫນ້າຂອງທ່ານ. ເມື່ອທ່ານຕ້ອງການຫົວຂໍ້ທີ່ໂດດເດັ່ນ, ພິຈາລະນາໃຊ້ ຫົວຂໍ້ສະແດງຜົນ - ແບບຫົວຂໍ້ທີ່ ໃຫຍ່ກວ່າ, ມີຄວາມຄິດເຫັນຫຼາຍເລັກນ້ອຍ.
ຈໍສະແດງຜົນ 1 |
ຈໍສະແດງຜົນ 2 |
ຈໍສະແດງຜົນ 3 |
ຈໍສະແດງຜົນ 4 |
ເຮັດໃຫ້ວັກໂດດເດັ່ນໂດຍການເພີ່ມ .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ມັນບໍ່ແມ່ນ commodo luctus.
ການຈັດຮູບແບບສຳລັບອົງປະກອບ HTML5 ໃນແຖວທົ່ວໄປ.
ທ່ານສາມາດນໍາໃຊ້ແທັກເຄື່ອງຫມາຍເພື່ອຈຸດເດັ່ນຂໍ້ຄວາມ.
ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນຂໍ້ຄວາມທີ່ຖືກລົບ.
ຂໍ້ຄວາມເສັ້ນນີ້ຖືກຖືວ່າເປັນສິ່ງທີ່ບໍ່ຖືກຕ້ອງອີກຕໍ່ໄປ.
ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນການເພີ່ມເຕີມຂອງເອກະສານ.
ແຖວຂອງຂໍ້ຄວາມນີ້ຈະສະແດງຕາມທີ່ຂຽນໄວ້
ເສັ້ນຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍເຖິງການພິມດີ.
ແຖວນີ້ສະແດງເປັນຕົວໜັງສືໜາ.
ແຖວນີ້ສະແດງເປັນຂໍ້ຄວາມຕົວອຽງ.
.mark
ແລະ .small
ຫ້ອງຮຽນຍັງມີຢູ່ເພື່ອນໍາໃຊ້ຮູບແບບດຽວກັນກັບ <mark>
ແລະ <small>
ໃນຂະນະທີ່ຫຼີກເວັ້ນການຜົນສະທ້ອນ semantic ທີ່ບໍ່ຕ້ອງການທີ່ tags ຈະນໍາມາ.
ໃນຂະນະທີ່ບໍ່ໄດ້ສະແດງຂ້າງເທິງ, ຮູ້ສຶກວ່າບໍ່ເສຍຄ່າເພື່ອໃຊ້ <b>
ແລະ <i>
ໃນ HTML5. <b>
ແມ່ນຫມາຍເຖິງການເນັ້ນຄໍາສັບຫຼືປະໂຫຍກໂດຍບໍ່ມີການສະແດງຄວາມສໍາຄັນເພີ່ມເຕີມໃນຂະນະທີ່ <i>
ສ່ວນໃຫຍ່ແມ່ນສໍາລັບສຽງ, ຄໍາສັບດ້ານວິຊາການ, ແລະອື່ນໆ.
ການປ່ຽນແປງການຈັດຕໍາແຫນ່ງຂໍ້ຄວາມ, ການຫັນປ່ຽນ, ແບບ, ນ້ໍາຫນັກ, ແລະສີທີ່ມີ ຄຸນນະສົມ ບັດຕົວຫນັງສື ແລະ ສີ ຂອງພວກເຮົາ .
ການປະຕິບັດແບບສະໄຕລ໌ຂອງອົງປະກອບຂອງ HTML <abbr>
ສໍາລັບຕົວຫຍໍ້ແລະຕົວຫຍໍ້ເພື່ອສະແດງສະບັບທີ່ຂະຫຍາຍຢູ່ໃນ hover. ຕົວຫຍໍ້ມີຂີດກ້ອງເລີ່ມຕົ້ນ ແລະໄດ້ຮັບຕົວກະພິບຊ່ວຍເຫຼືອເພື່ອສະໜອງບໍລິບົດເພີ່ມເຕີມໃນການເລື່ອນ ແລະ ໃຫ້ກັບຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ.
ຕື່ມ .initialism
ໃສ່ຕົວຫຍໍ້ສໍາລັບຂະຫນາດຕົວອັກສອນທີ່ນ້ອຍກວ່າເລັກນ້ອຍ.
attr
HTML
ສໍາລັບການອ້າງອີງຕັນຂອງເນື້ອຫາຈາກແຫຼ່ງອື່ນພາຍໃນເອກະສານຂອງທ່ານ. ຫໍ່ ໃສ່ HTML<blockquote class="blockquote">
ໃດໆ ທີ່ເປັນຄໍາເວົ້າ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ເພີ່ມ a <footer class="blockquote-footer">
ສໍາລັບການກໍານົດແຫຼ່ງ. ຫໍ່ຊື່ຂອງແຫຼ່ງທີ່ເຮັດວຽກຢູ່ໃນ <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ໃຊ້ປະໂຫຍດຂອງຂໍ້ຄວາມຕາມຄວາມຈໍາເປັນເພື່ອປ່ຽນການຈັດຕໍາແຫນ່ງຂອງ blockquote ຂອງທ່ານ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ເອົາຄ່າເລີ່ມຕົ້ນ 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
ເອົາລູກປືນຂອງລາຍການອອກ ແລະໃຊ້ແສງບາງອັນ margin
ດ້ວຍການປະສົມຂອງສອງຫ້ອງຮຽນ, .list-inline
ແລະ .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
ຈັດຮຽງຄຳສັບ ແລະຄຳອະທິບາຍຕາມແນວນອນໂດຍການໃຊ້ຫ້ອງຮຽນທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງລະບົບຕາໜ່າງຂອງພວກເຮົາ (ຫຼືຄຳສັບປະສົມ). ສໍາລັບເງື່ອນໄຂທີ່ຍາວກວ່າ, ທ່ານສາມາດເລືອກເພີ່ມ .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.
- ຄໍາສັບທີ່ຖືກຕັດຖືກຕັດອອກ
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- ຮັງ
-
- ລາຍຊື່ນິຍາມທີ່ຊ້ອນກັນ
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsive typography ຫມາຍເຖິງການຂະຫຍາຍຂໍ້ຄວາມ ແລະອົງປະກອບໂດຍການປັບອົງປະກອບຂອງຮາກ font-size
ພາຍໃນຊຸດຂອງສື່ສອບຖາມ. Bootstrap ບໍ່ໄດ້ເຮັດສິ່ງນີ້ສໍາລັບທ່ານ, ແຕ່ມັນງ່າຍພໍທີ່ຈະເພີ່ມຖ້າທ່ານຕ້ອງການ.
ນີ້ແມ່ນຕົວຢ່າງຂອງມັນໃນການປະຕິບັດ. ເລືອກອັນໃດກໍ font-size
ໄດ້ ແລະຄຳຖາມສື່ທີ່ທ່ານຕ້ອງການ.