CSS ພື້ນຖານ

ຢູ່ເທິງສຸດຂອງ scaffolding, ອົງປະກອບ HTML ພື້ນຖານໄດ້ຖືກຈັດຮູບແບບແລະປັບປຸງດ້ວຍຫ້ອງຮຽນທີ່ສາມາດຂະຫຍາຍໄດ້ເພື່ອໃຫ້ມີຮູບລັກສະນະແລະຄວາມຮູ້ສຶກທີ່ສົດຊື່ນ, ສອດຄ່ອງ.

ສຳເນົາຫົວຂໍ້ ແລະເນື້ອໃນ

ຂະໜາດຕົວພິມ

ຕາໜ່າງການພິມທັງໝົດແມ່ນອີງໃສ່ຕົວແປ Less ສອງຕົວໃນໄຟລ໌ variables.less ຂອງພວກເຮົາ: @baseFontSizeແລະ @baseLineHeight. ອັນທໍາອິດແມ່ນຂະຫນາດຕົວອັກສອນພື້ນຖານທີ່ໃຊ້ຕະຫຼອດແລະທີສອງແມ່ນເສັ້ນພື້ນຖານ - ຄວາມສູງ.

ພວກເຮົາໃຊ້ຕົວແປເຫຼົ່ານັ້ນ, ແລະຄະນິດສາດບາງອັນ, ເພື່ອສ້າງຂອບ, paddings, ແລະ line-heights ຂອງທຸກປະເພດຂອງພວກເຮົາ ແລະອື່ນໆອີກ.

ຕົວຢ່າງຂໍ້ຄວາມ

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

ສໍາເນົາຮ່າງກາຍນໍາ

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ມັນບໍ່ແມ່ນ commodo luctus.

h1. ຫົວຂໍ້ 1

h2. ຫົວຂໍ້ 2

h3. ຫົວຂໍ້ 3

h4. ຫົວຂໍ້ 4

h5. ຫົວຂໍ້ 5
h6. ຫົວຂໍ້ 6

ເນັ້ນໃສ່, ທີ່ຢູ່, ແລະຕົວຫຍໍ້

ອົງປະກອບ ການ​ນໍາ​ໃຊ້ ທາງເລືອກ
<strong> ສໍາລັບການເນັ້ນຫນັກໃສ່ snippet ຂອງຂໍ້ຄວາມທີ່ ສໍາຄັນ ບໍ່ມີ
<em> ສໍາລັບການເນັ້ນຫນັກໃສ່ snippet ຂອງຂໍ້ຄວາມທີ່ມີ ຄວາມກົດດັນ ບໍ່ມີ
<abbr> Wraps ຕົວຫຍໍ້ແລະຕົວຫຍໍ້ເພື່ອສະແດງສະບັບຂະຫຍາຍຢູ່ໃນ hover

ລວມເອົາ titleຄຸນລັກສະນະທາງເລືອກສໍາລັບຂໍ້ຄວາມທີ່ຂະຫຍາຍ

ໃຊ້ .initialismຫ້ອງຮຽນສຳລັບຕົວຫຍໍ້ຕົວພິມໃຫຍ່.
<address> ສໍາ​ລັບ​ຂໍ້​ມູນ​ການ​ຕິດ​ຕໍ່​ສໍາ​ລັບ​ບັນ​ພະ​ບຸ​ລຸດ​ທີ່​ໃກ້​ທີ່​ສຸດ​ຂອງ​ຕົນ​ຫຼື​ຮ່າງ​ກາຍ​ຂອງ​ການ​ເຮັດ​ວຽກ​ທັງ​ຫມົດ​ ຮັກສາການຈັດຮູບແບບໂດຍການສິ້ນສຸດທຸກແຖວດ້ວຍ<br>

ການນໍາໃຊ້ການເນັ້ນຫນັກໃສ່

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

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

ທີ່ຢູ່ ຕົວຢ່າງ

ນີ້ແມ່ນສອງຕົວຢ່າງຂອງວິທີການ <address>ແທັກສາມາດໃຊ້:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ຊື່ເຕັມ
[email protected]

ຕົວຫຍໍ້ຕົວຢ່າງ

ຕົວຫຍໍ້ທີ່ມີ titleຄຸນລັກສະນະມີຂອບລຸ່ມຈຸດອ່ອນ ແລະຕົວກະພິບຊ່ວຍຢູ່ເທິງ. ອັນນີ້ເຮັດໃຫ້ຜູ້ໃຊ້ມີຕົວຊີ້ບອກເພີ່ມເຕີມວ່າບາງສິ່ງບາງຢ່າງຈະຖືກສະແດງຢູ່ໃນເຄື່ອງເລື່ອນ.

ເພີ່ມ initialismຫ້ອງຮຽນໃສ່ຕົວຫຍໍ້ເພື່ອເພີ່ມຄວາມກົມກຽວຂອງຕົວພິມໂດຍການໃຫ້ຂະໜາດຕົວໜັງສືນ້ອຍລົງເລັກນ້ອຍ.

HTML ແມ່ນສິ່ງທີ່ດີທີ່ສຸດນັບຕັ້ງແຕ່ເຂົ້າຈີ່.

ຕົວຫຍໍ້ຂອງຄຸນລັກສະນະຂອງຄໍາສັບແມ່ນ attr .

Blockquotes

ອົງປະກອບ ການ​ນໍາ​ໃຊ້ ທາງເລືອກ
<blockquote> ອົງປະກອບລະດັບຕັນສໍາລັບການອ້າງອີງເນື້ອຫາຈາກແຫຼ່ງອື່ນ

ເພີ່ມ citeຄຸນລັກສະນະສໍາລັບ URL ແຫຼ່ງ

