ອົງປະກອບ

ອົງປະກອບທີ່ນຳມາໃຊ້ຄືນໄດ້ຫຼາຍສິບອັນທີ່ສ້າງຂຶ້ນເພື່ອສະໜອງການນຳທາງ, ການແຈ້ງເຕືອນ, popovers, ແລະອື່ນໆອີກ.

ຕົວຢ່າງ

ສອງທາງເລືອກພື້ນຖານ, ພ້ອມກັບສອງຕົວແປເພີ່ມເຕີມ.

ກຸ່ມປຸ່ມດຽວ

ຫໍ່ຊຸດຂອງປຸ່ມທີ່ມີ .btnໃນ .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > ຊ້າຍ </button>
  3. <button class = "btn" > ກາງ </button>
  4. <button class = "btn" > ຂວາ </button>
  5. </div>

ປຸ່ມຫຼາຍກຸ່ມ

ສົມທົບຊຸດຂອງ <div class="btn-group">ເຂົ້າໄປໃນ <div class="btn-toolbar">ອົງປະກອບທີ່ສັບສົນຫຼາຍ.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

ກຸ່ມປຸ່ມຕັ້ງ

ເຮັດໃຫ້ຊຸດຂອງປຸ່ມປາກົດເປັນ stacked ໃນແນວຕັ້ງແທນທີ່ຈະເປັນແນວນອນ.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Checkbox ແລະລົດຊາດວິທະຍຸ

ກຸ່ມປຸ່ມຍັງສາມາດເຮັດວຽກເປັນວິທະຍຸໄດ້, ບ່ອນທີ່ມີພຽງປຸ່ມດຽວອາດຈະເຮັດວຽກ, ຫຼື checkboxes, ບ່ອນທີ່ຈໍານວນຂອງປຸ່ມອາດຈະເຮັດວຽກ. ເບິ່ງ ເອກະສານ JavaScript ສໍາລັບການນັ້ນ.

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

ລະວັງ!ປຸ່ມທີ່ມີ dropdowns ຕ້ອງໄດ້ຮັບການຫໍ່ເປັນສ່ວນບຸກຄົນຂອງເຂົາເຈົ້າເອງ .btn-groupພາຍໃນ .btn-toolbarສໍາລັບການສະແດງທີ່ເຫມາະສົມ.

ພາບລວມແລະຕົວຢ່າງ

ໃຊ້ປຸ່ມໃດກໍໄດ້ເພື່ອກະຕຸ້ນເມນູແບບເລື່ອນລົງໂດຍການວາງມັນໄວ້ພາຍໃນ .btn-groupແລະໃຫ້ເຄື່ອງໝາຍເມນູທີ່ເໝາະສົມ.

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle = "dropdown" href = "#" > _
  3. ການປະຕິບັດ
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  8. </ul>
  9. </div>

ເຮັດວຽກກັບຂະຫນາດປຸ່ມທັງຫມົດ

ປຸ່ມເລື່ອນລົງເຮັດວຽກທຸກຂະໜາດ: .btn-large, .btn-small, ຫຼື .btn-mini.

ຕ້ອງການ JavaScript

ການເລື່ອນລົງປຸ່ມຕ້ອງການ plugin dropdown Bootstrap ເພື່ອເຮັດວຽກ.

ໃນບາງກໍລະນີ ເຊັ່ນ: ມືຖື - ເມນູເລື່ອນລົງຈະຂະຫຍາຍອອກໄປນອກຊ່ອງເບິ່ງ. ທ່ານຈໍາເປັນຕ້ອງແກ້ໄຂການຈັດຕໍາແຫນ່ງດ້ວຍຕົນເອງຫຼືດ້ວຍ JavaScript ແບບກໍານົດເອງ.


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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > ການກະ ທຳ </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  8. </ul>
  9. </div>

ຂະໜາດ

