ອົງປະກອບ

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

ກຸ່ມປຸ່ມ

ໃຊ້ກຸ່ມປຸ່ມເພື່ອເຂົ້າຮ່ວມຫຼາຍປຸ່ມຮ່ວມກັນເປັນອົງປະກອບປະສົມອັນດຽວ. ສ້າງໃຫ້ເຂົາເຈົ້າມີຊຸດຂອງ <a>ຫຼື <button>ອົງປະກອບ.

ການ​ປະ​ຕິ​ບັດ​ທີ່​ດີ​ທີ່​ສຸດ

ພວກເຮົາແນະນໍາຄໍາແນະນໍາຕໍ່ໄປນີ້ສໍາລັບການນໍາໃຊ້ກຸ່ມປຸ່ມແລະແຖບເຄື່ອງມື:

  • ໃຊ້ອົງປະກອບດຽວກັນຢູ່ໃນກຸ່ມປຸ່ມດຽວສະເໝີ, <a>ຫຼື <button>.
  • ຢ່າປະສົມປຸ່ມຂອງສີທີ່ແຕກຕ່າງກັນຢູ່ໃນກຸ່ມປຸ່ມດຽວກັນ.
  • ໃຊ້ໄອຄອນນອກເໜືອໄປຈາກ ຫຼືແທນຕົວໜັງສື, ແຕ່ໃຫ້ແນ່ໃຈວ່າມີຂໍ້ຄວາມ alt ແລະຫົວຂໍ້ຕາມຄວາມເໝາະສົມ.

ກຸ່ມປຸ່ມ ທີ່ກ່ຽວຂ້ອງທີ່ ມີ dropdowns (ເບິ່ງຂ້າງລຸ່ມນີ້) ຄວນຖືກເອີ້ນອອກແຍກຕ່າງຫາກແລະສະເຫມີປະກອບມີ dropdown caret ເພື່ອຊີ້ໃຫ້ເຫັນພຶດຕິກໍາທີ່ຕັ້ງໃຈ.

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

ນີ້ແມ່ນວິທີທີ່ HTML ຊອກຫາກຸ່ມປຸ່ມມາດຕະຖານທີ່ສ້າງຂຶ້ນດ້ວຍປຸ່ມແທັກສະມໍ:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </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>

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

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

ເອົາ javascript »

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

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

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

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

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

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

ຄ້າຍຄືກັນກັບກຸ່ມປຸ່ມ, markup ຂອງພວກເຮົາໃຊ້ markup ປຸ່ມປົກກະຕິ, ແຕ່ມີມືຂອງການເພີ່ມເຕີມເພື່ອປັບຮູບແບບແລະສະຫນັບສະຫນູນ plugin jQuery dropdown ຂອງ Bootstrap.

  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 ທີ່ກໍາຫນົດເອງ.


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

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

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

ຂະໜາດ

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  5. </ul>
  6. </div>

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

ພວກເຮົາຂະຫຍາຍການເລື່ອນລົງປຸ່ມປົກກະຕິເພື່ອສະຫນອງການດໍາເນີນການປຸ່ມທີສອງທີ່ດໍາເນີນການເປັນຜົນກະທົບຕໍ່ການເລື່ອນລົງແຍກຕ່າງຫາກ.

  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>

ເມນູເລື່ອນ

ເມນູແບບເລື່ອນລົງຍັງສາມາດສະຫຼັບຈາກລຸ່ມສຸດຂຶ້ນໂດຍການເພີ່ມຊັ້ນດຽວໃຫ້ກັບພໍ່ແມ່ຂອງ .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>

ການຈັດໜ້າຫຼາຍຄອນ

ເວລາທີ່ຈະໃຊ້

ການຈັດໜ້າແບບລຽບງ່າຍ ແລະ ໜ້ອຍທີ່ສຸດທີ່ໄດ້ຮັບແຮງບັນດານໃຈຈາກ Rdio, ເໝາະສຳລັບແອັບ ແລະ ຜົນການຄົ້ນຫາ. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.

ການເຊື່ອມຕໍ່ຫນ້າຂອງລັດ

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

ການຈັດຮຽງແບບຍືດຫຍຸ່ນ

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

ຕົວຢ່າງ

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

ມາກອັບ

ຫໍ່ຢູ່ໃນ <div>, pagination ແມ່ນພຽງແຕ່ <ul>.

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

Pager ສໍາລັບການເຊື່ອມຕໍ່ໄວກ່ອນຫນ້າແລະຕໍ່ໄປ

ກ່ຽວກັບ pager

ອົງປະກອບ pager ແມ່ນຊຸດຂອງການເຊື່ອມຕໍ່ສໍາລັບການປະຕິບັດ pagination ງ່າຍດາຍທີ່ມີ markup ແສງສະຫວ່າງແລະແມ້ກະທັ້ງຮູບແບບສີມ້ານ. ມັນດີສໍາລັບເວັບໄຊທ໌ງ່າຍໆເຊັ່ນ blogs ຫຼືວາລະສານ.

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

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

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

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> ກ່ອນ ໜ້າ </a> _ _
  4. </li>
  5. <li>
  6. <a href="#"> ຕໍ່ ໄປ </a> _ _
  7. </li>
  8. </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>
ປ້າຍກຳກັບ ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ <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>

ກ່ຽວກັບ

