ຂະໜາດຕົວພິມ

ຕາໜ່າງຕົວພິມທັງໝົດແມ່ນອີງໃສ່ຕົວແປນ້ອຍສອງອັນໃນໄຟລ໌ 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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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

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>ແທັກສາມາດໃຊ້:

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

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

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

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

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

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

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

ຕົ້ນສະບັບ 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.

ໃນແຖວ

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

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

ຕັນພື້ນຖານ

ໃຊ້ <pre>ສໍາລັບລະຫັດຫຼາຍເສັ້ນ. ໃຫ້ແນ່ໃຈວ່າຈະປ່ຽນ carts ເຂົ້າໄປໃນຕົວອັກສອນ unicode ຂອງເຂົາເຈົ້າສໍາລັບການສະແດງຜົນທີ່ເຫມາະສົມ.

<p>ຕົວຢ່າງຂໍ້ຄວາມທີ່ນີ້...</p>

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

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

Google Prettify

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

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

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

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

<ຕາຕະລາງ>
  <ຫົວ>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

<ຕາຕະລາງ class = "table" > 
  …
</table>

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

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

<table class = "table table-striped" > 
  …
</table>

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

<table class = "table table-bordered" > 
  …
</table>

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

<table class = "table table-condensed" > 
  …
</table>

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

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

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

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

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

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

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

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

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

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

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

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

ດ້ວຍ v2.0, ພວກເຮົາມີຄ່າເລີ່ມຕົ້ນທີ່ອ່ອນກວ່າ ແລະສະຫຼາດກວ່າສຳລັບຮູບແບບແບບຟອມ. ບໍ່ມີເຄື່ອງຫມາຍພິເສດ, ພຽງແຕ່ການຄວບຄຸມແບບຟອມ.

ການ ສະທ້ອນຮູບແບບ WebKit ເລີ່ມຕົ້ນ, ພຽງແຕ່ເພີ່ມ .form-searchສໍາລັບຊ່ອງຄົ້ນຫາແບບມົນພິເສດ.

ວັດສະດຸປ້ອນແມ່ນລະດັບບລັອກເພື່ອເລີ່ມຕົ້ນ. ສໍາລັບ .form-inlineແລະ .form-horizontal, ພວກເຮົາໃຊ້ inline-block.

ມີຫຍັງແດ່

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

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

ຄ່າເລີ່ມຕົ້ນໃໝ່ກັບ v2.0

ເຖິງ v1.4, ຮູບແບບແບບຟອມເລີ່ມຕົ້ນຂອງ Bootstrap ໄດ້ໃຊ້ຮູບແບບແນວນອນ. ດ້ວຍ Bootstrap 2, ພວກເຮົາໄດ້ເອົາຂໍ້ຈໍາກັດນັ້ນອອກເພື່ອໃຫ້ມີຄ່າເລີ່ມຕົ້ນທີ່ສະຫຼາດກວ່າ, ສາມາດຂະຫຍາຍໄດ້ຫຼາຍກວ່າເກົ່າສໍາລັບຮູບແບບໃດກໍ່ຕາມ.

ການອອກແບບໃຫມ່ຂອງລັດຂອງຕົວທ່ອງເວັບ

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

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

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

<ຊຸດຂໍ້ມູນ
  class = "control-group error" >
  …
</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">ຫຼັງອົງປະກອບການປ້ອນຂໍ້ມູນ.

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

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

ສໍາລັບສະມໍແລະແບບຟອມ

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

ໝາຍເຫດ: ປຸ່ມທັງໝົດຕ້ອງລວມເອົາ .btnຊັ້ນ. ຮູບແບບປຸ່ມຄວນຖືກນຳໃຊ້ກັບ ອົງ <button>ປະ <a>ກອບເພື່ອຄວາມສອດຄ່ອງ.

ຫຼາຍຂະໜາດ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ມີຢູ່!

ການປະຕິບັດຂັ້ນຕົ້ນ ການປະຕິບັດ

ການປະຕິບັດຂັ້ນຕົ້ນ ການປະຕິບັດ

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

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

ການປະຕິບັດຂັ້ນຕົ້ນ ການປະຕິບັດ

ການປະຕິບັດຂັ້ນຕົ້ນ ການປະຕິບັດ

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

ໃນ IE9, ພວກເຮົາວາງ gradient ເທິງປຸ່ມທັງຫມົດໃນເງື່ອນໄຂຂອງມຸມມົນຍ້ອນວ່າ IE9 ບໍ່ໄດ້ຕັດສີພື້ນຫຼັງໃສ່ມຸມ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ໂຫຼດຂໍ້ມູນຄືນໃໝ່ ຈ່າຍເງິນ ລຶບ

ຄໍາເຫັນ ການຕັ້ງຄ່າ ຂໍ້​ມູນ​ເພີ່ມ​ເຕີມ