ໃຊ້ຫ້ອງຮຽນປຸ່ມພິເສດ .btn-mini, .btn-small, ຫຼື .btn-largeສໍາລັບຂະຫນາດ.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > ປະຕິບັດ </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  8. </ul>
  9. </div>

ເມນູເລື່ອນ

ເມນູແບບເລື່ອນລົງຍັງສາມາດສະຫຼັບຈາກລຸ່ມສຸດຂຶ້ນໂດຍການເພີ່ມຊັ້ນດຽວໃຫ້ກັບພໍ່ແມ່ຂອງ .dropdown-menu. ມັນຈະພິກທິດທາງຂອງ .caretເມນູແລະປ່ຽນຕໍາແຫນ່ງຕົວມັນເອງເພື່ອຍ້າຍຈາກລຸ່ມຂຶ້ນເທິງແທນທີ່ຈະລົງເທິງ.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > ເລື່ອນ </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  8. </ul>
  9. </div>

pagination ມາດຕະຖານ

pagination ງ່າຍ​ດາຍ​ໄດ້​ຮັບ​ການ​ດົນ​ໃຈ​ໂດຍ Rdio​, ທີ່​ຍິ່ງ​ໃຫຍ່​ສໍາ​ລັບ​ກິດ​ແລະ​ຜົນ​ການ​ຊອກ​ຫາ​. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.

  1. <div class = "page" >
  2. <ul>
  3. <li><a href = "#"> ກ່ອນ </a> </li>
  4. <li><a href="#"> 1 </a> < /li >
  5. <li><a href="#"> 2 </a> < /li >
  6. <li><a href="#"> 3 </a> < /li >
  7. <li><a href="#"> 4 </a> < /li >
  8. <li><a href="#"> 5 </a> < /li >
  9. <li><a href="#"> ຕໍ່ ໄປ </a> < /li>
  10. </ul>
  11. </div>

ທາງເລືອກ

ສະຖານະທີ່ພິການ ແລະເຄື່ອນໄຫວ

ການເຊື່ອມຕໍ່ສາມາດປັບແຕ່ງໄດ້ສໍາລັບສະຖານະການທີ່ແຕກຕ່າງກັນ. ໃຊ້ .disabledສໍາລັບການເຊື່ອມຕໍ່ unclickable ແລະ .activeຊີ້ບອກຫນ້າປະຈຸບັນ.

  1. <div class = "page" >
  2. <ul>
  3. < li class = "disabled" > <a href="#" > « </a></li>
  4. <li class = "active" > <a href="#"> 1 </a> < / li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "page" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

ຂະໜາດ

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

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "page" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

ຈັດຮຽງ

ເພີ່ມຫນຶ່ງໃນສອງຊັ້ນຮຽນທາງເລືອກເພື່ອປ່ຽນການຈັດຕໍາແຫນ່ງຂອງການເຊື່ອມຕໍ່ pagination: .pagination-centeredແລະ .pagination-right.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

ລິ້ງກ່ອນໜ້າ ແລະຕໍ່ໄປໄວສຳລັບການຈັດຕັ້ງປະຕິບັດການວາງໜ້າແບບງ່າຍໆດ້ວຍເຄື່ອງໝາຍຈຸດ ແລະຮູບແບບສີສັນ. ມັນດີສໍາລັບເວັບໄຊທ໌ງ່າຍໆເຊັ່ນ blogs ຫຼືວາລະສານ.

ຕົວຢ່າງເລີ່ມຕົ້ນ

ໂດຍຄ່າເລີ່ມຕົ້ນ, pager ສູນກາງເຊື່ອມຕໍ່.

  1. <ul class = "pager" >
  2. <li><a href="#"> ກ່ອນ ໜ້າ </a> < /li>
  3. <li><a href="#"> ຕໍ່ ໄປ </a> < /li>
  4. </ul>

ລິ້ງທີ່ສອດຄ່ອງ

