Bootstrap

CSS ພື້ນຖານ

ອົງ​ປະ​ກອບ HTML ພື້ນ​ຖານ​ທີ່​ມີ​ຮູບ​ແບບ​ແລະ​ການ​ປັບ​ປຸງ​ດ້ວຍ​ຊັ້ນ​ຮຽນ​ທີ່​ຂະ​ຫຍາຍ​ຕົວ​ໄດ້​.

ຕົວພິມ

ຫົວຂໍ້

ຫົວຂໍ້ HTML ທັງຫມົດ, <h1>ໂດຍຜ່ານ <h6>ແມ່ນມີຢູ່.

h1. ຫົວຂໍ້ 1

h2. ຫົວຂໍ້ 2

h3. ຫົວຂໍ້ 3

h4. ຫົວຂໍ້ 4

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

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

ຄ່າເລີ່ມຕົ້ນທົ່ວໂລກ ຂອງ Bootstrap font-sizeແມ່ນ 14px , ມີ 20px . ນີ້ຖືກນໍາໃຊ້ກັບ ວັກແລະທຸກວັກ. ນອກຈາກນັ້ນ, (ວັກ) ໄດ້ຮັບຂອບລຸ່ມຂອງເຄິ່ງຫນຶ່ງຂອງເສັ້ນຄວາມສູງ (10px ຕາມຄ່າເລີ່ມຕົ້ນ).line-height<body><p>

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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

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

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

<p class = "le" > ... </p>

ສ້າງດ້ວຍຫນ້ອຍ

ຂະໜາດຕົວພິມແມ່ນອີງໃສ່ສອງຕົວແປ LESS ໃນ variables.less : @baseFontSizeແລະ @baseLineHeight. ອັນທໍາອິດແມ່ນຂະຫນາດຕົວອັກສອນພື້ນຖານທີ່ໃຊ້ຕະຫຼອດແລະທີສອງແມ່ນເສັ້ນພື້ນຖານ - ຄວາມສູງ. ພວກເຮົາໃຊ້ຕົວແປເຫຼົ່ານັ້ນ ແລະບາງເລກຄະນິດສາດທີ່ງ່າຍດາຍເພື່ອສ້າງຂອບ, paddings, ແລະ line-heights ຂອງທຸກປະເພດຂອງພວກເຮົາ ແລະອື່ນໆອີກ. ປັບແຕ່ງພວກມັນແລະ Bootstrap ປັບຕົວ.

ເນັ້ນໜັກ

ໃຊ້ແທໍກເນັ້ນໜັກເລີ່ມຕົ້ນຂອງ HTML ດ້ວຍຮູບແບບທີ່ມີນ້ຳໜັກເບົາ.

<small>

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

ເສັ້ນຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍເຖິງການພິມດີ.

<p> <small> ຂໍ້​ຄວາມ​ນີ້​ໝາຍ​ຄວາມ​ວ່າ​ຈະ​ຖືກ​ຖື​ເປັນ​ການ​ພິມ​ດີ. </small> </p>

ກ້າຫານ

ສໍາລັບການເນັ້ນຫນັກໃສ່ຂໍ້ຄວາມສັ້ນໆທີ່ມີນ້ໍາຫນັກຕົວອັກສອນທີ່ຫນັກກວ່າ.

ຫຍໍ້ຂອງຂໍ້ຄວາມຕໍ່ໄປນີ້ຖືກສະ ແດງເປັນຕົວໜັງສືໜາ .

<strong> ແປເປັນຂໍ້ຄວາມຕົວໜາ </strong>

ໂຕອຽງ

ສໍາລັບການເນັ້ນຫຍໍ້ຫນ້າຂອງຂໍ້ຄວາມທີ່ມີຕົວອຽງ.

ຫຍໍ້ຂອງຂໍ້ຄວາມຕໍ່ໄປນີ້ຖືກສະ ແດງເປັນຂໍ້ຄວາມຕົວອຽງ .

<em> ແປເປັນຂໍ້ຄວາມຕົວອຽງ </em>

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

ຫ້ອງຮຽນຈັດຮຽງ

ການຈັດຮຽງຂໍ້ຄວາມຄືນໃໝ່ໄດ້ຢ່າງງ່າຍດາຍກັບອົງປະກອບດ້ວຍຫ້ອງຮຽນການຈັດຮຽງຂໍ້ຄວາມ.

ຂໍ້ຄວາມຈັດຮຽງຊ້າຍ.

ຂໍ້ຄວາມຈັດຮຽງກາງ.

ຂໍ້ຄວາມຈັດຮຽງຂວາ.

  1. <p class = "text-left" > ຂໍ້ຄວາມຈັດຮຽງຊ້າຍ. </p> 
  2. <p class = "text-center" > ຂໍ້ຄວາມຈັດຮຽງກາງ. </p> 
  3. <p class = "text-right" > ຂໍ້ຄວາມຈັດຮຽງຂວາ. </p>