ໃຊ້ .pull-leftແລະ .pull-rightຫ້ອງຮຽນສໍາລັບທາງເລືອກທີ່ເລື່ອນໄດ້
<small> ອົງປະກອບທາງເລືອກສໍາລັບການເພີ່ມການອ້າງອີງທີ່ປະເຊີນຫນ້າກັບຜູ້ໃຊ້, ໂດຍທົ່ວໄປແລ້ວຜູ້ຂຽນທີ່ມີຫົວຂໍ້ວຽກ ວາງ <cite>ອ້ອມຫົວຂໍ້ ຫຼືຊື່ຂອງແຫຼ່ງ

ເພື່ອລວມເອົາ blockquote, ຫໍ່ <blockquote>ປະມານ HTML ໃດ ເປັນ quote. ສໍາລັບວົງຢືມກົງ, ພວກເຮົາແນະນໍາ a <p>.

ລວມເອົາອົງປະກອບທາງເລືອກ <small>ເພື່ອອ້າງອີງແຫຼ່ງຂອງທ່ານແລະທ່ານຈະໄດ້ຮັບ em dash &mdash;ກ່ອນມັນສໍາລັບຈຸດປະສົງການຈັດຮູບແບບ.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> ຄົນທີ່ມີຊື່ສຽງ </small>
  4. </blockquote>

ຕົວຢ່າງ blockquotes

ຕົ້ນສະບັບ blockquotes ຖືກຈັດຮູບແບບເຊັ່ນ:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

ບາງຄົນທີ່ມີຊື່ສຽງໃນ ຮ່າງກາຍຂອງການເຮັດວຽກ

ເພື່ອເລື່ອນ blockquote ຂອງທ່ານໄປທາງຂວາ, ເພີ່ມ class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

ບາງຄົນທີ່ມີຊື່ສຽງໃນ ຮ່າງກາຍຂອງການເຮັດວຽກ

ລາຍການ

ບໍ່ມີຄໍາສັ່ງ

<ul>

  • 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="unstyled">

  • 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

ສັ່ງແລ້ວ

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis ໃນ pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

ລາຍລະອຽດ

<dl>

ລາຍ​ລະ​ອຽດ​
ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
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.

ລາຍ​ລະ​ອຽດ​ແນວ​ນອນ​

<dl class="dl-horizontal">

ລາຍ​ລະ​ອຽດ​
ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

ລະວັງ! ລາຍ​ການ​ລາຍ​ລະ​ອຽດ​ແນວ​ນອນ​ຈະ​ຕັດ​ຂໍ້​ຄວາມ​ທີ່​ຍາວ​ເກີນ​ໄປ​ທີ່​ຈະ​ເຫມາະ​ໃນ​ການ​ແກ້​ໄຂ​ຖັນ​ເບື້ອງ​ຊ້າຍ text-overflow​. ໃນ viewports ແຄບ, ພວກເຂົາຈະປ່ຽນເປັນຮູບແບບ stacked ເລີ່ມຕົ້ນ.

ໃນແຖວ

ຫໍ່ຕົວຫຍໍ້ຂອງລະຫັດໃນແຖວດ້ວຍ <code>.

  1. ຕົວ ຢ່າງ , <code> section </ code > ຄວນຖືກຫໍ່ ເປັນ inline .

ຕັນພື້ນຖານ

ໃຊ້ <pre>ສໍາລັບລະຫັດຫຼາຍເສັ້ນ. ໃຫ້ແນ່ໃຈວ່າຈະຫນີວົງເລັບມຸມໃດໆໃນລະຫັດສໍາລັບການສະແດງຜົນທີ່ເຫມາະສົມ.

<p>ຕົວຢ່າງຂໍ້ຄວາມທີ່ນີ້...</p>
  1. <pre>
  2. <p>ຕົວ​ຢ່າງ​ຂໍ້​ຄວາມ​ຢູ່​ທີ່​ນີ້...</p>
  3. </pre>

ຫມາຍເຫດ: ໃຫ້ແນ່ໃຈວ່າຈະຮັກສາລະຫັດພາຍໃນ <pre>tags ຢູ່ໃກ້ກັບຊ້າຍເທົ່າທີ່ເປັນໄປໄດ້; ມັນຈະສະແດງແຖບທັງຫມົດ.

ທ່ານສາມາດເລືອກເພີ່ມ .pre-scrollableຊັ້ນຮຽນທີ່ຈະກໍານົດຄວາມສູງສູງສຸດຂອງ 350px ແລະສະຫນອງແຖບເລື່ອນແກນ y.

Google Prettify

ເອົາ <pre>ອົງປະກອບດຽວກັນແລະເພີ່ມສອງຊັ້ນຮຽນທາງເລືອກສໍາລັບການປັບປຸງການສະແດງຜົນ.

  1. <p> ຕົວ​ຢ່າງ​ຂໍ້​ຄວາມ​ທີ່​ນີ້ ... </p>
  1. <pre class = "prettyprint
  2. linenum" >
  3. <p>ຕົວ​ຢ່າງ​ຂໍ້​ຄວາມ​ຢູ່​ທີ່​ນີ້...</p>
  4. </pre>

ດາວໂຫລດ google-code-prettify ແລະເບິ່ງ readme ສໍາລັບວິທີການນໍາໃຊ້.

ເຄື່ອງໝາຍຕາຕະລາງ