ອີກທາງເລືອກ, ທ່ານສາມາດຈັດວາງແຕ່ລະເຊື່ອມຕໍ່ໄປຫາດ້ານຕ່າງໆ:

  1. <ul class = "pager" >
  2. <li class = "ກ່ອນໜ້າ" >
  3. <a href="#"> & larr ; _ ແກ່ </a>
  4. </li>
  5. <li class = "ຕໍ່ໄປ" >
  6. <a href="#"> ໃໝ່ ກວ່າ & rarr ; </a>
  7. </li>
  8. </ul>

ສະຖານະປິດການໃຊ້ງານທາງເລືອກ

ການເຊື່ອມໂຍງ Pager ຍັງໃຊ້ .disabledປະເພດຜົນປະໂຫຍດທົ່ວໄປຈາກ pagination.

  1. <ul class = "pager" >
  2. <li class = "ກ່ອນໜ້ານີ້ພິການ" >
  3. <a href="#"> & larr ; _ ແກ່ </a>
  4. </li>
  5. ...
  6. </ul>

ປ້າຍກຳກັບ

ປ້າຍກຳກັບ ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ <span class="label">Default</span>
ຄວາມ​ສໍາ​ເລັດ <span class="label label-success">Success</span>
ຄຳເຕືອນ <span class="label label-warning">Warning</span>
ສຳຄັນ <span class="label label-important">Important</span>
ຂໍ້ມູນ <span class="label label-info">Info</span>
ປີ້ນ <span class="label label-inverse">Inverse</span>

ປ້າຍ

ຊື່ ຕົວຢ່າງ ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ 1 <span class="badge">1</span>
ຄວາມ​ສໍາ​ເລັດ 2 <span class="badge badge-success">2</span>
ຄຳເຕືອນ 4 <span class="badge badge-warning">4</span>
ສຳຄັນ 6 <span class="badge badge-important">6</span>
ຂໍ້ມູນ 8 <span class="badge badge-info">8</span>
ປີ້ນ 10 <span class="badge badge-inverse">10</span>

ຍຸບງ່າຍ

ສໍາລັບການປະຕິບັດທີ່ງ່າຍດາຍ, ປ້າຍຊື່ແລະປ້າຍຈະຍຸບລົງ (ຜ່ານ :emptyຕົວເລືອກຂອງ CSS) ເມື່ອບໍ່ມີເນື້ອຫາຢູ່ພາຍໃນ.

ໜ່ວຍພະເອກ

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

ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!

ນີ້ແມ່ນຫນ່ວຍງານ hero ງ່າຍດາຍ, ເປັນອົງປະກອບແບບ jumbotron ງ່າຍດາຍສໍາລັບການໂທຫາຄວາມສົນໃຈເປັນພິເສດຕໍ່ເນື້ອໃນທີ່ໂດດເດັ່ນຫຼືຂໍ້ມູນຂ່າວສານ.

ສຶກສາເພີ່ມເຕີມ

  1. <div class = "hero-unit" >
  2. <h1> ຫົວຂໍ້ </h1>
  3. <p> ປ້າຍກຳກັບ </p>
  4. <p>
  5. <a class="btn btn-primary btn-large"> _
  6. ສຶກສາເພີ່ມເຕີມ
  7. </a>
  8. </p>
  9. </div>

ສ່ວນຫົວໜ້າ

Shell ງ່າຍດາຍສໍາລັບການ h1ຈັດວາງອອກຢ່າງເຫມາະສົມແລະແບ່ງສ່ວນຂອງເນື້ອຫາຢູ່ໃນຫນ້າ. ມັນ​ສາ​ມາດ​ນໍາ​ໃຊ້ h1​ຂອງ​ມາດ​ຕະ​ຖານ small​, ອົງ​ປະ​ກອບ​ເຊັ່ນ​ດຽວ​ກັນ​ກັບ​ອົງ​ປະ​ກອບ​ອື່ນໆ​ທີ່​ສຸດ (ມີ​ຮູບ​ແບບ​ເພີ່ມ​ເຕີມ​)​.

  1. <div class = "page-header" >
  2. <h1> ຕົວຢ່າງສ່ວນຫົວ <small> Subtext ສໍາລັບ header </small></h1>
  3. </div>