ຫ້ອງຮຽນເນັ້ນ

ບົ່ງບອກຄວາມໝາຍຜ່ານສີດ້ວຍມືຂອງຫ້ອງຮຽນປະໂຫຍດທີ່ເນັ້ນໃສ່.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

ຕົວຫຍໍ້

ການປະຕິບັດແບບສະໄຕລ໌ຂອງອົງປະກອບຂອງ HTML <abbr>ສໍາລັບຕົວຫຍໍ້ແລະຕົວຫຍໍ້ເພື່ອສະແດງສະບັບທີ່ຂະຫຍາຍຢູ່ໃນ hover. ຕົວຫຍໍ້ທີ່ມີ titleຄຸນລັກສະນະມີເສັ້ນຂອບລຸ່ມຈຸດອ່ອນ ແລະຕົວຊີ້ຊ່ວຍໃນການເລື່ອນ, ໃຫ້ບໍລິບົດເພີ່ມເຕີມໃນການເລື່ອນ.

<abbr>

ສໍາລັບຂໍ້ຄວາມທີ່ຂະຫຍາຍຢູ່ເທິງຍາວຂອງຕົວຫຍໍ້, ໃຫ້ໃສ່ titleຄຸນລັກສະນະ.

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

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

ຕື່ມ .initialismໃສ່ຕົວຫຍໍ້ສໍາລັບຂະຫນາດຕົວອັກສອນທີ່ນ້ອຍກວ່າເລັກນ້ອຍ.

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

<abbr title = "HyperText Markup Language" class = "ເບື້ອງຕົ້ນ" > HTML </abbr>

ທີ່ຢູ່

ນໍາສະເຫນີຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດຫຼືອົງການຈັດຕັ້ງທັງຫມົດຂອງການເຮັດວຽກ.

<address>

ຮັກສາການຈັດຮູບແບບໂດຍການສິ້ນສຸດທຸກແຖວດ້ວຍ <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ຊື່ເຕັມ
[email protected] 
  1. <ທີ່ຢູ່>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "ໂທລະສັບ" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <ທີ່ຢູ່>
  9.   <strong> ຊື່ເຕັມ </strong><br>
  10.   <a href="mailto:#"> [email protected] </a> _ _ _ 
  11. </address>

Blockquotes

ສໍາລັບການອ້າງອີງຕັນຂອງເນື້ອຫາຈາກແຫຼ່ງອື່ນພາຍໃນເອກະສານຂອງທ່ານ.

ຂໍ້ຄວາມບລັອກເລີ່ມຕົ້ນ

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

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

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  3. </blockquote>

ຕົວເລືອກ blockquote

ການປ່ຽນແປງຮູບແບບ ແລະເນື້ອຫາສຳລັບການປ່ຽນແປງແບບງ່າຍໆໃນ blockquote ມາດຕະຖານ.

ການຕັ້ງຊື່ແຫຼ່ງ

ເພີ່ມ <small>ແທັກເພື່ອລະບຸແຫຼ່ງທີ່ມາ. ຫໍ່ຊື່ຂອງແຫຼ່ງທີ່ເຮັດວຽກຢູ່ໃນ <cite>.

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

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  3.   <small> ຄົນທີ່ມີຊື່ສຽງ <cite title = "ຊື່ແຫຼ່ງ" > ຊື່ແຫຼ່ງ ທີ່ມາ </cite></small> 
  4. </blockquote>

ຈໍສະແດງຜົນສະຫຼັບ

ໃຊ້ .pull-rightສໍາລັບການອ້າງອິງແບບເລື່ອນ, ຈັດຮຽງຂວາ.

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

ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່ ແຫຼ່ງ 
  1. <blockquote class = "ດຶງ-ຂວາ" > 
  2.   ...
  3. </blockquote>

ລາຍການ

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

ບັນຊີລາຍຊື່ຂອງລາຍການທີ່ຄໍາສັ່ງບໍ່ ສໍາ ຄັນຢ່າງຊັດເຈນ.

  • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

ສັ່ງແລ້ວ

ບັນຊີລາຍຊື່ຂອງລາຍການທີ່ຄໍາສັ່ງ ບໍ່ ສໍາຄັນຢ່າງຊັດເຈນ.

  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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

ບໍ່ມີຮູບແບບ

ເອົາ​ຄ່າ​ເລີ່ມ​ຕົ້ນ list-style​ແລະ padding ປະ​ໄວ້​ໃນ​ລາຍ​ການ​ລາຍ​ການ (ເດັກ​ທັນ​ທີ​ທັນ​ໃດ​ເທົ່າ​ນັ້ນ​)​.

  • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

ໃນແຖວ

ວາງລາຍການລາຍຊື່ທັງໝົດຢູ່ໃນແຖວດຽວ inline-blockແລະບາງແຜ່ນບາງໆ.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

ລາຍລະອຽດ

