ຂະໜາດຕົວພິມ

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

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

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 .

ເພື່ອລວມເອົາ 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.

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

<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>.

ຕົວ ຢ່າງ , <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 ສໍາລັບວິທີການນໍາໃຊ້.

ແທັກ	ລາຍລະອຽດ
<table>	ອົງປະກອບຫໍ່ສໍາລັບການສະແດງຂໍ້ມູນໃນຮູບແບບຕາຕະລາງ
<thead>	ອົງປະກອບບັນຈຸສໍາລັບແຖວສ່ວນຫົວຕາຕະລາງ ( <tr>) ເພື່ອຕິດປ້າຍກຳກັບຖັນຕາຕະລາງ
<tbody>	ອົງປະກອບບັນຈຸສໍາລັບແຖວຕາຕະລາງ ( <tr>) ຢູ່ໃນເນື້ອໃນຂອງຕາຕະລາງ
<tr>	ອົງປະກອບບັນຈຸສໍາລັບຊຸດຂອງຕາລາງຕາຕະລາງ ( <td>ຫຼື <th>) ທີ່ປາກົດຢູ່ໃນແຖວດຽວ
<td>	ຕາລາງຕາຕະລາງເລີ່ມຕົ້ນ
<th>	ຕາຕາລາງພິເສດສຳລັບຖັນ (ຫຼືແຖວ, ຂຶ້ນກັບຂອບເຂດ ແລະການຈັດວາງ) ປ້າຍກຳກັບ ຕ້ອງໃຊ້ພາຍໃນ a<thead>
<caption>	ຄໍາອະທິບາຍຫຼືບົດສະຫຼຸບຂອງສິ່ງທີ່ຕາຕະລາງຖື, ໂດຍສະເພາະທີ່ເປັນປະໂຫຍດສໍາລັບຜູ້ອ່ານຫນ້າຈໍ

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

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

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

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

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

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

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

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

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

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

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ຊື່ຜູ້ໃຊ້
1	ມາກ	ໂອໂຕ	@mdo
	ມາກ	ໂອໂຕ	@getbootstrap
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

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

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

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ຊື່ຜູ້ໃຊ້
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

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

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

	ຊື່​ເຕັມ
#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ຊື່ຜູ້ໃຊ້
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

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

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

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

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

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

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

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

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

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

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

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

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

ຊື່ປ້າຍກຳກັບ

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

ກວດເບິ່ງຂ້ອຍອອກ ສົ່ງ

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

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

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

ຊອກຫາ

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

ແບບຟອມໃນແຖວ

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

ຈື່​ຂ້ອຍ ເຂົ້າ​ສູ່​ລະ​ບົບ

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

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

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

ການປ້ອນຂໍ້ຄວາມ

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

ປ່ອງໝາຍ

ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​

ເລືອກລາຍຊື່

ບາງສິ່ງບາງຢ່າງ 2 3 4 5

Multicon-ເລືອກ

1 2 3 4 5

ການປ້ອນຂໍ້ມູນໄຟລ໌

Textarea

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ ຍົກເລີກ

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

ອີງຕາມຮູບແບບຕົວຢ່າງຂ້າງເທິງ, ນີ້ແມ່ນເຄື່ອງຫມາຍທີ່ກ່ຽວຂ້ອງກັບການປ້ອນຂໍ້ມູນແລະກຸ່ມຄວບຄຸມທໍາອິດ. 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>

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

---

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

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

<ຊຸດຂໍ້ມູນ
  class = "control-group error" >
  …
</fieldset>

ການປ້ອນຂໍ້ມູນແບບສຸມໃສ່

ການປ້ອນຂໍ້ມູນທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້

ບາງມູນຄ່າຢູ່ທີ່ນີ້

ປິດການປ້ອນຂໍ້ມູນ

ປິດກ່ອງກາໝາຍ

ນີ້​ແມ່ນ​ປ່ອງ​ທີ່​ພິ​ການ​

ປ້ອນຂໍ້ມູນພ້ອມຄຳເຕືອນ

ມີບາງຢ່າງຜິດພາດເກີດຂຶ້ນ

ການປ້ອນຂໍ້ມູນຜິດພາດ

ກະລຸນາແກ້ໄຂຂໍ້ຜິດພາດ

ການປ້ອນຂໍ້ມູນດ້ວຍຜົນສຳເລັດ

ວ້າວ!

ເລືອກດ້ວຍຄວາມສໍາເລັດ

1 2 3 4 5 ວ້າວ!

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ ຍົກເລີກ

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">ຫຼັງອົງປະກອບການປ້ອນຂໍ້ມູນ.

ຂະໜາດຕາຕະລາງ

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

ຂະໜາດສຳຮອງ

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

ຂໍ້ຄວາມລ່ວງໜ້າ

@

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

ຂໍ້ຄວາມຕໍ່ທ້າຍ

.00

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

ຕື່ມ​ໃສ່​ແລະ​ນໍາ​ຫນ້າ​

$ .00

ຕື່ມໃສ່ດ້ວຍປຸ່ມ

ໄປ!

ສອງປຸ່ມຕໍ່ທ້າຍ

ຊອກຫາ ທາງເລືອກ

ກ່ອງໝາຍໃນແຖວ

1 2 3

ປ່ອງໝາຍ

ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​ ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​ ທາງ​ເລືອກ​ທີ່​ສາມ​ສາ​ມາດ—ແມ່ນ​ແລ້ວ, ທ່ານ​ເດົາ​ມັນ—ຍັງ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ແບບ​ຟອມ

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

ປຸ່ມວິທະຍຸ

ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​ ທາງ​ເລືອກ​ທີ​ສອງ​ສາ​ມາດ​ເປັນ​ບາງ​ຢ່າງ​ອື່ນ​ແລະ​ການ​ເລືອກ​ມັນ​ຈະ​ຍົກ​ເລີກ​ການ​ເລືອກ​ທາງ​ເລືອກ​ຫນຶ່ງ​

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ ຍົກເລີກ

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

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

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

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

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

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

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

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

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

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

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

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

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

ທີ່​ຢູ່​ອີ​ເມວ