ກຸ່ມປຸ່ມ

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

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

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

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

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

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

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

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

ຕົວຢ່າງແຖບເຄື່ອງມື

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

ເອົາ javascript »

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

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

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

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

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

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

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

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

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

ຕ້ອງການ javascript

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

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

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

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

ຂະໜາດ

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

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

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

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

<div class = "btn-group" > 
  <button class = "btn" > ການກະ ທຳ </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  </ul>
</div>

ເມນູເລື່ອນ

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

<div class = "btn-group dropup" > 
  <button class = "btn" > ເລື່ອນ </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- ລິ້ງເມນູແບບເລື່ອນລົງ -->
  </ul>
</div>

ຫ້ອງຮຽນພື້ນຖານທີ່ມີປະສິດທິພາບ

ອົງປະກອບ nav ທັງໝົດຢູ່ບ່ອນນີ້—ແຖບ, ຢາຄຸມກຳເນີດ, ແລະລາຍຊື່— ແບ່ງປັນເຄື່ອງໝາຍພື້ນຖານ ແລະຮູບແບບດຽວກັນ ຜ່ານ .navຊັ້ນຮຽນ.

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

ແຖບແລະຢາແມ່ນດີສໍາລັບພາກສ່ວນຂອງເນື້ອຫາຫຼືນໍາທາງລະຫວ່າງຫນ້າຂອງເນື້ອຫາທີ່ກ່ຽວຂ້ອງ.

ການຈັດຮຽງອົງປະກອບ

ເພື່ອຈັດຮຽງລິ້ງ nav, ໃຫ້ໃຊ້ .pull-leftຫຼື .pull-rightຊັ້ນຮຽນປະໂຫຍດ. ທັງສອງຫ້ອງຮຽນຈະເພີ່ມ CSS float ໃນທິດທາງທີ່ກໍານົດໄວ້.

ແຖບພື້ນຖານ

ເອົາການ <ul>ເຊື່ອມຕໍ່ປົກກະຕິແລະເພີ່ມ .nav-tabs:

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#"> ບ້ານ </a> _ _ _ 
  </li>
  <li><a href="#"> ... </a> < /li > 
  <li><a href="#"> ... </a> < /li > 
</ul>

ຢາເມັດພື້ນຖານ

ເອົາ HTML ດຽວກັນ, ແຕ່ໃຊ້ .nav-pillsແທນ:

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> ບ້ານ </a> _ _ _ 
  </li>
  <li><a href="#"> ... </a> < /li > 
  <li><a href="#"> ... </a> < /li > 
</ul>

ວິທີການ stack 'em

ເນື່ອງຈາກແທັບແລະຢາແມ່ນນອນຕາມຄ່າເລີ່ມຕົ້ນ, ພຽງແຕ່ເພີ່ມຊັ້ນທີສອງ .nav-stacked, ເພື່ອເຮັດໃຫ້ພວກມັນປາກົດຢູ່ໃນແນວຕັ້ງ.

ແຖບຊ້ອນກັນ

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ຢາຄຸມກຳເນີດ

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ເມນູອຸດົມສົມບູນເຮັດໃຫ້ງ່າຍ

ເມນູແບບເລື່ອນລົງໃນແຖບ Bootstrap ແລະຢາແມ່ນງ່າຍທີ່ສຸດແລະຕ້ອງການພຽງແຕ່ HTML ເພີ່ມເຕີມເລັກນ້ອຍແລະ plugin jQuery ທີ່ມີນ້ໍາຫນັກເບົາ.

ໄປທີ່ໜ້າ Javascript ເພື່ອອ່ານເອກະສານກ່ຽວກັບການ ເລີ່ມຕົ້ນການເລື່ອນລົງ ໃນ Bootstrap.

ແຖບທີ່ມີແຖບເລື່ອນລົງ

• ບ້ານ
• ຊ່ວຍເຫຼືອ
• ເລື່ອນລົງ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ເລື່ອນລົງ"
       href = "#" >
        ເລື່ອນລົງ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

ຢາເມັດທີ່ມີການຫຼຸດລົງ

• ບ້ານ
• ຊ່ວຍເຫຼືອ
• ເລື່ອນລົງ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ເລື່ອນລົງ"
       href = "#" >
        ເລື່ອນລົງ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