ບັນຊີລາຍຊື່ຂອງຂໍ້ກໍານົດທີ່ມີຄໍາອະທິບາຍທີ່ກ່ຽວຂ້ອງຂອງພວກເຂົາ.

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

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

ເຮັດໃຫ້ຂໍ້ກໍານົດແລະຄໍາອະທິບາຍຢູ່ໃນ <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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

ລະຫັດ

ໃນແຖວ

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

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

ຕັນພື້ນຖານ

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

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

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

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

ຕາຕະລາງ

ຮູບແບບເລີ່ມຕົ້ນ

ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ພື້ນຖານ - padding ແສງສະຫວ່າງແລະພຽງແຕ່ແບ່ງອອກຕາມລວງນອນ - ເພີ່ມຊັ້ນພື້ນຖານ .tableກັບໃດໆ <table>.

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

ຫ້ອງຮຽນທາງເລືອກ

ເພີ່ມຊັ້ນຮຽນຕໍ່ໄປນີ້ໃສ່ຊັ້ນຮຽນ .tableພື້ນຖານ.

.table-striped

ເພີ່ມເສັ້ນດ່າງມ້າລາຍໃສ່ແຖວຕາຕະລາງໃດນຶ່ງພາຍໃນ <tbody>ຕົວ :nth-childເລືອກ CSS (ບໍ່ມີຢູ່ໃນ IE7-8).

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

.table-bordered

ເພີ່ມຂອບແລະມຸມມົນໃສ່ຕາຕະລາງ.

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

.table-hover

ເປີດໃຊ້ສະຖານະ hover ໃນແຖວຕາຕະລາງພາຍໃນ <tbody>.

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

.table-condensed

ເຮັດໃຫ້ຕາຕະລາງຫນາແຫນ້ນຂຶ້ນໂດຍການຕັດຊ່ອງຫວ່າງຂອງຈຸລັງເປັນເຄິ່ງຫນຶ່ງ.

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

ຫ້ອງຮຽນທາງເລືອກ

ໃຊ້ຫ້ອງຮຽນບໍລິບົດເພື່ອສີແຖວຕາຕະລາງ.

ຫ້ອງຮຽນ ລາຍລະອຽດ
.success ຊີ້ໃຫ້ເຫັນການປະຕິບັດທີ່ປະສົບຜົນສໍາເລັດຫຼືໃນທາງບວກ.
.error ຊີ້ບອກເຖິງການກະທຳທີ່ເປັນອັນຕະລາຍ ຫຼືອາດເປັນໄປໃນທາງລົບ.
.warning ຊີ້ໃຫ້ເຫັນເຖິງການເຕືອນໄພທີ່ອາດຈະຕ້ອງການຄວາມສົນໃຈ.
.info ໃຊ້ເປັນທາງເລືອກກັບຮູບແບບເລີ່ມຕົ້ນ.
# ຜະລິດຕະພັນ ຊໍາລະແລ້ວ ສະຖານະ
1 TB - ປະຈໍາເດືອນ 01/04/2012 ອະນຸມັດ
2 TB - ປະຈໍາເດືອນ 02/04/2012 ປະຕິເສດ
3 TB - ປະຈໍາເດືອນ 03/04/2012 ລໍຖ້າຢູ່
4 TB - ປະຈໍາເດືອນ 04/04/2012 ໂທຫາເພື່ອຢືນຢັນ 
  1. ...
  2.   < tr class = "ຄວາມສໍາເລັດ" >
  3.     <td> 1 < /td>
  4.     <td>TB - ປະຈໍາເດືອນ</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>ອະນຸມັດແລ້ວ</ td >
  7.   </ tr >
  8. ...

ສະ​ຫນັບ​ສະ​ຫນູນ​ເຄື່ອງ​ຫມາຍ​ຕາ​ຕະ​ລາງ​

ບັນຊີລາຍຊື່ຂອງອົງປະກອບ HTML ຕາຕະລາງທີ່ສະຫນັບສະຫນູນແລະວິທີທີ່ພວກເຂົາຄວນຈະຖືກນໍາໃຊ້.

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

ແບບຟອມ

ຮູບແບບເລີ່ມຕົ້ນ

ການຄວບຄຸມແບບຟອມສ່ວນບຸກຄົນໄດ້ຮັບຄໍເຕົ້າໄຂ່ທີ່, ແຕ່ບໍ່ມີຫ້ອງຮຽນພື້ນຖານທີ່ຕ້ອງການ <form>ຫຼືການປ່ຽນແປງຂະຫນາດໃຫຍ່ໃນເຄື່ອງຫມາຍ. ຜົນໄດ້ຮັບໃນປ້າຍຊື່ແບບ stacked, ຈັດຮຽງຊ້າຍຢູ່ເທິງສຸດຂອງການຄວບຄຸມແບບຟອມ.

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

ການຈັດວາງທາງເລືອກ