ຮູບຕົວຢ່າງເລີ່ມຕົ້ນ

ໂດຍຄ່າເລີ່ມຕົ້ນ, ຮູບຫຍໍ້ຂອງ Bootstrap ຖືກອອກແບບມາເພື່ອສະແດງຮູບພາບທີ່ເຊື່ອມຕໍ່ດ້ວຍເຄື່ອງໝາຍທີ່ຕ້ອງການໜ້ອຍທີ່ສຸດ.

ປັບແຕ່ງໄດ້ສູງ

ດ້ວຍເຄື່ອງໝາຍເພີ່ມເຕີມເລັກນ້ອຍ, ມັນເປັນໄປໄດ້ທີ່ຈະເພີ່ມເນື້ອຫາ HTML ປະເພດໃດກໍໄດ້ເຊັ່ນ: ຫົວຂໍ້, ຫຍໍ້ໜ້າ, ຫຼືປຸ່ມຕ່າງໆເຂົ້າໃນຮູບຫຍໍ້.

ເປັນຫຍັງຕ້ອງໃຊ້ຮູບຫຍໍ້

ຮູບຕົວຢ່າງ (ກ່ອນໜ້ານີ້ .media-gridຈົນຮອດ v1.4) ແມ່ນດີຫຼາຍສຳລັບຕາໜ່າງຂອງຮູບພາບ ຫຼືວິດີໂອ, ຜົນການຊອກຫາຮູບພາບ, ຜະລິດຕະພັນຂາຍຍ່ອຍ, ຫຼັກຊັບ ແລະອື່ນໆອີກ. ພວກເຂົາສາມາດເປັນການເຊື່ອມໂຍງຫຼືເນື້ອຫາຄົງທີ່.

ງ່າຍ​ດາຍ​, ຫມາຍ​ຄວາມ​ປ່ຽນ​ແປງ​ໄດ້​

ການໝາຍຮູບຫຍໍ້ແມ່ນງ່າຍດາຍ— ulມີ liອົງປະກອບໃດກໍໄດ້ທີ່ຕ້ອງການທັງໝົດ. ມັນຍັງມີຄວາມຍືດຫຍຸ່ນສູງ, ອະນຸຍາດໃຫ້ສໍາລັບປະເພດຂອງເນື້ອຫາໃດໆທີ່ມີເຄື່ອງຫມາຍເພີ່ມເຕີມເລັກນ້ອຍເພື່ອຫໍ່ເນື້ອຫາຂອງທ່ານ.

ໃຊ້ຂະໜາດຖັນຕາຂ່າຍ

ສຸດທ້າຍ, ອົງປະກອບຂອງຮູບຫຍໍ້ຈະໃຊ້ຫ້ອງຮຽນລະບົບຕາໜ່າງທີ່ມີຢູ່ແລ້ວ - ເຊັ່ນ .span2ຫຼື .span3- ສໍາລັບການຄວບຄຸມຂະໜາດຂອງຮູບຫຍໍ້.

ມາກອັບ

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

  1. <ul class = "ຮູບຫຍໍ້" >
  2. <li class = "span4" >
  3. <a href="#" class="thumbnail"> _ _ _ _ _
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

ສໍາລັບເນື້ອຫາ HTML ທີ່ກໍາຫນົດເອງໃນຮູບຫຍໍ້, ເຄື່ອງຫມາຍການປ່ຽນແປງເລັກນ້ອຍ. ເພື່ອອະນຸຍາດໃຫ້ເນື້ອຫາລະດັບບລັອກຢູ່ບ່ອນໃດກໍໄດ້, ພວກເຮົາປ່ຽນ <a>ເປັນແບບ <div>ດຽວກັນ:

  1. <ul class = "ຮູບຫຍໍ້" >
  2. <li class = "span4" >
  3. <div class = "ຮູບຫຍໍ້" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> ປ້າຍຊື່ຮູບຫຍໍ້ </h3>
  6. <p> ຫຍໍ້ໜ້າ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