ການນຳທາງແບບແອັບພລິເຄຊັນ

ລາຍຊື່ Nav ສະຫນອງວິທີທີ່ງ່າຍດາຍແລະງ່າຍດາຍໃນການສ້າງກຸ່ມຂອງການເຊື່ອມຕໍ່ nav ທີ່ມີສ່ວນຫົວທາງເລືອກ. ພວກມັນຖືກໃຊ້ດີທີ່ສຸດໃນແຖບດ້ານຂ້າງເຊັ່ນ Finder ໃນ OS X.

ຕາມໂຄງສ້າງ, ພວກມັນຖືກສ້າງຢູ່ໃນຮູບແບບ nav ຫຼັກດຽວກັນກັບແທັບແລະຢາ, ດັ່ງນັ້ນການນໍາໃຊ້ແລະການປັບແຕ່ງແມ່ນກົງໄປກົງມາ.

ມີໄອຄອນ

ລາຍຊື່ Nav ແມ່ນງ່າຍຕໍ່ການຕິດຕັ້ງໄອຄອນ. <i>ເພີ່ມ ແທັກ ທີ່ເຫມາະສົມ ກັບຊັ້ນຮຽນແລະທ່ານກໍາລັງຕັ້ງ.

ແບ່ງແນວນອນ

ຕື່ມການແບ່ງອອກຕາມລວງນອນໂດຍການສ້າງລາຍການບັນຊີລາຍຊື່ຫວ່າງເປົ່າກັບຫ້ອງຮຽນ .divider, ເຊັ່ນນັ້ນ:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

ຕົວຢ່າງລາຍຊື່ nav

ເອົາບັນຊີລາຍຊື່ຂອງການເຊື່ອມຕໍ່ແລະເພີ່ມ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    ສ່ວນຫົວລາຍການ
  </li>
  <li class = "active" > 
    <a href="#"> ບ້ານ </a> _ _ _ 
  </li>
  <li>
    <a href="#"> ຫໍ ສະ ໝຸດ </a> _ 
  </li>
  ...
</ul>

ຕົວຢ່າງທີ່ມີໄອຄອນ

ຕົວຢ່າງດຽວກັນ, ແຕ່ມີ <i>tags ສໍາລັບໄອຄອນ.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#"> _ _ _ 
      <i class = "icon-book" ></i> 
      ຫໍສະໝຸດ
    </a>
  </li>
  ...
</ul>

ມີຫຍັງແດ່

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

ການປ່ຽນແປງລະຫວ່າງພວກມັນແມ່ນງ່າຍແລະພຽງແຕ່ຕ້ອງການການປ່ຽນແປງເຄື່ອງຫມາຍຫນ້ອຍຫຼາຍ.

ຈາງລົງໃນແຖບ

ເພື່ອເຮັດໃຫ້ແຖບຫາຍໄປ, ເພີ່ມ .fadeໃສ່ແຕ່ລະອັນ .tab-pane.

ຕ້ອງການ plugin jQuery

ແຖບ tabbable ທັງຫມົດແມ່ນຂັບເຄື່ອນໂດຍ plugin jQuery ນ້ໍາຫນັກເບົາຂອງພວກເຮົາ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບວິທີເຮັດໃຫ້ແທັບແທັບສາມາດມີຊີວິດຊີ ວາຢູ່ໃນຫນ້າ javascript docs .

ເອົາ javascript →

ຕົວຢ່າງແບບ Tabbable

ເພື່ອເຮັດໃຫ້ແຖບສາມາດ tabbable ໄດ້, ສ້າງ .tab-paneID ທີ່ມີເອກະລັກສະເພາະສໍາລັບແຕ່ລະແຖບ ແລະຫໍ່ໃສ່ໃນ .tab-content.

ສໍາລັບແຖບຈັດຮຽງຂວາ ຫຼືຊ້າຍ, ຫໍ່ .nav-tabsແລະ .tab-contentໃນ .tabbable.

ເຄື່ອງຫມາຍກົງໄປກົງມາ

ການໃຊ້ tabbable tabs ຕ້ອງການ wrapping div, ຊຸດຂອງ tabs, ແລະຊຸດຂອງ tabbable panes ຂອງເນື້ອໃນ.