ລວມມີ Bootstrap ແມ່ນສາມຮູບແບບທາງເລືອກສໍາລັບກໍລະນີການນໍາໃຊ້ທົ່ວໄປ.

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

ຕື່ມ .form-searchໃສ່ແບບຟອມ ແລະ .search-queryໃສ່ <input>ການປ້ອນຂໍ້ຄວາມທີ່ມີຮູບກົມພິເສດ.

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

ແບບຟອມໃນແຖວ

ເພີ່ມ .form-inlineສໍາລັບປ້າຍທີ່ຈັດຮຽງຊ້າຍແລະຕົວຄວບຄຸມ inline-block ສໍາລັບຮູບແບບທີ່ຫນາແຫນ້ນ.

  1. <form class = "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>

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

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

  • ຕື່ມ .form-horizontalໃສ່ແບບຟອມ
  • ຫໍ່ປ້າຍແລະການຄວບຄຸມໃນ.control-group
  • ເພີ່ມ .control-labelໃສ່ປ້າຍຊື່
  • ຫໍ່ການຄວບຄຸມທີ່ກ່ຽວຂ້ອງ .controlsເພື່ອຄວາມສອດຄ່ອງທີ່ເຫມາະສົມ
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > ອີເມວ </label>  
  4.     <div class = "ການຄວບຄຸມ" > 
  5.       < input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > ລະຫັດຜ່ານ </label>  
  10.     <div class = "ການຄວບຄຸມ" > 
  11.       < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ລະຫັດຜ່ານ" id = "inputPassword" placeholder = "ລະຫັດຜ່ານ" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "ການຄວບຄຸມ" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > ຈື່ຂ້ອຍໄວ້ 
  18.       </label>
  19.       <button type = "submit" class = "btn" > ເຂົ້າສູ່ລະບົບ </button>  
  20.     </div>
  21.   </div>
  22. </form>

ຮອງຮັບການຄວບຄຸມແບບຟອມ

ຕົວຢ່າງຂອງການຄວບຄຸມແບບຟອມມາດຕະຖານທີ່ສະຫນັບສະຫນູນໃນຮູບແບບແບບຟອມຕົວຢ່າງ.

ວັດສະດຸປ້ອນ

ການຄວບຄຸມແບບຟອມທົ່ວໄປທີ່ສຸດ, ຊ່ອງໃສ່ຂໍ້ຄວາມ. ປະກອບມີການສະຫນັບສະຫນູນສໍາລັບທຸກປະເພດ HTML5: ຂໍ້ຄວາມ, ລະຫັດຜ່ານ, ວັນທີ, ວັນທີ - ທ້ອງຖິ່ນ, ວັນທີ, ເດືອນ, ເວລາ, ອາທິດ, ຕົວເລກ, ອີເມວ, url, ຊອກຫາ, ໂທ, ແລະສີ.

ຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ທີ່ກໍານົດໄວ້ typeຕະຫຼອດເວລາ.

  1. <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" placeholder = "ການປ້ອນຂໍ້ຄວາມ" >

Textarea

ການຄວບຄຸມແບບຟອມທີ່ຮອງຮັບຂໍ້ຄວາມຫຼາຍແຖວ. ປ່ຽນ rowsຄຸນສົມບັດຕາມຄວາມຈໍາເປັນ.

  1. <textarea rows = "3" ></textarea>

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

checkboxes ແມ່ນສໍາລັບການເລືອກຫນຶ່ງຫຼືຫຼາຍທາງເລືອກໃນບັນຊີລາຍຊື່ໃນຂະນະທີ່ວິທະຍຸແມ່ນສໍາລັບການເລືອກທາງເລືອກຫນຶ່ງຈາກຈໍານວນຫຼາຍ.

ຄ່າເລີ່ມຕົ້ນ (ວາງຊ້ອນກັນ)


  1. <label class = "checkbox" > 
  2.   < ປະເພດ input = "checkbox" value = "" >  
  3.   ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
  4. </label>
  5.  
  6. <label class = "ວິທະຍຸ" > 
  7.   < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ວິທະຍຸ" name = "optionsRadios" id = "optionsRadios1" ຄ່າ = "ທາງເລືອກ1" ຖືກໝາຍ ໄວ້ >     
  8.   ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
  9. </label>
  10. <label class = "ວິທະຍຸ" > 
  11.   < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ວິທະຍຸ" name = "ທາງເລືອກRadios" id = "ທາງເລືອກRadios2" ຄ່າ = "ທາງເລືອກ2" >    
  12.   ທາງ​ເລືອກ​ທີ​ສອງ​ສາ​ມາດ​ເປັນ​ບາງ​ຢ່າງ​ອື່ນ​ແລະ​ການ​ເລືອກ​ມັນ​ຈະ​ຍົກ​ເລີກ​ການ​ເລືອກ​ທາງ​ເລືອກ​ຫນຶ່ງ​
  13. </label>

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

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

  1. <label class = "checkbox inline" > 
  2.   < ປະເພດ ປ້ອນ = "ກ່ອງກວດ" id = "inlineCheckbox1" ຄ່າ = "ທາງເລືອກ1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   < ປະເພດ ປ້ອນ = "ກ່ອງກວດ" id = "inlineCheckbox2" ຄ່າ = "ທາງເລືອກ2 " > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   < ປະເພດ ປ້ອນ = "ກ່ອງກວດ" id = "inlineCheckbox3" ຄ່າ = "ທາງເລືອກ3" > 3   
  9. </label>

