ຕົວຢ່າງ

ສະຫຼັບໄດ້, ເມນູບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ. ໄດ້ເຮັດໂຕ້ຕອບກັບ plugin javascript dropdown .

<ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> ປະຕິບັດ </a> </li>  
  <li><a tabindex = "-1" href = "#"> ການ ກະທຳອື່ນ </a></li>  
  <li><a tabindex = "-1" href = "#" > ອັນ ອື່ນຢູ່ນີ້ </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#"> ລິ້ງ ທີ່ ແຍກກັນ </a></li>  
</ul>

ມາກອັບ

ຊອກຫາຢູ່ໃນເມນູເລື່ອນລົງ, ນີ້ແມ່ນ HTML ທີ່ຕ້ອງການ. ທ່ານຈໍາເປັນຕ້ອງໄດ້ຫໍ່ trigger ຂອງ dropdown ແລະເມນູ dropdown ພາຍໃນ .dropdown, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;. ຫຼັງຈາກນັ້ນ, ພຽງແຕ່ສ້າງເມນູ.

<div class = "dropdown" > 
  <!-- ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບແບບເລື່ອນລົງ -->
  <ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#"> ປະຕິບັດ </a> </li>  
    <li><a tabindex = "-1" href = "#"> ການ ກະທຳອື່ນ </a></li>  
    <li><a tabindex = "-1" href = "#" > ອັນ ອື່ນຢູ່ນີ້ </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#"> ລິ້ງ ທີ່ ແຍກກັນ </a></li>  
  </ul>
</div>

ທາງເລືອກ

ຈັດຮຽງເມນູໄປທາງຂວາ ແລະເພີ່ມລະດັບການເລື່ອນລົງເພີ່ມເຕີມ.

ການຈັດຮຽງເມນູ

ຕື່ມການໃສ່ .pull-rightໄປ .dropdown-menuທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.

<ul class = "dropdown-menu pull-right" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >   
  ...
</ul>

ເມນູຍ່ອຍຢູ່ໃນເມນູເລື່ອນລົງ

ເພີ່ມລະດັບພິເສດຂອງເມນູແບບເລື່ອນລົງ, ປະກົດຢູ່ເທິງເຄື່ອງເລື່ອນຄືກັບ OS X, ດ້ວຍການເພີ່ມເຄື່ອງໝາຍທີ່ງ່າຍດາຍບາງອັນ. ເພີ່ມ .dropdown-submenuໃສ່ອັນໃດກໍໄດ້ liໃນເມນູເລື່ອນລົງທີ່ມີຢູ່ແລ້ວເພື່ອການຈັດຮູບແບບອັດຕະໂນມັດ.

<ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> ທາງເລືອກ ເພີ່ມ ເຕີມ </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ຕົວຢ່າງ

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

ກຸ່ມປຸ່ມດຽວ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ຂະໜາດ

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > ປະຕິບັດ </button> 
  <button class = "btn btn-mini 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>

Lightweight defaults ເຄື່ອງຫມາຍດຽວກັນ, ຫ້ອງຮຽນທີ່ແຕກຕ່າງກັນ

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

ແຖບພື້ນຖານ

ເອົາການ <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>

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

ສໍາລັບອົງປະກອບ nav (ແຖບ, ຢາຄຸມກໍາເນີດ, ຫຼືບັນຊີລາຍຊື່), ເພີ່ມ .disabledສໍາລັບ ການເຊື່ອມຕໍ່ສີຂີ້ເຖົ່າແລະບໍ່ມີຜົນກະທົບ hover . ລິ້ງຄ໌ຈະຍັງຄົງສາມາດຄລິກໄດ້, ແນວໃດກໍ່ຕາມ, ເວັ້ນເສຍແຕ່ javascript ແບບກຳນົດເອງຖືກປະຕິບັດເພື່ອປ້ອງກັນການຄລິກເຫຼົ່ານັ້ນ.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" > <a href="#"> ເຮືອນ </a> </li >  
  ...
</ul>

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

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