<div class = "tabbable" > <!-- ຕ້ອງການສະເພາະແຖບຊ້າຍ/ຂວາເທົ່ານັ້ນ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href="#tab1" data-toggle = "tab"> ພາກ ທີ 1 </a> < / li>   
    <li><a href = "#tab2" data-toggle = "tab"> ພາກທີ 2 </a> </li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> ຂ້ອຍ​ຢູ່​ພາກ​ທີ 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> ສະບາຍດີ ຂ້ອຍ​ຢູ່​ພາກ​ທີ 2. </p>
    </div>
  </div>
</div>

ແຖບຢູ່ດ້ານລຸ່ມ

Flip ຄໍາສັ່ງຂອງ HTML ແລະເພີ່ມຫ້ອງຮຽນເພື່ອວາງແຖບຢູ່ລຸ່ມສຸດ.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ແຖບຢູ່ເບື້ອງຊ້າຍ

ສະຫຼັບຫ້ອງຮຽນເພື່ອວາງແຖບຢູ່ເບື້ອງຊ້າຍ.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ແຖບດ້ານຂວາ

ສະຫຼັບຫ້ອງຮຽນເພື່ອວາງແຖບດ້ານຂວາ.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar scaffolding

ແຖບ navbar ຕ້ອງການພຽງແຕ່ div ຈໍານວນຫນ້ອຍເພື່ອໂຄງສ້າງມັນດີສໍາລັບການສະແດງຄົງທີ່ຫຼືຄົງທີ່.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

ແຖບ navbar ຄົງທີ່

ແກ້ໄຂແຖບ navbar ໄປທາງເທິງຫຼືລຸ່ມຂອງ viewport ດ້ວຍຊັ້ນເພີ່ມເຕີມຢູ່ div ຊັ້ນນອກທີ່ສຸດ, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

ເມື່ອທ່ານຕິດແຖບ navbar, ຈື່ໄວ້ວ່າບັນຊີຂອງພື້ນທີ່ເຊື່ອງໄວ້ພາຍໃຕ້. ເພີ່ມ 40px ຫຼືຫຼາຍກວ່ານັ້ນຂອງ padding ໃສ່ <body>. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມນີ້ຫຼັງຈາກ CSS Bootstrap ຫຼັກແລະກ່ອນ CSS ຕອບສະຫນອງທາງເລືອກ.

ຊື່ຍີ່ຫໍ້

ການເຊື່ອມໂຍງແບບງ່າຍໆເພື່ອສະແດງແບຫຼືຊື່ໂຄງການຂອງທ່ານພຽງແຕ່ຕ້ອງການແທັກສະມໍ.

<a class="brand" href="#"> _ _ _ _ _  
  ຊື່ໂຄງການ
</a>

ແບບຟອມໃນ navbar

ເພື່ອຈັດຮູບແບບ ແລະຈັດຕຳແໜ່ງແບບຟອມໃຫ້ຖືກຕ້ອງພາຍໃນແຖບ navbar, ເພີ່ມຊັ້ນຮຽນທີ່ເຫມາະສົມດັ່ງທີ່ສະແດງຢູ່ລຸ່ມນີ້. ສໍາລັບແບບຟອມເລີ່ມຕົ້ນ, ໃຫ້ປະກອບ .navbar-formແລະ .pull-leftໃສ່ ຫຼື .pull-rightຈັດມັນໃຫ້ຖືກຕ້ອງ.

<form class = "navbar-form pull-left" > 
  <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "span2" >  
</form>

ສໍາລັບແບບຟອມການຊອກຫາທີ່ປັບແຕ່ງຫຼາຍຂຶ້ນ, ເພີ່ມ .navbar-searchໃສ່ formແລະ .search-queryໃສ່ຂໍ້ມູນໃສ່ສໍາລັບຮູບແບບສະເພາະໃນແຖບ navbar.

<form class = "navbar-search pull-left" > 
  < input type = "text" class = "search-query" placeholder = "ຄົ້ນຫາ" >   
</form>

ການປ່ຽນແປງຕອບສະໜອງທາງເລືອກ