ເລືອກ

ໃຊ້ຕົວເລືອກເລີ່ມຕົ້ນ ຫຼືລະບຸ a multiple="multiple"ເພື່ອສະແດງຫຼາຍທາງເລືອກໃນເວລາດຽວກັນ.


  1. <ເລືອກ>
  2.   <ທາງເລືອກ> 1 </option>
  3.   <ທາງເລືອກ> 2 </option>
  4.   <ທາງເລືອກ> 3 </option>
  5.   <ທາງເລືອກ> 4 </option>
  6.   <ທາງເລືອກ> 5 </option>
  7. </select>
  8.  
  9. <ເລືອກ ຫຼາຍ = "ຫຼາຍ" > 
  10.   <ທາງເລືອກ> 1 </option>
  11.   <ທາງເລືອກ> 2 </option>
  12.   <ທາງເລືອກ> 3 </option>
  13.   <ທາງເລືອກ> 4 </option>
  14.   <ທາງເລືອກ> 5 </option>
  15. </select>

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

ເພີ່ມຢູ່ເທິງສຸດຂອງການຄວບຄຸມຕົວທ່ອງເວັບທີ່ມີຢູ່, Bootstrap ປະກອບມີອົງປະກອບແບບຟອມທີ່ເປັນປະໂຫຍດອື່ນໆ.

ການປ້ອນຂໍ້ມູນລ່ວງໜ້າ ແລະຕໍ່ທ້າຍ

ເພີ່ມຂໍ້ຄວາມ ຫຼືປຸ່ມກ່ອນ ຫຼືຫຼັງການປ້ອນຂໍ້ມູນໃສ່ຂໍ້ຄວາມ. ຈື່ໄວ້ວ່າ selectອົງປະກອບບໍ່ຖືກຮອງຮັບຢູ່ທີ່ນີ້.

ຕົວເລືອກເລີ່ມຕົ້ນ

ຫໍ່ an .add-onແລະ an inputກັບຫນຶ່ງໃນສອງຫ້ອງຮຽນເພື່ອ prepend ຫຼືຕື່ມຂໍ້ມູນໃສ່ກັບ input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   < input class = "span2" id = "prependedInput" type = "text" placeholder = "ຊື່ຜູ້ໃຊ້" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   < input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

ປະສົມປະສານ

ໃຊ້ທັງສອງຊັ້ນຮຽນ ແລະສອງຕົວຢ່າງ .add-onເພື່ອນຳໜ້າ ແລະຕໍ່ທ້າຍການປ້ອນຂໍ້ມູນ.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   < input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

ປຸ່ມແທນຂໍ້ຄວາມ

ແທນ​ທີ່​ຈະ​ເປັນ <span>​ທີ່​ມີ​ຂໍ້​ຄວາມ​, ໃຊ້ a .btnເພື່ອ​ຕິດ​ປຸ່ມ (ຫຼື​ສອງ​) ກັບ​ການ​ປ້ອນ​ຂໍ້​ມູນ​.

  1. <div class = "input-append" > 
  2.   < input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > ໄປ! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   < input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > ຄົ້ນຫາ </button>  
  4.   <button class = "btn" type = "button" > ຕົວເລືອກ </button>  
  5. </div>

ປຸ່ມເລື່ອນລົງ

  1. <div class = "input-append" > 
  2.   < input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       ການປະຕິບັດ
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ການປະຕິບັດ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ການປະຕິບັດ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       ການປະຕິບັດ
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

ແບ່ງກຸ່ມແບບເລື່ອນລົງ

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ຂໍ້ຄວາມ" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < ປະເພດ ການປ້ອນຂໍ້ມູນ = "ຂໍ້ຄວາມ" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

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

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > ຄົ້ນຫາ </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > ຄົ້ນຫາ </button>  
  8.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "span2 search-query" >  
  9.   </div>
  10. </form>

ຄວບຄຸມຂະໜາດ

ໃຊ້ຊັ້ນຮຽນຂະຫນາດທີ່ສົມທຽບເຊັ່ນ .input-largeຫຼືກົງກັບວັດສະດຸປ້ອນຂອງທ່ານກັບຂະຫນາດຖັນຕາຂ່າຍໄຟຟ້າໂດຍໃຊ້ .span*ຊັ້ນຮຽນ.