ສາມາດວາງຊ້ອນກັນໄດ້

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

ແຖບຊ້ອນກັນ

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

ຢາຄຸມກຳເນີດ

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

ເລື່ອນລົງ

ເພີ່ມເມນູແບບເລື່ອນລົງດ້ວຍ HTML ເພີ່ມເຕີມເລັກນ້ອຍແລະ plugin javascript dropdowns .

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

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

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

<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

ເອົາບັນຊີລາຍຊື່ຂອງການເຊື່ອມຕໍ່ແລະເພີ່ມ 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>

ຫມາຍເຫດ ສໍາລັບການຮັງພາຍໃນບັນຊີລາຍຊື່ nav, ປະກອບມີ class="nav nav-list"ຢູ່ໃນຮັງໃດໆ <ul>.

ແບ່ງແນວນອນ

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

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

Tabbable nav

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

ຕົວຢ່າງແບບ Tabbable

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

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

ຈາງລົງໃນແຖບ

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

ຕ້ອງການ plugin jQuery

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

Tabbable ໃນທິດທາງໃດກໍ່ຕາມ

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

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 ພື້ນຖານ

ເພື່ອເລີ່ມຕົ້ນ, navbars ແມ່ນຄົງທີ່ (ບໍ່ໄດ້ສ້ອມແຊມຢູ່ເທິງສຸດ) ແລະປະກອບມີການສະຫນັບສະຫນູນສໍາລັບຊື່ໂຄງການແລະການນໍາທາງພື້ນຖານ. ວາງບ່ອນໃດບ່ອນໜຶ່ງພາຍໃນບ່ອນໃດໜຶ່ງ .container, ເຊິ່ງກຳນົດຄວາມກວ້າງຂອງເວັບໄຊ ແລະເນື້ອຫາຂອງທ່ານ.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class="brand" href="#"> ຫົວ ຂໍ້ </a> _ _ _ _  
    <ul class = "nav" > 
      <li class = "active" > <a href="#"> ເຮືອນ </a> </li >  
      <li><a href = "#"> ລິ້ງ </a> </li> 
      <li><a href = "#"> ລິ້ງ </a> </li> 
    </ul>
  </div>
</div>

ອົງປະກອບ Navbar

ຍີ່ຫໍ້

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

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

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

ລາຍການ 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>

ແບບຟອມ

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

<form class = "navbar-form pull-left" > 
  <ການປ້ອນຂໍ້ມູນ ປະເພດ = "ຂໍ້ຄວາມ" class = "span2" >  
  <button type = "submit" class = "btn" > ສົ່ງ </button>  
</form>

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

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

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

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

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

ການນໍາໃຊ້ແບບເລື່ອນລົງ

ເພີ່ມ dropdowns ແລະ dropups ກັບ nav ກັບ bit ຂອງ markup ແລະ dropdowns javascript plugin .

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

ເຂົ້າໄປເບິ່ງ ເອກະສານ dropdowns javascript ສໍາລັບ markup ແລະຂໍ້ມູນກ່ຽວກັບການໂທຫາ dropdowns.

ຂໍ້​ຄວາມ

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

ການປ່ຽນແປງການສະແດງທາງເລືອກ

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

ແກ້ໄຂຢູ່ເທິງສຸດ

ເພີ່ມ .navbar-fixed-topແລະຈື່ຈໍາໄວ້ວ່າບັນຊີຂອງພື້ນທີ່ເຊື່ອງໄວ້ພາຍໃຕ້ມັນໂດຍການເພີ່ມຢ່າງຫນ້ອຍ 40px paddingເຂົ້າໄປໃນ <body>. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມນີ້ຫຼັງຈາກ CSS Bootstrap ຫຼັກແລະກ່ອນ CSS ຕອບສະຫນອງທາງເລືອກ.

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

ແກ້ໄຂຢູ່ລຸ່ມສຸດ

ເພີ່ມ .navbar-fixed-bottomແທນ.

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

ແຖບດ້ານເທິງຄົງທີ່