ອີງຕາມຈໍານວນເນື້ອຫາຢູ່ໃນແຖບເທິງຂອງທ່ານ, ທ່ານອາດຈະຕ້ອງການປະຕິບັດທາງເລືອກທີ່ຕອບສະຫນອງ. ເພື່ອເຮັດສິ່ງນີ້, ຫໍ່ເນື້ອໃນ nav ຂອງທ່ານໃນ div ທີ່ມີ, .nav-collapse.collapse, ແລະເພີ່ມປຸ່ມສະຫຼັບ navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar ຖືກໃຊ້ເປັນປຸ່ມສະຫຼັບສໍາລັບເນື້ອໃນ navbar ຫຍໍ້ລົງ -->
      <a class="btn btn-navbar" data-toggle = "ຍຸບ" data-target = ".nav-collapse"> _ _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ໃຫ້ແນ່ໃຈວ່າຈະປ່ອຍໃຫ້ຍີ່ຫໍ້ອອກໄປບ່ອນນັ້ນ ຖ້າທ່ານຕ້ອງການໃຫ້ມັນສະແດງ -->
      <a class="brand" href="#"> ຊື່ ໂຄງ ການ </a> _ _ _  
 
      <!-- ທຸກຢ່າງທີ່ທ່ານຕ້ອງການເຊື່ອງຢູ່ທີ່ 940px ຫຼືໜ້ອຍກວ່າ, ໃຫ້ວາງໄວ້ພາຍໃນບ່ອນນີ້ -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ແລະອື່ນໆ -->
      </div>
 
    </div>
  </div>
</div>

ການເຊື່ອມຕໍ່ນໍາທາງ

ລາຍການ Nav ແມ່ນງ່າຍດາຍທີ່ຈະເພີ່ມຜ່ານລາຍຊື່ທີ່ບໍ່ໄດ້ສັ່ງ.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> ບ້ານ </a> _ _ _ 
  </li>
  <li><a href = "#"> ລິ້ງ </a> </li> 
  <li><a href = "#"> ລິ້ງ </a> </li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ການຈັດຮຽງອົງປະກອບ

ເພື່ອຈັດລໍາດັບ nav, ແບບຟອມຄົ້ນຫາ, ຫຼືຂໍ້ຄວາມ, ໃຫ້ໃຊ້ .pull-leftຫຼື .pull-rightຫ້ອງຮຽນຜົນປະໂຫຍດ. ທັງສອງຫ້ອງຮຽນຈະເພີ່ມ CSS float ໃນທິດທາງທີ່ກໍານົດໄວ້.

ກຳລັງເພີ່ມເມນູແບບເລື່ອນລົງ

ການເພີ່ມ dropdowns ແລະ dropups ກັບ nav ແມ່ນງ່າຍດາຍ super, ແຕ່ມັນຈໍາເປັນຕ້ອງໃຊ້ plugin javascript ຂອງພວກເຮົາ .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          ບັນຊີ
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ເອົາ javascript →

ຂໍ້ຄວາມຢູ່ໃນແຖບນໍາທາງ

ຫໍ່ຂໍ້ຄວາມໃນ a <.navbar-text>, ປົກກະຕິແລ້ວຢູ່ໃນ <p>ແທັກສໍາລັບການນໍາພາທີ່ເຫມາະສົມແລະສີ.

ເປັນຫຍັງຕ້ອງໃຊ້ພວກມັນ

ການນໍາທາງ Breadcrumb ຖືກໃຊ້ເປັນ��ິທີທີ່ຈະສະແດງໃຫ້ຜູ້ໃຊ້ຮູ້ວ່າພວກເຂົາຢູ່ບ່ອນໃດພາຍໃນແອັບຯຫຼືເວັບໄຊທ໌ໃດຫນຶ່ງ, ແຕ່ບໍ່ແມ່ນສໍາລັບການນໍາທາງຕົ້ນຕໍ. ຮັກສາການນຳໃຊ້ຂອງພວກມັນໃຫ້ໜ້ອຍລົງ ແລະ ຫຍໍ້ໆ ເພື່ອໃຫ້ມີປະສິດທິພາບສູງສຸດ.

ຕົວຢ່າງ