ຂັດຂວາງການປ້ອນຂໍ້ມູນລະດັບ

ເຮັດໃຫ້ອົງປະກອບໃດຫນຶ່ງ <input>ຫຼື <textarea>ປະຕິບັດຕົວຄືກັບອົງປະກອບລະດັບຕັນ.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

ຂະໜາດທີ່ສົມທຽບ

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ລະວັງ!ໃນຮຸ່ນໃນອະນາຄົດ, ພວກເຮົາຈະປ່ຽນແປງການນໍາໃຊ້ຫ້ອງຮຽນການປ້ອນຂໍ້ມູນທີ່ກ່ຽວຂ້ອງເຫຼົ່ານີ້ເພື່ອໃຫ້ກົງກັບຂະຫນາດປຸ່ມຂອງພວກເຮົາ. ຕົວຢ່າງ, .input-largeຈະເພີ່ມ padding ແລະ font-size ຂອງ input.

ຂະໜາດຕາຂ່າຍ

ໃຊ້ .span1ເພື່ອ .span12ສໍາລັບການປ້ອນຂໍ້ມູນທີ່ກົງກັບຂະຫນາດດຽວກັນຂອງຖັນຕາຂ່າຍໄຟຟ້າ.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <ເລືອກ class = "span1" > 
  5.   ...
  6. </select>
  7. <ເລືອກ class = "span2" > 
  8.   ...
  9. </select>
  10. <ເລືອກ class = "span3" > 
  11.   ...
  12. </select>

ສຳລັບການປ້ອນຂໍ້ມູນຕາໜ່າງຫຼາຍອັນຕໍ່ແຖວ, ໃຫ້ໃຊ້ຫ້ອງ .controls-rowຕົວແກ້ໄຂສຳລັບໄລຍະຫ່າງທີ່ເໝາະສົມ . ມັນເລື່ອນວັດສະດຸປ້ອນເພື່ອຍຸບພື້ນທີ່ສີຂາວ, ກໍານົດຂອບທີ່ເຫມາະສົມ, ແລະລຶບລ້າງການເລື່ອນ.

  1. <div class = "ການຄວບຄຸມ" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

ວັດສະດຸປ້ອນທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້

ນໍາສະເຫນີຂໍ້ມູນໃນຮູບແບບທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້ໂດຍບໍ່ມີການນໍາໃຊ້ເຄື່ອງຫມາຍແບບຟອມຕົວຈິງ.

ບາງມູນຄ່າຢູ່ທີ່ນີ້ 
  1. <span class = "input-xlarge uneditable-input" > ບາງຄ່າຢູ່ທີ່ນີ້ </span>

ການປະຕິບັດແບບຟອມ

ສິ້ນສຸດແບບຟອມດ້ວຍກຸ່ມຄຳສັ່ງ (ປຸ່ມຕ່າງໆ). ເມື່ອວາງໄວ້ພາຍໃນ .form-actions, ປຸ່ມຕ່າງໆຈະຫຍໍ້ໜ້າອັດຕະໂນມັດເພື່ອເຂົ້າແຖວກັບຕົວຄວບຄຸມແບບຟອມ.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > ບັນທຶກການປ່ຽນແປງ </button>  
  3.   <button type = "button" class = "btn" > ຍົກເລີກ </button>  
  4. </div>

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

ສະຫນັບສະຫນູນລະດັບ inline ແລະ block ສໍາລັບຂໍ້ຄວາມຊ່ວຍເຫຼືອທີ່ປາກົດຢູ່ໃນການຄວບຄຸມແບບຟອມ.

ຊ່ວຍເຫຼືອໃນແຖວ

ຂໍ້ຄວາມຊ່ວຍເຫຼືອໃນແຖວ 
  1. <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" ><span class = "help-inline" > ຂໍ້ຄວາມຊ່ວຍເຫຼືອ ໃນແຖວ </span>

ຂັດຂວາງການຊ່ວຍເຫຼືອ

ຂໍ້ຄວາມຊ່ວຍເຫຼືອທີ່ຍາວກວ່າທີ່ແຕກອອກໄປຫາແຖວໃໝ່ ແລະອາດຈະຂະຫຍາຍອອກໄປອີກແຖວໜຶ່ງ. 
  1. <input type = "text" ><span class = "help-block" > ບລັອກຂອງຂໍ້ຄວາມຊ່ວຍເຫຼືອທີ່ຍາວກວ່າທີ່ແຕກຂຶ້ນເປັນແຖວໃໝ່ ແລະອາດຈະຂະຫຍາຍອອກໄປອີກໜຶ່ງແຖວ. </span>

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

ໃຫ້ຄໍາຄຶດຄໍາເຫັນກັບຜູ້ໃຊ້ຫຼືຜູ້ເຂົ້າຊົມທີ່ມີຂໍ້ສະເຫນີແນະພື້ນຖານກ່ຽວກັບການຄວບຄຸມແບບຟອມແລະປ້າຍຊື່.