ສ້າງແຖບ navbar ຄວາມກວ້າງເຕັມທີ່ເລື່ອນອອກໄປກັບຫນ້າໂດຍການເພີ່ມ .navbar-static-top. ບໍ່ເຫມືອນກັບ .navbar-fixed-topຫ້ອງຮຽນ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງປ່ຽນ padding ໃດໆກ່ຽວກັບ body.

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

ແຖບນຳທາງທີ່ຕອບສະໜອງ

ເພື່ອປະຕິບັດ navbar ຕອບສະຫນອງທີ່ຍຸບລົງ, ຫໍ່ເນື້ອໃນ navbar ຂອງທ່ານໃນ 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>

ການປ່ຽນແປງທີ່ປີ້ນກັບກັນ

ແກ້ໄຂລັກສະນະຂອງແຖບ navbar ໂດຍການເພີ່ມ .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

ຕົວຢ່າງ

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

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

pagination ມາດຕະຖານ

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

<div class = "page" > 
  <ul>
    <li><a href = "#"> ກ່ອນ </a> </li> 
    <li><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>

ທາງເລືອກ

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

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

<div class = "page" > 
  <ul>
    <li class = "disabled" > <a href="#"> ກ່ອນ </a> < /li>  
    <li class = "active" > <a href="#"> 1 </a> < / li>  
    ...
  </ul>
</div>

ຈັດຮຽງ

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

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

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, 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>

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

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

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

ປ້າຍກຳກັບ

ປ້າຍ

ໜ່ວຍພະເອກ

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

<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 ປະເພດໃດກໍໄດ້ເຊັ່ນ: ຫົວຂໍ້, ຫຍໍ້ໜ້າ, ຫຼືປຸ່ມຕ່າງໆເຂົ້າໃນຮູບຫຍໍ້.

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

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

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

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

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

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

ມາກອັບ

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

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

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

<ul class = "ຮູບຫຍໍ້" > 
  <li class = "span4" > 
    <div class = "ຮູບຫຍໍ້" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> ປ້າຍຊື່ຮູບຫຍໍ້ </h3>
      <p> ຫຍໍ້ໜ້າ... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

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

ປິດປຸ່ມ

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

<a href="#" class="close" data-dismiss="ແຈ້ງເຕືອນ"> × < / button > _ _ _ _   

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

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

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

ທາງເລືອກ

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

<div class = "ເຕືອນເຕືອນ-ບລັອກ" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> ຄຳເຕືອນ! </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>

ເສັ້ນດ່າງ

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

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

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

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

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

ຊ້ອນກັນ

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

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

ທາງເລືອກ

ສີເພີ່ມເຕີມ

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-ອັນຕະລາຍ" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

<div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ຄວາມຄືບໜ້າ ຄວາມຄືບໜ້າ-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

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

Wells

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

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

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

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

<div class = "ດີ-ໃຫຍ່" > 
  ...
</div>

<div class = "ດີ-ນ້ອຍ" > 
  ...
</div>

ປິດໄອຄອນ

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

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

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

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

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

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

.ດຶງຊ້າຍ

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

class = "ດຶງຊ້າຍ"

. ດຶງ - ຊ້າຍ {
  ເລື່ອນ : ຊ້າຍ ;
}

.ດຶງຂວາ

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

class = "ດຶງຂວາ"

. ດຶງ - ຂວາ {
  ເລື່ອນ : ສິດ ;
}

.ປິດສຽງ

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

class = "ປິດສຽງ"

. ປິດສຽງ {
  ສີ : #999; 
}

.ແກ້​ໄຂ

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

class = "ການ​ແກ້​ໄຂ​"

. ແກ້​ໄຂ {
  * ຊູມ : 1 ; 
  &: ກ່ອນ ,
  &: ຫຼັງຈາກ {
    ຈໍສະແດງຜົນ : ຕາຕະລາງ ;
    ເນື້ອໃນ : "" ; 
  }
  &: ຫຼັງຈາກ{
    ຈະແຈ້ງ : ທັງສອງ ;
  }
}