ຕົວຢ່າງເພີ່ມເຕີມ

ສຳຫຼວດຕົວເລືອກທັງໝົດຂອງເຈົ້າດ້ວຍຫ້ອງຮຽນຕາຕະລາງຕ່າງໆທີ່ມີໃຫ້ທ່ານ. ນອກນັ້ນທ່ານຍັງສາມາດປະສົມແລະຈັບຄູ່ຂະຫນາດທີ່ແຕກຕ່າງກັນ.

ການແຈ້ງເຕືອນເລີ່ມຕົ້ນ

ຫໍ່ຂໍ້ຄວາມໃດນຶ່ງ ແລະປຸ່ມປິດທາງເລືອກໃນ .alertຂໍ້ຄວາມເຕືອນໄພພື້ນຖານ.

ເຕືອນໄພ! ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.
  1. <div class = "ເຕືອນ" >
  2. <button type = "button" class = "close" data-dismiss = "ເຕືອນ" > × </button>
  3. <strong> ເຕືອນ! </strong> ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.
  4. </div>

ປິດປຸ່ມ

ຕົວທ່ອງເວັບຂອງ Safari ແລະ Mobile Opera, ນອກເຫນືອຈາກ data-dismiss="alert"ຄຸນລັກສະນະ, ຮຽກຮ້ອງໃຫ້ມີ href="#"ການຍົກເລີກການແຈ້ງເຕືອນເມື່ອໃຊ້ <a>ແທັກ.

  1. <a href = "#" ຫ້ອງຮຽນ = "ປິດ" data-dismiss = "ເຕືອນ" > × </a>

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

  1. <ປຸ່ມ ປະເພດ = "ປຸ່ມ" ຫ້ອງຮຽນ = "close" data-dismiss = "ເຕືອນ" > × </button>

ປິດການແຈ້ງເຕືອນຜ່ານ JavaScript

ໃຊ້ ປັ໊ກອິນ jQuery ການແຈ້ງເຕືອນ ເພື່ອການຍົກເລີກການແຈ້ງເຕືອນໄວແລະງ່າຍດາຍ.


ທາງເລືອກ

ສໍາລັບຂໍ້ຄວາມທີ່ຍາວກວ່າ, ເພີ່ມ padding ເທິງແລະລຸ່ມຂອງ wrapper ເຕືອນໂດຍການເພີ່ມ .alert-block.

ເຕືອນໄພ!

ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div ຫ້ອງຮຽນ = "ເຕືອນເຕືອນ-ບລັອກ" >
  2. <ປຸ່ມ ປະເພດ = "ປຸ່ມ" class = "ປິດ" data-dismiss = "ເຕືອນ" > × </button>
  3. <h4> ຄຳເຕືອນ! </h4>
  4. ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າບໍ່ແມ່ນ ...
  5. </div>

ທາງເລືອກໃນສະພາບການ

ເພີ່ມຫ້ອງຮຽນທາງເລືອກເພື່ອປ່ຽນຄວາມໝາຍຂອງການແຈ້ງເຕືອນ.

ຄວາມຜິດພາດຫຼືອັນຕະລາຍ

ໂອ້ຍ! ປ່ຽນບາງອັນແລ້ວລອງສົ່ງໃໝ່ອີກຄັ້ງ.
  1. <div class = "ເຕືອນເຕືອນ-ຄວາມຜິດພາດ" >
  2. ...
  3. </div>

ຄວາມ​ສໍາ​ເລັດ