ຈຸດສຸມການປ້ອນຂໍ້ມູນ

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

  1. < input class = "input-xlarge" id = "focusedInput" type = "text" value = "ນີ້ແມ່ນເນັ້ນ..." >

ວັດສະດຸປ້ອນບໍ່ຖືກຕ້ອງ

ການປ້ອນຂໍ້ມູນຮູບແບບຜ່ານການເຮັດວຽກຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນດ້ວຍ :invalid. ລະບຸ a type, ເພີ່ມ requiredຄຸນລັກສະນະຖ້າຊ່ອງຂໍ້ມູນບໍ່ແມ່ນທາງເລືອກ, ແລະ (ຖ້າມີ) ລະບຸ a pattern.

ອັນນີ້ບໍ່ສາມາດໃຊ້ໄດ້ໃນເວີຊັນຂອງ Internet Explorer 7-9 ເນື່ອງຈາກຂາດການຮອງຮັບຕົວເລືອກ CSS pseudo.

  1. < input class = "span3" type = "email" ຕ້ອງການ >

ປິດການນຳໃຊ້ວັດສະດຸປ້ອນ

ເພີ່ມ disabledຄຸນສົມບັດໃສ່ການປ້ອນຂໍ້ມູນເພື່ອປ້ອງກັນການປ້ອນຂໍ້ມູນຂອງຜູ້ໃຊ້ ແລະກະຕຸ້ນໃຫ້ມີລັກສະນະທີ່ແຕກຕ່າງເລັກນ້ອຍ.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ປິດການປ້ອນຂໍ້ມູນຢູ່ທີ່ນີ້..." ປິດໃຊ້ງານ >

ສະຖານະການກວດສອບ

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

ມີບາງຢ່າງຜິດພາດເກີດຂຶ້ນ
ກະລຸນາແກ້ໄຂຂໍ້ຜິດພາດ
ຊື່ຜູ້ໃຊ້ຖືກປະຕິບັດ
ວ້າວ! 
  1. <div class = "control-group warning" > 
  2.   <label class = "control-label" for = "inputWarning" > ການປ້ອນຂໍ້ມູນພ້ອມຄຳເຕືອນ </label>  
  3.   <div class = "ການຄວບຄຸມ" > 
  4.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" id = "inputWarning" >  
  5.     <span class = "help-inline" > ມີບາງຢ່າງຜິດພາດເກີດຂຶ້ນ </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > ການປ້ອນຂໍ້ມູນດ້ວຍຄວາມຜິດພາດ </label>  
  11.   <div class = "ການຄວບຄຸມ" > 
  12.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" id = "inputError" >  
  13.     <span class = "help-inline" > ກະລຸນາແກ້ໄຂຂໍ້ຜິດພາດ </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "ຂໍ້ມູນກຸ່ມຄວບຄຸມ" > 
  18.   <label class = "control-label" for = "inputInfo" > ການປ້ອນຂໍ້ມູນດ້ວຍຂໍ້ມູນ </label>  
  19.   <div class = "ການຄວບຄຸມ" > 
  20.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" id = "inputInfo" >  
  21.     <span class = "help-inline" > ຊື່ຜູ້ໃຊ້ຖືກເອົາໄປກ່ອນແລ້ວ </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > ການປ້ອນຂໍ້ມູນດ້ວຍຄວາມສໍາເລັດ </label>  
  27.   <div class = "ການຄວບຄຸມ" > 
  28.     <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

ປຸ່ມ

ປຸ່ມເລີ່ມຕົ້ນ

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

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

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

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

ຂະໜາດປຸ່ມ

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > ປຸ່ມໃຫຍ່ </button>  
  3.   <button class = "btn btn-large" type = "button" > ປຸ່ມໃຫຍ່ </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > ປຸ່ມເລີ່ມ ຕົ້ນ </button>  
  7.   <button class = "btn" type = "button" > ປຸ່ມເລີ່ມຕົ້ນ </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > ປຸ່ມນ້ອຍ </button>  
  11.   <button class = "btn btn-small" type = "button" > ປຸ່ມນ້ອຍ </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > ປຸ່ມມິນິ </button>  
  15.   <button class = "btn btn-mini" type = "button" > ປຸ່ມນ້ອຍ </button>  
  16. </p>

ສ້າງປຸ່ມລະດັບບລັອກ—ເຊິ່ງຂະຫຍາຍຄວາມກວ້າງເຕັມຂອງພໍ່ແມ່—ໂດຍການເພີ່ມ .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ປຸ່ມລະດັບບລັອກ </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > ປຸ່ມລະດັບບລັອກ </button>

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

ເຮັດ​ໃຫ້​ປຸ່ມ​ເບິ່ງ​ບໍ່​ສາ​ມາດ​ຄລິກ​ໄດ້​ໂດຍ​ການ​ລົບ​ໃຫ້​ເຂົາ​ເຈົ້າ​ກັບ​ຄືນ​ໄປ​ບ່ອນ 50%.