ຕົວຢ່າງດຽວທີ່ສະແດງໃຫ້ເຫັນຍ້ອນວ່າມັນອາດຈະຖືກສະແດງໃນທົ່ວຫລາຍຫນ້າ.

• ບ້ານ

• ຫນ້າທໍາອິດ /
• ຫໍສະໝຸດ

• ຫນ້າທໍາອິດ /
• ຫໍສະໝຸດ /
• ຂໍ້ມູນ

ມາກອັບ

HTML ແມ່ນບັນຊີລາຍຊື່ມາດຕະຖານທີ່ບໍ່ມີຄໍາສັ່ງຂອງທ່ານທີ່ມີການເຊື່ອມຕໍ່.

<ul class = "breadcrumb" > 
  <li>
    <a href="#"> ເຮືອນ </a> < span class = " divider " > / </span>   
  </li>
  <li>
    <a href="#"> ຫໍ ສະໝຸດ </a> < span class = " divider" > / </span>   
  </li>
  <li class = "active" > ຂໍ້ມູນ </li> 
</ul>

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

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

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

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

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

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

ຕົວຢ່າງ

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

ມາກອັບ

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

<div class = "page" > 
  <ul>
    <li><a href = "#"> ກ່ອນ </a> </li> 
    <li class = "active" > 
      <a href="#"> 1 </a> _ _ _ 
    </li>
    <li><a href="#"> 2 </a> < /li > 
    <li><a href="#"> 3 </a> < /li > 
    <li><a href="#"> 4 </a> < /li > 
    <li><a href="#"> ຕໍ່ ໄປ </a> < /li> 
  </ul>
</div>

ກ່ຽວກັບ pager

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

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

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

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

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

• ທີ່ຜ່ານມາ
• ຕໍ່ໄປ

<ul class = "pager" > 
  <li>
    <a href="#"> ກ່ອນ ໜ້າ </a> _ _ 
  </li>
  <li>
    <a href="#"> ຕໍ່ ໄປ </a> _ _ 
  </li>
</ul>

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

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

• ← ເກົ່າ
• ໃໝ່ກວ່າ →

<ul class = "pager" > 
  <li class = "ກ່ອນໜ້າ" > 
    <a href="#"> & larr ; _ ແກ່ </a> 
  </li>
  <li class = "ຕໍ່ໄປ" > 
    <a href="#"> ໃໝ່ ກວ່າ & rarr ; </a> 
  </li>
</ul>

ກ່ຽວກັບ

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

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

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

ມາກອັບ

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

<div class = "hero-unit" > 
  <h1> ຫົວຂໍ້ </h1>
  <p> ປ້າຍກຳກັບ </p>
  <p>
    <a class="btn btn-primary btn-large"> _ 
      ສຶກສາເພີ່ມເຕີມ
    </a>
  </p>
</div>

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

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

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

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

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

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

• 

  ປ້າຍຊື່ຫຍໍ້

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  ການປະຕິບັດ ການປະຕິບັດ

• 

  ປ້າຍຊື່ຫຍໍ້

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  ການປະຕິບັດ ການປະຕິບັດ

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

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

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

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

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

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

ເຄື່ອງຫມາຍ

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

<ul class = "ຮູບຫຍໍ້" > 
  <li class = "span3" > 
    <a href="#" class="thumbnail"> _ _ _ _ _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

ໄປໄດ້ດີກັບ javascript

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

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

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

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

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

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

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

<div class = "ເຕືອນເຕືອນ-ບລັອກ" > 
  <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _   
  <h4 class = "alert-heading" > ຄຳເຕືອນ! </h4> 
  ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າບໍ່ແມ່ນ ...
</div>

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

<div class = "ເຕືອນເຕືອນ-ຄວາມຜິດພາດ" > 
  ...
</div>

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

<div class = "ເຕືອນ alert-success" > 
  ...
</div>

ຂໍ້ມູນ

<div class = "ການເຕືອນໄພ alert-info" > 
  ...
</div>

ພື້ນຖານ

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

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

ເສັ້ນດ່າງ

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

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

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

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

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

ສີເພີ່ມເຕີມ

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

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

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

ພຶດຕິກຳ

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

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

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

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

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

Wells

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

<div class = "ດີ" > 
  ...
</div>

ປິດໄອຄອນ

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

×

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

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

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