Badges ແມ່ນອົງປະກອບຂະຫນາດນ້ອຍ, ງ່າຍດາຍສໍາລັບການສະແດງຕົວຊີ້ວັດຫຼືການນັບຂອງບາງປະເພດ. ພວກມັນຖືກພົບເຫັນທົ່ວໄປໃນລູກຄ້າອີເມລ໌ເຊັ່ນ Mail.app ຫຼືໃນແອັບຯມືຖືສໍາລັບການແຈ້ງເຕືອນ push.

ຫ້ອງຮຽນທີ່ມີຢູ່

ຊື່ ຕົວຢ່າງ ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ 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>

ໜ່ວຍພະເອກ

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

ມາກອັບ

ຫໍ່ເນື້ອໃນຂອງທ່ານໃນລັກສະ divນະເຊັ່ນ:

  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>

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

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

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

ສ່ວນຫົວໜ້າ

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

  1. <div class = "page-header" >
  2. <h1> ຕົວຢ່າງຫົວຫນ້າ </h1>
  3. </div>

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

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

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

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

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

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

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

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

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

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

ເຄື່ອງຫມາຍ

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

  1. <ul class = "ຮູບຫຍໍ້" >
  2. <li class = "span3" >
  3. <a href="#" class="thumbnail"> _ _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "ຮູບຫຍໍ້" >
  2. <li class = "span3" >
  3. <div class = "ຮູບຫຍໍ້" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ປ້າຍກຳກັບຮູບຕົວຢ່າງ </h5>
  6. <p> ຄຳບັນຍາຍຮູບຫຍໍ້ຢູ່ບ່ອນນີ້... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

ມາດຕະຖານນ້ຳໜັກເບົາ

ຫ້ອງຮຽນພື້ນຖານທີ່ຂຽນຄືນ

ດ້ວຍ Bootstrap 2, ພວກເຮົາໄດ້ເຮັດໃຫ້ພື້ນຖານຫ້ອງຮຽນງ່າຍ: .alertແທນທີ່ຈະເປັນ .alert-message. ພວກເຮົາຍັງໄດ້ຫຼຸດເຄື່ອງໝາຍຂັ້ນຕ່ຳທີ່ກຳນົດໄວ້—ບໍ່ <p>ຈຳເປັນຕ້ອງມີຕາມຄ່າເລີ່ມຕົ້ນ, ພຽງແຕ່ດ້ານນອກ <div>ເທົ່ານັ້ນ.

ຂໍ້ຄວາມເຕືອນດຽວ

ສໍາລັບອົງປະກອບທີ່ທົນທານກວ່າທີ່ມີລະຫັດຫນ້ອຍ, ພວກເຮົາໄດ້ເອົາລັກສະນະທີ່ແຕກຕ່າງອອກສໍາລັບການແຈ້ງເຕືອນຕັນ, ຂໍ້ຄວາມທີ່ມາພ້ອມກັບ padding ຫຼາຍແລະໂດຍທົ່ວໄປແລ້ວຂໍ້ຄວາມເພີ່ມເຕີມ. ຫ້ອງຮຽນຍັງໄດ້ປ່ຽນເປັນ .alert-block.


ໄປໄດ້ດີກັບ javascript

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

ເອົາປລັກອິນ »

ຕົວຢ່າງການແຈ້ງເຕືອນ

ຫໍ່ຂໍ້ຄວາມຂອງທ່ານແລະໄອຄອນປິດທາງເລືອກໃນ div ທີ່ມີຫ້ອງຮຽນງ່າຍດາຍ.

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

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

ຂະຫຍາຍຂໍ້ຄວາມແຈ້ງເຕືອນມາດຕະຖານໄດ້ຢ່າງງ່າຍດາຍດ້ວຍສອງຫ້ອງຮຽນທາງເລືອກ: .alert-blockສໍາລັບ padding ແລະການຄວບຄຸມຂໍ້ຄວາມເພີ່ມເຕີມແລະ .alert-headingສໍາລັບຫົວຂໍ້ທີ່ກົງກັນ.

ເຕືອນໄພ!

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

  1. <div class = "ເຕືອນເຕືອນ-ບລັອກ" >
  2. <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _
  3. <h4 class = "alert-heading" > ຄຳເຕືອນ! </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"
  3. style = " width : 60 %; " ></div>
  4. </div>

ເສັ້ນດ່າງ

ໃຊ້ gradient ເພື່ອສ້າງຜົນກະທົບທີ່ມີເສັ້ນດ່າງ (ບໍ່ມີ IE).

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

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

ເອົາຕົວຢ່າງເສັ້ນດ່າງແລະເຄື່ອນໄຫວມັນ (ບໍ່ມີ IE).

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

ທາງເລືອກແລະການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບ

ສີເພີ່ມເຕີມ

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

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

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

ພຶດຕິກຳ

ແຖບຄວາມຄືບຫນ້າໃຊ້ CSS3 transitions, ດັ່ງນັ້ນຖ້າທ່ານປັບຄວາມກວ້າງແບບໄດນາມິກຜ່ານ javascript, ມັນຈະປັບຂະຫນາດໄດ້ອຍ່າງລຽບງ່າຍ.

ຖ້າທ່ານໃຊ້ .activeຫ້ອງຮຽນ, .progress-stripedແຖບຄວາມຄືບຫນ້າຂອງທ່ານຈະເຄື່ອນໄຫວເສັ້ນດ່າງຈາກຊ້າຍຫາຂວາ.

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

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

Opera ແລະ IE ບໍ່ຮອງຮັບພາບເຄື່ອນໄຫວໃນເວລານີ້.

Wells

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

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

ປິດໄອຄອນ

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

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

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

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