ອົງປະກອບສະມໍ

ເພີ່ມ .disabledຫ້ອງຮຽນໃສ່ <a>ປຸ່ມຕ່າງໆ.

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

  1. <a href="#" class="btn btn-large btn-primary disabled"> ລິ້ງ ຫຼັກ </a> _  
  2. <a href="#" class="btn btn-large disabled"> ລິ້ງ </a> _ _ _

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

ອົງປະກອບປຸ່ມ

ເພີ່ມ disabledຄຸນສົມບັດໃສ່ <button>ປຸ່ມຕ່າງໆ.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "ປິດການໃຊ້ງານ" > ປຸ່ມຕົ້ນຕໍ </button>   
  2. <button type = "button" class = "btn btn-large" ປິດໃຊ້ງານ > ປຸ່ມ </button>

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

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

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

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

ຮູບພາບ

ເພີ່ມຫ້ອງຮຽນໃສ່ <img>ອົງປະກອບເພື່ອຈັດຮູບແບບຮູບພາບໄດ້ຢ່າງງ່າຍດາຍໃນໂຄງການໃດນຶ່ງ.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

ລະວັງ! .img-roundedແລະ .img-circleບໍ່ເຮັດວຽກໃນ IE7-8 ເນື່ອງຈາກການຂາດການ border-radiusສະຫນັບສະຫນູນ.

ໄອຄອນ ໂດຍ Glyphicons

ໄອຄອນ glyphs

140 ໄອຄອນໃນຮູບແບບ sprite, ມີຢູ່ໃນສີຂີ້ເຖົ່າເຂັ້ມ (ຄ່າເລີ່ມຕົ້ນ) ແລະສີຂາວ, ສະຫນອງໃຫ້ໂດຍ Glyphicons .

  • 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
  • ໄອຄອນເຕັມຈໍ

ຄຸນລັກສະນະຂອງ Glyphicons

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

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

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

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

ຍັງມີຮູບແບບຕ່າງໆສໍາລັບໄອຄອນທີ່ປີ້ນກັບ (ສີຂາວ), ສ້າງພ້ອມດ້ວຍຊັ້ນຮຽນພິເສດຫນຶ່ງ. ພວກເຮົາຈະບັງຄັບໃຊ້ຄລາສນີ້ໂດຍສະເພາະໃນສະຖານະ hover ແລະ active states ສໍາລັບ nav ແລະ dropdown links.

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

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

ຕົວຢ່າງໄອຄອນ

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

ປຸ່ມ

ກຸ່ມປຸ່ມຢູ່ໃນແຖບເຄື່ອງມືປຸ່ມ
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class="btn" href="#"> < i class = " icon - align -left" > < /i></a>   
  4.     <a class="btn" href="#"> < i class = " icon -align-center" > < /i></a>   
  5.     <a class="btn" href="#"> < i class = " icon -align-right" > < /i></a>   
  6.     <a class="btn" href="#"> < i class = " icon -align-justify" > < /i></a>   
  7.   </div>
  8. </div>
ເລື່ອນລົງໃນກຸ່ມປຸ່ມ
ຜູ້ໃຊ້ 
  1. <div class = "btn-group" > 
  2.   <a class="btn btn-primary" href="#"> < i class = " icon - user icon-white" ></i> ຜູ້ໃຊ້ </a>   
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = " caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href="#"> < i class = " icon-pencil" ></i> ແກ້ໄຂ </a></li>  
  6.     <li><a href="#"> < i class = " icon-trash" ></i> ລຶບ </a></li>  
  7.     <li><a href="#"> < i class = " icon-ban-circle" ></i> ບ້ານ </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href="#"> < i class = " i" ></i> ເຮັດ admin </a></li>  
  10.   </ul>
  11. </div>
ຂະໜາດປຸ່ມ
ດາວ ດາວ ດາວ 
  1. <a class="btn btn-large" href="#"> < i class = " icon - star " ></i> ດາວ </a>   
  2. <a class="btn btn-small" href="#"> < i class = " icon - star " ></i> ດາວ </a>   
  3. <a class="btn btn-mini" href="#"> < i class = " icon - star " ></i> ດາວ </a>

ການນໍາທາງ

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href="#"> < i class = " icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href="#"> < i class = " icon-book" ></i> ຫໍສະໝຸດ </a></li>  
  4.   <li><a href="#"> < i class = " icon-pencil" ></i> ແອັບພລິເຄຊັນ </a></li>  
  5.   <li><a href="#"> < i class = " i" ></i> ອື່ນໆ </a></li>  
  6. </ul>

ຊ່ອງຂໍ້ມູນແບບຟອມ

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > ທີ່ຢູ່ອີເມວ </label>  
  3.   <div class = "ການຄວບຄຸມ" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       < input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>