ເຮັດໄດ້ດີ! ທ່ານໄດ້ອ່ານຂໍ້ຄວາມເຕືອນທີ່ສໍາຄັນນີ້ຢ່າງສໍາເລັດຜົນ.
  1. <div class = "ເຕືອນ alert-success" >
  2. ...
  3. </div>

ຂໍ້ມູນ

ລະວັງ! ການແຈ້ງເຕືອນນີ້ຕ້ອງການຄວາມສົນໃຈຂອງທ່ານ, ແຕ່ມັນບໍ່ສໍາຄັນຫຼາຍ.
  1. <div class = "ການເຕືອນໄພ alert-info" >
  2. ...
  3. </div>

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

ພື້ນຖານ

ແຖບຄວາມຄືບໜ້າເລີ່ມຕົ້ນດ້ວຍການສີຕາມລວງຕັ້ງ.

  1. <div class = "ຄວາມຄືບໜ້າ" >
  2. <div class = "bar" style = " width : 60 %; " ></div>
  3. </div>

ເສັ້ນດ່າງ

ໃຊ້ສີເປັນສີເພື່ອສ້າງຜົນກະທົບເປັນເສັ້ນດ່າງ. ບໍ່ມີຢູ່ໃນ IE7-8.

  1. <div class = "ຄວາມຄືບໜ້າ progress-striped" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

ມີການເຄື່ອນໄຫວ

ຕື່ມໃສ່ .activeເພື່ອ .progress-stripedເຄື່ອນໄຫວເສັ້ນດ່າງຈາກຂວາຫາຊ້າຍ. ບໍ່ມີຢູ່ໃນທຸກລຸ້ນຂອງ IE.

  1. <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-ແບບເຄື່ອນໄຫວ" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

ຊ້ອນກັນ

ວາງຫຼາຍແຖບໃສ່ໃນອັນດຽວກັນ .progressເພື່ອວາງພວກມັນໄວ້.

  1. <div class = "ຄວາມຄືບໜ້າ" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " ກວ້າງ : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

ທາງເລືອກ

ສີເພີ່ມເຕີມ

ແຖບຄວາມຄືບຫນ້າໃຊ້ບາງປຸ່ມດຽວກັນແລະຫ້ອງຮຽນເຕືອນສໍາລັບຮູບແບບທີ່ສອດຄ່ອງ.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress-success" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-warning" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-ອັນຕະລາຍ" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

ແຖບເສັ້ນດ່າງ

ຄ້າຍຄືກັນກັບສີທີ່ແຂງ, ພວກເຮົາມີແຖບຄວາມຄືບຫນ້າທີ່ມີເສັ້ນດ່າງທີ່ແຕກຕ່າງກັນ.

  1. <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

ຮອງຮັບຕົວທ່ອງເວັບ

ແຖບຄວາມຄືບໜ້າໃຊ້ CSS3 gradients, transitions, ແລະ animation ເພື່ອບັນລຸຜົນກະທົບທັງໝົດຂອງມັນ. ຄຸນສົມບັດເຫຼົ່ານີ້ບໍ່ຮອງຮັບໃນ IE7-9 ຫຼື Firefox ເວີຊັນເກົ່າກວ່າ.

ເວີຊັນກ່ອນໜ້ານີ້ກວ່າ Internet Explorer 10 ແລະ Opera 12 ບໍ່ຮອງຮັບພາບເຄື່ອນໄຫວ.

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

ຕົວຢ່າງເລີ່ມຕົ້ນ

ສື່ເລີ່ມຕົ້ນອະນຸຍາດໃຫ້ເລື່ອນວັດຖຸສື່ (ຮູບພາບ, ວິດີໂອ, ສຽງ) ໄປຊ້າຍ ຫຼືຂວາຂອງບລັອກເນື້ອຫາ.

64x64

ຫົວຂໍ້ສື່ມວນຊົນ

Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ໃນ faucibus.
64x64