ແທັກ ລາຍລະອຽດ
<table> ອົງປະກອບຫໍ່ສໍາລັບການສະແດງຂໍ້ມູນໃນຮູບແບບຕາຕະລາງ
<thead> ອົງປະກອບບັນຈຸສໍາລັບແຖວສ່ວນຫົວຕາຕະລາງ ( <tr>) ເພື່ອຕິດປ້າຍກຳກັບຖັນຕາຕະລາງ
<tbody> ອົງປະກອບບັນຈຸສໍາລັບແຖວຕາຕະລາງ ( <tr>) ຢູ່ໃນເນື້ອໃນຂອງຕາຕະລາງ
<tr> ອົງປະກອບບັນຈຸສໍາລັບຊຸດຂອງຕາລາງຕາຕະລາງ ( <td>ຫຼື <th>) ທີ່ປາກົດຢູ່ໃນແຖວດຽວ
<td> ຕາລາງຕາຕະລາງເລີ່ມຕົ້ນ
<th> ຕາຕາລາງພິເສດສຳລັບຖັນ (ຫຼືແຖວ, ຂຶ້ນກັບຂອບເຂດ ແລະການຈັດວາງ) ປ້າຍກຳກັບ
ຕ້ອງໃຊ້ພາຍໃນ a<thead>
<caption> ຄໍາອະທິບາຍຫຼືບົດສະຫຼຸບຂອງສິ່ງທີ່ຕາຕະລາງຖື, ໂດຍສະເພາະທີ່ເປັນປະໂຫຍດສໍາລັບຜູ້ອ່ານຫນ້າຈໍ
  1. <ຕາຕະລາງ>
  2. <ຫົວ>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

ຕົວເລືອກຕາຕະລາງ

ຊື່ ຫ້ອງຮຽນ ລາຍລະອຽດ
ຄ່າເລີ່ມຕົ້ນ ບໍ່ມີ ບໍ່ມີຮູບແບບ, ພຽງແຕ່ຖັນ ແລະແຖວ
ພື້ນຖານ .table ພຽງແຕ່ເສັ້ນແນວນອນລະຫວ່າງແຖວ
ມີຊາຍແດນຕິດ .table-bordered ມຸມມົນ ແລະເພີ່ມຂອບທາງນອກ
Zebra-stripe .table-striped ເພີ່ມສີພື້ນຫຼັງສີຂີ້ເຖົ່າອ່ອນໃສ່ແຖວຄີກ (1, 3, 5, ແລະອື່ນໆ)
ຂົ້ນ .table-condensed ຕັດແຜ່ນແນວຕັ້ງອອກເຄິ່ງໜຶ່ງ, ຈາກ 8px ຫາ 4px, ພາຍໃນທັງໝົດ tdແລະ thອົງປະກອບ

ຕາຕະລາງຕົວຢ່າງ

1. ຮູບແບບຕາຕະລາງເລີ່ມຕົ້ນ

ຕາຕະລາງຖືກຈັດຮູບແບບອັດຕະໂນມັດໂດຍມີຂອບຈຳນວນໜ້ອຍດຽວເພື່ອຮັບປະກັນການອ່ານ ແລະຮັກສາໂຄງສ້າງ. ດ້ວຍ 2.0, .tableຫ້ອງຮຽນແມ່ນຕ້ອງການ.

  1. <ຕາຕະລາງ class = "table" >
  2. </table>
# ຊື່​ແທ້ ນາມ​ສະ​ກຸນ ຊື່ຜູ້ໃຊ້
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 ລາຣີ ນົກ @twitter

2. ຕາຕະລາງເສັ້ນດ່າງ

ສ້າງຄວາມແປກໃໝ່ໃຫ້ກັບໂຕະຂອງເຈົ້າໂດຍການເພີ່ມລາຍເສັ້ນມ້າລາຍ—ພຽງແຕ່ເພີ່ມ .table-stripedຊັ້ນຮຽນ.

ຫມາຍເຫດ: ຕາຕະລາງທີ່ມີເສັ້ນດ່າງໃຊ້ :nth-childຕົວເລືອກ CSS ແລະບໍ່ມີຢູ່ໃນ IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# ຊື່​ແທ້ ນາມ​ສະ​ກຸນ ຊື່ຜູ້ໃຊ້
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 ລາຣີ ນົກ @twitter

3. ຕາຕະລາງທີ່ມີຊາຍແດນຕິດ

ເພີ່ມຂອບອ້ອມໂຕະທັງໝົດ ແລະມຸມມົນເພື່ອຈຸດປະສົງດ້ານຄວາມງາມ.

  1. <table class = "table table-bordered" >
  2. </table>
# ຊື່​ແທ້ ນາມ​ສະ​ກຸນ ຊື່ຜູ້ໃຊ້
1 ມາກ ໂອໂຕ @mdo
ມາກ ໂອໂຕ @getbootstrap
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 Larry the Bird @twitter

4. ຕາຕະລາງ condensed

