ຂະໜາດຕົວພິມ

ຕາໜ່າງການພິມທັງໝົດແມ່ນອີງໃສ່ຕົວແປ 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 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.

ໃນແຖວ

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

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

ຕັນພື້ນຖານ

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

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

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

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

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

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ຊັ້ນຮຽນ.

ຫມາຍເຫດ: ຕາຕະລາງທີ່ມີເສັ້ນດ່າງໃຊ້ :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, ພວກເຮົາມີຄ່າເລີ່ມຕົ້ນທີ່ອ່ອນກວ່າ ແລະສະຫຼາດກວ່າສຳລັບຮູບແບບແບບຟອມ. ບໍ່ມີເຄື່ອງຫມາຍພິເສດ, ພຽງແຕ່ການຄວບຄຸມແບບຟອມ.

<form class = "ດີ" > 
  <label> ຊື່ປ້າຍກຳ ກັບ </label>
  < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ຂໍ້ຄວາມ" class = "span3" placeholder = "ພິມບາງສິ່ງບາງຢ່າງ…" >   
  <span class = "help-inline" > ຂໍ້ຄວາມຊ່ວຍເຫຼືອທີ່ກ່ຽວຂ້ອງ! </span> 
  <label class = "checkbox" > 
    < input type = "checkbox" > ກວດເບິ່ງຂ້ອຍອອກ 
  </label>
  <button type = "submit" class = "btn" > ສົ່ງ </button>  
</form>

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

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

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

ແບບຟອມໃນແຖວ

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

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  < ປະເພດ input = "ລະຫັດຜ່ານ" class = "input-small" placeholder = "ລະຫັດຜ່ານ" >   
  <button type = "submit" class = "btn" > ໄປ </button>  
</form>

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

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

<form class = "form-horizontal" > 
  <fieldset>
    <legend> ຂໍ້ຄວາມຄວາມຫມາຍ </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ການປ້ອນຂໍ້ຄວາມ </label>  
      <div class = "ການຄວບຄຸມ" > 
        <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > ຂໍ້ຄວາມຊ່ວຍເຫຼືອ </p> 
      </div>
    </div>
  </fieldset>
</form>

ມີຫຍັງແດ່

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

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

ຄ່າເລີ່ມຕົ້ນໃໝ່ກັບ 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>ອົງປະກອບ.

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

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

ຫຼາຍຂະໜາດ

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

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

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

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

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

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

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

ປຸ່ມຫຼັກ ປຸ່ມ

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

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

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

<a class="btn" href=""> ລິ້ງ </a> _ _ _ _ _  
<button class = "btn" type = "submit" >  
  ປຸ່ມ
</button>
<input class = "btn" type = "button"  
         value = "ການປ້ອນຂໍ້ມູນ" >
<input class = "btn" type = "submit"  
         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
• ໄອຄອນປັບຂະໜາດ-ຕັ້ງ
• ໄອຄອນປັບຂະໜາດ-ແນວນອນ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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