ຫົວຂໍ້ສື່ມວນຊົນ

Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ໃນ faucibus.
64x64

ຫົວຂໍ້ສື່ມວນຊົນ

Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ໃນ faucibus.
  1. <div class = "media" >
  2. <a class="pull-left" href="#" > _ _ _ _
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

ລາຍການສື່ມວນຊົນ

ດ້ວຍເຄື່ອງໝາຍພິເສດເລັກນ້ອຍ, ທ່ານສາມາດໃຊ້ສື່ພາຍໃນລາຍຊື່ (ທີ່ເປັນປະໂຫຍດສຳລັບຫົວຂໍ້ຄຳເຫັນ ຫຼືລາຍການບົດຄວາມ).

  • 64x64

    ຫົວຂໍ້ສື່ມວນຊົນ

    Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Nested media heading

    Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Nested media heading

    Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    ຫົວຂໍ້ສື່ມວນຊົນ

    Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class="pull-left" href="#" > _ _ _ _
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

ໃຊ້ດີເປັນຜົນກະທົບທີ່ງ່າຍດາຍກ່ຽວກັບອົງປະກອບເພື່ອໃຫ້ມັນມີຜົນກະທົບ inset.

ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງ!
  1. <div class = "ດີ" >
  2. ...
  3. </div>

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

ຄວບຄຸມ padding ແລະມຸມມົນດ້ວຍສອງຫ້ອງຮຽນຕົວແກ້ໄຂທາງເລືອກ.

ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງ!
  1. <div class = "ດີ-ໃຫຍ່" >
  2. ...
  3. </div>
ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງ!
  1. <div class = "ດີ-ນ້ອຍ" >
  2. ...
  3. </div>

ປິດໄອຄອນ

ໃຊ້ໄອຄອນປິດທົ່ວໄປສໍາລັບການປິດເນື້ອຫາເຊັ່ນ: modals ແລະການແຈ້ງເຕືອນ.

  1. <button class = "close" > × </button>

ອຸປະກອນ iOS ຕ້ອງການ href="#"ເຫດການຄລິກຖ້າທ່ານຕ້ອງການໃຊ້ສະມໍ.

  1. <a class="close" href="#"> & times ; _ _ _ </a>

ຫ້ອງຮຽນຜູ້ຊ່ວຍ

ຫ້ອງຮຽນແບບງ່າຍດາຍ, ເນັ້ນໃສ່ການສະແດງຜົນຂະໜາດນ້ອຍ ຫຼືການປັບແຕ່ງພຶດຕິກຳ.

.ດຶງຊ້າຍ

ເລື່ອນອົງປະກອບທາງຊ້າຍ

  1. class = "ດຶງຊ້າຍ"
  1. . ດຶງ - ຊ້າຍ {
  2. ເລື່ອນ : ຊ້າຍ ;
  3. }

.ດຶງຂວາ

ເລື່ອນອົງປະກອບໄປທາງຂວາ

  1. class = "ດຶງຂວາ"
  1. . ດຶງ - ຂວາ {
  2. ເລື່ອນ : ສິດ ;
  3. }

.ປິດສຽງ

ປ່ຽນສີຂອງອົງປະກອບເປັນ#999

  1. class = "ປິດສຽງ"
  1. . ປິດສຽງ {
  2. ສີ : #999;
  3. }

.ແກ້​ໄຂ

ລຶບລ້າງ floatອົງປະກອບໃດໆ

  1. class = "ການ​ແກ້​ໄຂ​"
  1. . ແກ້​ໄຂ {
  2. * ຊູມ : 1 ;
  3. &: ກ່ອນ ,
  4. &: ຫຼັງຈາກ {
  5. ຈໍສະແດງຜົນ : ຕາຕະລາງ ;
  6. ເນື້ອໃນ : "" ;
  7. }
  8. &: ຫຼັງຈາກ {
  9. ຈະແຈ້ງ : ທັງສອງ ;
  10. }
  11. }