ເຮັດໃຫ້ຕາຕະລາງຂອງທ່ານມີຄວາມຫນາແຫນ້ນໂດຍການເພີ່ມ .table-condensedຊັ້ນເພື່ອຕັດແຜ່ນຕາຕະລາງໃນເຄິ່ງຫນຶ່ງ (ຈາກ 8px ຫາ 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# ຊື່​ແທ້ ນາມ​ສະ​ກຸນ ຊື່ຜູ້ໃຊ້
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 Larry the Bird @twitter

5. ສົມທົບພວກເຂົາທັງຫມົດ!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
ຊື່​ເຕັມ
# ຊື່​ແທ້ ນາມ​ສະ​ກຸນ ຊື່ຜູ້ໃຊ້
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 Larry the Bird @twitter

HTML ແລະ CSS ທີ່ມີຄວາມຍືດຫຍຸ່ນ

ສ່ວນທີ່ດີທີ່ສຸດກ່ຽວກັບແບບຟອມໃນ Bootstrap ແມ່ນວ່າການປ້ອນຂໍ້ມູນແລະການຄວບຄຸມທັງຫມົດຂອງທ່ານເບິ່ງດີບໍ່ວ່າທ່ານຈະສ້າງພວກມັນແນວໃດໃນເຄື່ອງຫມາຍຂອງທ່ານ. ບໍ່ຈໍາເປັນຕ້ອງມີ HTML ທີ່ຫລູຫລາ, ແຕ່ພວກເຮົາໃຫ້ຮູບແບບສໍາລັບຜູ້ທີ່ຕ້ອງການມັນ.

ການຈັດວາງທີ່ສັບສົນຫຼາຍຂຶ້ນມາພ້ອມກັບຫ້ອງຮຽນທີ່ຫຍໍ້ໆ ແລະສາມາດຂະຫຍາຍໄດ້ເພື່ອການຈັດຮູບແບບທີ່ງ່າຍ ແລະ ການຜູກມັດເຫດການ, ດັ່ງນັ້ນທ່ານຈຶ່ງໄດ້ກວມເອົາທຸກຂັ້ນຕອນ.

ສີ່ຮູບແບບລວມ

Bootstrap ມາພ້ອມກັບການສະຫນັບສະຫນູນສີ່ປະເພດຂອງຮູບແບບແບບຟອມ:

  • ຕັ້ງ (ຄ່າເລີ່ມຕົ້ນ)
  • ຊອກຫາ
  • ໃນແຖວ
  • ລວງນອນ

ຮູບແບບທີ່ແຕກຕ່າງກັນຂອງການຈັດຮູບແບບຮຽກຮ້ອງໃຫ້ມີການປ່ຽນແປງບາງຢ່າງເພື່ອ markup, ແຕ່ການຄວບຄຸມຕົວເອງຍັງຄົງຢູ່ແລະປະຕິບັດຕົວດຽວກັນ.

ຄວບຄຸມລັດແລະອື່ນໆ

ແບບຟອມຂອງ Bootstrap ປະກອບມີຄໍເຕົ້າໄຂ່ທີ່ສໍາລັບການຄວບຄຸມແບບຟອມພື້ນຖານທັງຫມົດເຊັ່ນການປ້ອນຂໍ້ມູນ, textarea, ແລະເລືອກທີ່ເຈົ້າຄາດຫວັງ. ແຕ່ມັນຍັງມາພ້ອມກັບອົງປະກອບແບບກຳນົດເອງຈຳນວນໜຶ່ງ ເຊັ່ນ: ວັດສະດຸປ້ອນເຂົ້າ ແລະ ເພີ່ມເຕີມ ແລະ ຮອງຮັບລາຍການກ່ອງກາໝາຍ.

ລັດເຊັ່ນຄວາມຜິດພາດ, ການເຕືອນໄພ, ແລະຄວາມສໍາເລັດແມ່ນລວມຢູ່ໃນແຕ່ລະປະເພດຂອງການຄວບຄຸມແບບຟອມ. ລວມໄປເຖິງຮູບແບບສໍາລັບການຄວບຄຸມທີ່ພິການ.

ສີ່​ປະ​ເພດ​ຂອງ​ຮູບ​ແບບ​

Bootstrap ສະຫນອງເຄື່ອງຫມາຍແລະຮູບແບບທີ່ງ່າຍດາຍສໍາລັບສີ່ຮູບແບບຂອງຮູບແບບເວັບໄຊຕ໌ທົ່ວໄປ.

ຊື່ ຫ້ອງຮຽນ ລາຍລະອຽດ
ຕັ້ງ (ຄ່າເລີ່ມຕົ້ນ) .form-vertical (ບໍ່ຈຳເປັນ) ປ້າຍຊ້ອນກັນ, ຈັດຮຽງຊ້າຍຢູ່ເທິງການຄວບຄຸມ
ໃນແຖວ .form-inline ປ້າຍກຳກັບທີ່ຈັດຮຽງຊ້າຍ ແລະຕົວຄວບຄຸມ inline-block ສໍາລັບຮູບແບບທີ່ຫນາແຫນ້ນ
ຊອກຫາ .form-search ການປ້ອນຂໍ້ຄວາມທີ່ມີລັກສະນະເປັນວົງມົນພິເສດສໍາລັບຄວາມງາມຂອງການຄົ້ນຫາແບບປົກກະຕິ
ລວງນອນ .form-horizontal ເລື່ອນຊ້າຍ, ຈັດຮຽງຂວາໃສ່ເສັ້ນດຽວກັນກັບການຄວບຄຸມ

ຕົວຢ່າງແບບຟອມ ໂດຍໃຊ້ພຽງແຕ່ການຄວບຄຸມແບບຟອມ, ບໍ່ມີເຄື່ອງຫມາຍເພີ່ມເຕີມ

ຮູບແບບພື້ນຖານ

ມາດຕະຖານອັດສະລິຍະ ແລະນ້ຳໜັກເບົາໂດຍບໍ່ມີເຄື່ອງໝາຍເພີ່ມເຕີມ.

ຕົວຢ່າງຂໍ້ຄວາມຊ່ວຍເຫຼືອລະດັບບລັອກຢູ່ທີ່ນີ້.

  1. <form class = "ດີ" >
  2. <label> ຊື່ປ້າຍກຳ ກັບ </label>
  3. < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ຂໍ້ຄວາມ" class = "span3" placeholder = "ພິມບາງສິ່ງບາງຢ່າງ…" >
  4. <span class = "help-block" > ຕົວ​ຢ່າງ​ຕົວ​ຢ່າງ​ຂໍ້​ຄວາມ​ຊ່ວຍ​ເຫຼືອ​ໃນ​ລະ​ດັບ​ການ​ບລັອກ​ຢູ່​ທີ່​ນີ້. </span>
  5. <label class = "checkbox" >
  6. < input type = "checkbox" > ກວດເບິ່ງຂ້ອຍອອກ
  7. </label>
  8. <button type = "submit" class = "btn" > ສົ່ງ </button>
  9. </form>

ແບບຟອມຄົ້ນຫາ

ຕື່ມ .form-searchໃສ່ແບບຟອມແລະ .search-queryໃສ່ input.

  1. <form class = "well form-search" >
  2. < ປະເພດ input = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > ຄົ້ນຫາ </button>
  4. </form>

ແບບຟອມໃນແຖວ

ຕື່ມການ .form-inlineປັບຄວາມສອດຄ່ອງຕາມແນວຕັ້ງ ແລະໄລຍະຫ່າງຂອງການຄວບຄຸມແບບຟອມ.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. < ປະເພດ input = "ລະຫັດຜ່ານ" class = "input-small" placeholder = "ລະຫັດຜ່ານ" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > ຈື່ຂ້ອຍໄວ້
  6. </label>
  7. <button type = "submit" class = "btn" > ເຂົ້າສູ່ລະບົບ </button>
  8. </form>

ຮູບແບບແນວນອນ

ສະແດງຢູ່ເບື້ອງຂວາແມ່ນທຸກຕົວຄວບຄຸມແບບຟອມເລີ່ມຕົ້ນທີ່ພວກເຮົາຮອງຮັບ. ນີ້ແມ່ນລາຍການຫົວຂໍ້ຍ່ອຍ:

  • ການ​ປ້ອນ​ຂໍ້​ຄວາມ (ຂໍ້​ຄວາມ​, ລະ​ຫັດ​ຜ່ານ​, ອີ​ເມວ​, ແລະ​ອື່ນໆ​)
  • ປ່ອງໝາຍ
  • ວິ​ທະ​ຍຸ​
  • ເລືອກ
  • ເລືອກຫຼາຍ
  • ໄຟລ໌ປ້ອນຂໍ້ມູນ
  • ພື້ນທີ່ຂໍ້ຄວາມ

ນອກເໜືອໄປຈາກຕົວໜັງສືແບບອິດສະລະ, ການປ້ອນຂໍ້ມູນໃສ່ຂໍ້ຄວາມ HTML5 ປະກົດວ່າຄືກັນ.

ຕົວຢ່າງເຄື່ອງຫມາຍ

ອີງຕາມຮູບແບບຕົວຢ່າງຂ້າງເທິງ, ນີ້ແມ່ນເຄື່ອງຫມາຍທີ່ກ່ຽວຂ້ອງກັບການປ້ອນຂໍ້ມູນແລະກຸ່ມຄວບຄຸມທໍາອິດ. The .control-group, .control-label, ແລະ .controlsຫ້ອງຮຽນແມ່ນຕ້ອງການທັງຫມົດສໍາລັບການຄໍເຕົ້າໄຂ່ທີ່.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> ຂໍ້ຄວາມຄວາມຫມາຍ </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > ການປ້ອນຂໍ້ຄວາມ </label>
  6. <div class = "ການຄວບຄຸມ" >
  7. <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > ຂໍ້ຄວາມຊ່ວຍເຫຼືອ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

ຮູບແບບການຄວບຄຸມລັດ

Bootstrap ມີລັກສະນະລັກສະນະສໍາລັບຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນແລະ disabledລັດ. ພວກເຮົາເອົາ Webkit ເລີ່ມຕົ້ນອອກ outlineແລະນໍາໃຊ້ a box-shadowໃນສະຖານທີ່ຂອງມັນສໍາລັບ :focus.


ການກວດສອບແບບຟອມ

ມັນຍັງປະກອບມີຮູບແບບການກວດສອບສໍາລັບຄວາມຜິດພາດ, ການເຕືອນໄພ, ແລະຄວາມສໍາເລັດ. ເພື່ອໃຊ້, ເພີ່ມຊັ້ນຂໍ້ຜິດພາດໃສ່ສິ່ງອ້ອມຂ້າງ .control-group.

  1. <ຊຸດຂໍ້ມູນ
  2. class = "control-group error" >
  3. </fieldset>
ບາງມູນຄ່າຢູ່ທີ່ນີ້
ມີບາງຢ່າງຜິດພາດເກີດຂຶ້ນ
ກະລຸນາແກ້ໄຂຂໍ້ຜິດພາດ
ວ້າວ!
ວ້າວ!

ຂະຫຍາຍການຄວບຄຸມແບບຟອມ

Prepend & ຕໍ່ທ້າຍ inputs

ກຸ່ມການປ້ອນຂໍ້ມູນ—ດ້ວຍຂໍ້ຄວາມຕໍ່ທ້າຍ ຫຼື ຫຍໍ້ໜ້າ—ໃຫ້ວິທີທີ່ງ່າຍໃນການໃຫ້ບໍລິບົດເພີ່ມເຕີມສຳລັບການປ້ອນຂໍ້ມູນຂອງທ່ານ. ຕົວຢ່າງທີ່ຍິ່ງໃຫຍ່ປະກອບມີເຄື່ອງຫມາຍ @ ສໍາລັບຊື່ຜູ້ໃຊ້ Twitter ຫຼື $ ສໍາລັບການເງິນ.


ກ່ອງກວດ ແລະວິທະຍຸ

ສູງສຸດເຖິງ v1.4, Bootstrap ຕ້ອງການເຄື່ອງໝາຍເພີ່ມເຕີມອ້ອມກ່ອງໝາຍ ແລະວິທະຍຸເພື່ອວາງພວກມັນໄວ້. ໃນປັດຈຸບັນ, ມັນເປັນເລື່ອງງ່າຍດາຍຂອງການເຮັດຊ້ໍາສິ່ງ <label class="checkbox">ທີ່ຫໍ່ <input type="checkbox">.

ກ່ອງເຊັກອິນແຖວ ແລະວິທະຍຸຍັງຮອງຮັບ. ພຽງ​ແຕ່​ເພີ່ມ .inline​ໃສ່​ໃດ​ຫນຶ່ງ .checkbox​ຫຼື .radio​ແລະ​ທ່ານ​ສໍາ​ເລັດ​.


ແບບຟອມໃນແຖວ ແລະຕໍ່ທ້າຍ/prepend

ເພື່ອໃຊ້ prepend ຫຼືຕື່ມຂໍ້ມູນໃສ່ໃນຮູບແບບ inline, ໃຫ້ແນ່ໃຈວ່າຈະວາງ .add-onແລະ inputຢູ່ໃນແຖວດຽວກັນ, ໂດຍບໍ່ມີການ spaces.


ແບບຟອມຊ່ວຍເຫຼືອ

ເພື່ອເພີ່ມຂໍ້ຄວາມຊ່ວຍເຫຼືອສໍາລັບການປ້ອນຂໍ້ມູນແບບຟອມຂອງທ່ານ, ໃຫ້ໃສ່ຂໍ້ຄວາມ <span class="help-inline">ຊ່ວຍເຫຼືອໃນແຖວ ຫຼື ບລັອກຂໍ້ຄວາມຊ່ວຍເຫຼືອດ້ວຍ <p class="help-block">ຫຼັງອົງປະກອບການປ້ອນຂໍ້ມູນ.

ໃຊ້ .span*ຫ້ອງຮຽນດຽວກັນຈາກລະບົບຕາຂ່າຍໄຟຟ້າສໍາລັບຂະຫນາດປ້ອນຂໍ້ມູນ.

ທ່ານອາດຈະໃຊ້ຊັ້ນຮຽນແບບຄົງທີ່ທີ່ບໍ່ມີແຜນທີ່ກັບຕາຂ່າຍໄຟຟ້າ, ປັບຕົວເຂົ້າກັບຄໍເຕົ້າໄຂ່ທີ່ CSS ທີ່ຕອບສະຫນອງ, ຫຼືບັນຊີສໍາລັບປະເພດການຄວບຄຸມທີ່ແຕກຕ່າງກັນ (ເຊັ່ນ: inputທຽບກັບ select).

@

ນີ້ແມ່ນຂໍ້ຄວາມຊ່ວຍເຫຼືອ

.00
ນີ້ແມ່ນຂໍ້ຄວາມຊ່ວຍເຫຼືອເພີ່ມເຕີມ
$ .00

ໝາຍເຫດ: ປ້າຍກຳກັບອ້ອມຮອບຕົວເລືອກທັງໝົດສຳລັບພື້ນທີ່ຄລິກທີ່ໃຫຍ່ກວ່າ ແລະຮູບແບບທີ່ສາມາດໃຊ້ໄດ້ຫຼາຍກວ່າ.

ປຸ່ມ class="" ລາຍລະອຽດ
btn ປຸ່ມສີເທົາມາດຕະຖານທີ່ມີການປ່ຽນສີ
btn btn-primary ສະຫນອງນ້ໍາຫນັກສາຍຕາພິເສດແລະກໍານົດການປະຕິບັດຕົ້ນຕໍໃນຊຸດຂອງປຸ່ມ
btn btn-info ໃຊ້ເປັນທາງເລືອກກັບຮູບແບບເລີ່ມຕົ້ນ
btn btn-success ຊີ້ໃຫ້ເຫັນເຖິງການປະຕິບັດທີ່ປະສົບຜົນສໍາເລັດຫຼືໃນທາງບວກ
btn btn-warning ຊີ້ບອກໃຫ້ລະມັດລະວັງກັບການກະທຳນີ້
btn btn-danger ຊີ້ບອກເຖິງການກະທຳທີ່ເປັນອັນຕະລາຍ ຫຼືອາດເປັນໄປໃນທາງລົບ
btn btn-inverse ປຸ່ມສີເທົາເຂັ້ມຈັບສະຫຼັບ, ບໍ່ໄດ້ຜູກມັດກັບການກະທຳ ຫຼືການໃຊ້ຄຳສັບ

ປຸ່ມສໍາລັບການປະຕິບັດ

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

ຮູບແບບປຸ່ມສາມາດໃຊ້ກັບອັນໃດກໍໄດ້ກັບ .btnຫ້ອງຮຽນທີ່ນຳໃຊ້. ຢ່າງໃດກໍຕາມ, ໂດຍທົ່ວໄປແລ້ວ, ທ່ານຕ້ອງການນໍາໃຊ້ເຫຼົ່ານີ້ພຽງແຕ່ <a>ແລະ <button>ອົງປະກອບ.

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບຂ້າມ

IE9 ບໍ່ໄດ້ຕັດສີພື້ນຫຼັງໃສ່ມຸມມົນ, ດັ່ງນັ້ນພວກເຮົາຈຶ່ງເອົາມັນອອກ. ທີ່ກ່ຽວຂ້ອງ, IE9 jankifies buttonອົງປະກອບທີ່ພິການ, rendering ຂໍ້ຄວາມສີຂີ້ເຖົ່າທີ່ມີເງົາຂອງຕົວຫນັງສືທີ່ບໍ່ດີທີ່ພວກເຮົາບໍ່ສາມາດແກ້ໄຂໄດ້.

ຫຼາຍຂະໜາດ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ເພີ່ມ .btn-large, .btn-small, ຫຼື .btn-miniສໍາລັບສອງຂະຫນາດເພີ່ມເຕີມ.


ສະຖານະຄົນພິການ

ສໍາລັບປຸ່ມທີ່ຖືກປິດການໃຊ້ງານ, ໃຫ້ເພີ່ມ .disabledຊັ້ນໃນການເຊື່ອມຕໍ່ແລະ disabledຄຸນລັກສະນະສໍາລັບ <button>ອົງປະກອບ.

ລິ້ງຫຼັກ ເຊື່ອມຕໍ່

ລະວັງ! ພວກເຮົາໃຊ້ .disabledເປັນຫ້ອງຮຽນທີ່ເປັນປະໂຫຍດຢູ່ທີ່ນີ້, ຄ້າຍຄືກັນກັບ .activeຫ້ອງຮຽນທົ່ວໄປ, ດັ່ງນັ້ນບໍ່ຈໍາເປັນຕ້ອງມີຄໍານໍາຫນ້າ.

ຫ້ອງຮຽນດຽວ, ຫຼາຍແທັກ

ໃຊ້ .btnຫ້ອງຮຽນໃນ <a>, <button>, ຫຼື <input>ອົງປະກອບ.

ເຊື່ອມຕໍ່
  1. <a class="btn" href=""> ລິ້ງ </a> _ _ _ _ _
  2. <button class = "btn" type = "submit" >
  3. ປຸ່ມ
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "ການປ້ອນຂໍ້ມູນ" >
  7. < input class = "btn" type = "submit"
  8. value = "ສົ່ງ" >

ເປັນການປະຕິບັດທີ່ດີທີ່ສຸດ, ພະຍາຍາມຈັບຄູ່ອົງປະກອບສໍາລັບທ່ານ context ເພື່ອຮັບປະກັນການຈັບຄູ່ການສະແດງຜົນຂ້າມຕົວທ່ອງເວັບ. ຖ້າທ່ານມີ input, ໃຫ້ໃຊ້ <input type="submit">ປຸ່ມສໍາລັບປຸ່ມຂອງທ່ານ.

  • icon-ແກ້ວ
  • icon-ດົນຕີ
  • ໄອຄອນຊອກຫາ
  • icon-envelope
  • icon-ຫົວໃຈ
  • icon-star
  • icon-star-ເປົ່າ
  • ໄອຄອນຜູ້ໃຊ້
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • ໄອຄອນ-ຕົກລົງ
  • icon-ເອົາອອກ
  • ໄອຄອນຊູມເຂົ້າ
  • ໄອຄອນຊູມອອກ
  • ໄອຄອນປິດ
  • ໄອຄອນ-ສັນຍານ
  • icon-cog
  • icon-ຖັງຂີ້ເຫຍື້ອ
  • icon-home
  • icon-file
  • icon-time
  • ໄອຄອນ-ຖະໜົນ
  • icon-download-alt
  • icon-ດາວໂຫຼດ
  • ອັບ​ໂຫຼດ icon
  • icon-inbox
  • icon-play-circle
  • ໄອຄອນ-ຊ້ຳ
  • icon-ໂຫຼດຫນ້າຈໍຄືນ
  • icon-list-alt
  • icon-lock
  • icon-ທຸງ
  • ໄອຄອນ-ຫູຟັງ
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • ໄອຄອນພິມ
  • icon-ກ້ອງຖ່າຍຮູບ
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-ຊ້າຍ
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ໄອຄອນລາຍການ
  • icon-indent-ຊ້າຍ
  • icon-indent-ຂວາ
  • icon-facetime-video
  • ຮູບ​ສັນ​ຍາ​ລັກ​
  • icon-pencil
  • icon-map-marker
  • icon-ປັບ
  • icon-tint
  • ໄອຄອນແກ້ໄຂ
  • icon-share
  • ໄອຄອນກວດສອບ
  • icon-ຍ້າຍ
  • ໄອຄອນ-ກ້າວ-ຖອຍຫຼັງ
  • icon-fast-backward
  • ໄອຄອນ-ຖອຍຫຼັງ
  • icon ຫຼິ້ນ
  • ໄອຄອນຢຸດ
  • ໄອຄອນຢຸດ
  • ໄອຄອນໄປໜ້າ
  • icon-fast-forward
  • ໄອຄອນ-ກ້າວໄປຂ້າງໜ້າ
  • ໄອຄອນ-ຖອດອອກ
  • icon-chevron-ຊ້າຍ
  • icon-chevron-ຂວາ
  • icon-plus-sign
  • ໄອຄອນ-ເຄື່ອງໝາຍລົບ
  • icon-remove-sign
  • icon-ok-sign
  • ໄອຄອນ-ຄຳຖາມ-ເຄື່ອງໝາຍ
  • icon-info-sign
  • icon-ພາບຫນ້າຈໍ
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • ໄອຄອນ-ລູກສອນ-ຊ້າຍ
  • ໄອຄອນ-ລູກສອນ-ຂວາ
  • ໄອຄອນລູກສອນຂຶ້ນ
  • ໄອຄອນ-ລູກສອນລົງ
  • icon-share-alt
  • icon-ປັບຂະໜາດ-ເຕັມ
  • icon-ປັບຂະໜາດ-ນ້ອຍ
  • icon-plus
  • ໄອຄອນ-ລົບ
  • icon-ດາວ
  • icon-exclamation-sign
  • icon-ຂອງຂວັນ
  • ໄອຄອນ-ໃບ
  • ໄອຄອນໄຟ
  • ໄອຄອນເປີດຕາ
  • ໄອຄອນ-ຕາ-ປິດ
  • icon-warning-sign
  • ໄອຄອນ-ຍົນ
  • icon-ປະຕິທິນ
  • ໄອຄອນ-ສຸ່ມ
  • icon-comment
  • icon-ແມ່ເຫຼັກ
  • icon-chevron-up
  • icon-chevron-ລົງ
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-ປິດ
  • icon-folder-open
  • ໄອຄອນປັບຂະໜາດ-ຕັ້ງ
  • ໄອຄອນປັບຂະໜາດ-ແນວນອນ
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • ໄອຄອນຍົກໂປ້ມືຂຶ້ນ
  • ໄອຄອນ-ໂປ້ມືລົງ
  • ໄອຄອນ-ມືຂວາ
  • ໄອຄອນ-ມືຊ້າຍ
  • ໄອຄອນມືຂຶ້ນ
  • ໄອຄອນ-ມືລົງ
  • icon-circle-arrow-right
  • icon-circle-arrow-ຊ້າຍ
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • ໄອຄອນ-ໂລກ
  • icon-wrench
  • ໄອຄອນ-ໜ້າວຽກ
  • icon-filter
  • icon-briefcase
  • ໄອຄອນເຕັມຈໍ

ສ້າງຂຶ້ນເປັນ sprite ໄດ້

ແທນ​ທີ່​ຈະ​ເຮັດ​ໃຫ້​ທຸກ​ຮູບ​ສັນ​ຍາ​ລັກ​ເປັນ​ຄໍາ​ຮ້ອງ​ສະ​ຫມັກ​ເພີ່ມ​ເຕີມ​, ພວກ​ເຮົາ​ໄດ້​ຮວບ​ຮວມ​ໃຫ້​ເຂົາ​ເຈົ້າ​ເປັນ sprite - ຊໍ່​ຂອງ​ຮູບ​ພາບ​ໃນ​ໄຟລ​໌​ຫນຶ່ງ​ທີ່​ໃຊ້ CSS ເພື່ອ​ຈັດ​ຕໍາ​ແຫນ່ງ​ຮູບ​ພາບ​ທີ່​ມີ background-position. ນີ້ແມ່ນວິທີການດຽວກັນທີ່ພວກເຮົາໃຊ້ໃນ Twitter.com ແລະມັນໄດ້ຜົນດີສໍາລັບພວກເຮົາ.

ຫ້ອງຮຽນໄອຄອນທັງໝົດແມ່ນຖືກນຳໜ້າດ້ວຍ .icon-ການຈັດລຽງ ແລະກຳນົດຂອບເຂດທີ່ຖືກຕ້ອງ, ຄືກັບອົງປະກອບອື່ນໆຂອງພວກເຮົາ. ນີ້ຈະຊ່ວຍຫຼີກເວັ້ນການຂັດແຍ້ງກັບເຄື່ອງມືອື່ນໆ.

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

ວິທີການນໍາໃຊ້

Bootstrap ໃຊ້ <i>ແທັກສໍາລັບທຸກໄອຄອນ, ແຕ່ພວກມັນບໍ່ມີປະເພດກໍລະນີ - ມີພຽງແຕ່ຄໍານໍາຫນ້າທີ່ໃຊ້ຮ່ວມກັນ. ເພື່ອໃຊ້, ໃຫ້ໃສ່ລະຫັດຕໍ່ໄປນີ້ຢູ່ບ່ອນໃດກໍໄດ້:

  1. <i class = "icon-search" ></i>

ຍັງມີຮູບແບບທີ່ມີໃຫ້ສໍາລັບໄອຄອນປີ້ນ (ສີຂາວ), ສ້າງພ້ອມດ້ວຍຊັ້ນຮຽນພິເສດຫນຶ່ງ:

  1. <i class = "icon-search icon-white" ></i>

ມີ 140 ຫ້ອງຮຽນທີ່ຈະເລືອກເອົາຈາກໄອຄອນຂອງທ່ານ. ພຽງແຕ່ເພີ່ມ <i>ແທັກທີ່ມີຊັ້ນຮຽນທີ່ຖືກຕ້ອງແລະທ່ານກໍາລັງຕັ້ງ. ທ່ານສາມາດຊອກຫາລາຍຊື່ເຕັມໃນ sprites.less ຫຼືຢູ່ບ່ອນນີ້ໃນເອກະສານນີ້.

ລະວັງ! ເມື່ອໃຊ້ຂ້າງຂໍ້ຄວາມ, ເຊັ່ນດຽວກັບປຸ່ມ ຫຼືການເຊື່ອມຕໍ່ nav, ໃຫ້ແນ່ໃຈວ່າໃຫ້ຊ່ອງຫວ່າງຫຼັງຈາກ <i>ແທັກເພື່ອໃຫ້ມີຊ່ອງຫວ່າງທີ່ເໝາະສົມ.

ກໍລະນີທີ່ໃຊ້

ໄອຄອນແມ່ນດີຫຼາຍ, ແຕ່ບ່ອນໃດຈະໃຊ້ພວກມັນ? ນີ້ແມ່ນແນວຄວາມຄິດບາງອັນ:

  • ເປັນພາບສໍາລັບການນໍາທາງແຖບຂ້າງຂອງທ່ານ
  • ສໍາ​ລັບ​ການ​ນໍາ​ທາງ icon ຢ່າງ​ດຽວ​ກັນ​
  • ສຳລັບປຸ່ມຕ່າງໆເພື່ອຊ່ວຍບົ່ງບອກຄວາມໝາຍຂອງການກະທຳ
  • ດ້ວຍລິ້ງເພື່ອແບ່ງປັນບໍລິບົດໃນປາຍທາງຂອງຜູ້ໃຊ້

ໂດຍພື້ນຖານແລ້ວ, ທຸກບ່ອນທີ່ທ່ານສາມາດໃສ່ <i>ແທັກ, ທ່ານສາມາດໃສ່ໄອຄອນໄດ້.

ຕົວຢ່າງ

ໃຊ້ພວກມັນຢູ່ໃນປຸ່ມ, ກຸ່ມປຸ່ມສໍາລັບແຖບເຄື່ອງມື, ການນໍາທາງ, ຫຼືການປ້ອນຂໍ້ມູນແບບຟອມ.