ຕົວຢ່າງ

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

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

ຕົວເລືອກເມນູປິດໃຊ້ງານ

ຕື່ມ .disabledໃສ່ <li>ໃນເມນູເລື່ອນລົງເພື່ອປິດການເຊື່ອມຕໍ່.

<ul class = "dropdown-menu" ບົດບາດ = "ເມນູ" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> ລິ້ງ ປົກ ກະຕິ </a></li>  
  < li class = "disabled" > <a tabindex="-1" href="#"> ລິ້ງ ທີ່ຖືກ ປິດ ໃຊ້ງານ </a> < /li>   
  <li><a tabindex = "-1" href = "#"> ລິ້ງ ອື່ນ </a> </li>  
</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" > ຊ້າຍ </button> 
  <button class = "btn" > ກາງ </button> 
  <button class = "btn" > ຂວາ </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 . ການເຊື່ອມຕໍ່ຈະຍັງຄົງສາມາດຄລິກໄດ້, ຢ່າງໃດກໍຕາມ, ເວັ້ນເສຍແຕ່ວ່າທ່ານເອົາ hrefຄຸນລັກສະນະດັ່ງກ່າວອອກ. ອີກທາງເລືອກ, ທ່ານສາມາດປະຕິບັດ 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 ແບບເລື່ອນລົງ .

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

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

ຂ້ອຍຢູ່ໃນພາກທີ 1.

ສະບາຍດີ, ຂ້ອຍຢູ່ໃນພາກ 2.

ສາວໆ, ນີ້ແມ່ນພາກທີ 3.

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

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

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

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

ຂ້ອຍຢູ່ໃນພາກ A.

ສະບາຍດີ, ຂ້ອຍຢູ່ໃນພາກ B.

ສາວໆ, ນີ້ແມ່ນພາກ C.

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

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

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

ຂ້ອຍຢູ່ໃນພາກ A.

ສະບາຍດີ, ຂ້ອຍຢູ່ໃນພາກ B.

ສາວໆ, ນີ້ແມ່ນພາກ C.

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

ແຖບດ້ານຂວາ

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

ຂ້ອຍຢູ່ໃນພາກ A.

ສະບາຍດີ, ຂ້ອຍຢູ່ໃນພາກ B.

ສາວໆ, ນີ້ແມ່ນພາກ C.

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

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

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

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

ເພີ່ມ dropdowns ແລະ dropups ກັບ nav ທີ່ມີເຄື່ອງຫມາຍເລັກນ້ອຍແລະ 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>

ເຂົ້າໄປເບິ່ງ ເອກະສານລາຍການແບບ ເລື່ອນລົງຂອງ JavaScript ເພື່ອເບິ່ງເຄື່ອງໝາຍເພີ່ມເຕີມ ແລະຂໍ້ມູນກ່ຽວກັບການໂທແບບເລື່ອນລົງ.

ຂໍ້ຄວາມ

ຫໍ່ຂໍ້ຄວາມໃນອົງປະກອບທີ່ມີ .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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ແລະອື່ນໆ -->
      </div>
 
    </div>
  </div>
</div>

ລະວັງ! ແຖບ navbar ຕອບສະຫນອງຮຽກຮ້ອງໃຫ້ມີ plugin ຫຍໍ້ລົງ ແລະ ໄຟລ໌ Bootstrap CSS ຕອບ ສະຫນອງ .

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

ແກ້ໄຂລັກສະນະຂອງແຖບ 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="#"> 5 </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>

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

<div class = "page" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ຂະໜາດ

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

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "page" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </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>

ປ້າຍກຳກັບ

ປ້າຍກຳກັບ	ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ	`<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 ງ່າຍດາຍສໍາລັບການໂທຫາຄວາມສົນໃຈເປັນພິເສດຕໍ່ເນື້ອໃນທີ່ໂດດເດັ່ນຫຼືຂໍ້ມູນຂ່າວສານ.

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

<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> ຕົວຢ່າງສ່ວນຫົວ <small> Subtext ສໍາລັບ header </small></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.

ການປະຕິບັດ ການປະຕິບັດ
ປ້າຍຊື່ຫຍໍ້

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 = "span4" > 
    <a href="#" class="thumbnail"> _ _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "ຮູບຫຍໍ້" > 
  <li class = "span4" > 
    <div class = "ຮູບຫຍໍ້" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ປ້າຍຊື່ຮູບຫຍໍ້ </h3>
      <p> ຫຍໍ້ໜ້າ... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

ເຕືອນໄພ! ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.

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

ປິດປຸ່ມ

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

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

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

<ປຸ່ມ ປະເພດ = "ປຸ່ມ" ຫ້ອງຮຽນ  = "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.

<div ຫ້ອງຮຽນ  = "ເຕືອນເຕືອນ-ບລັອກ" >
  <ປຸ່ມ ປະເພດ = "ປຸ່ມ" class = "ປິດ" data-dismiss = "ເຕືອນ"   > × </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 ບໍ່ຮອງຮັບພາບເຄື່ອນໄຫວ.

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

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

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

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

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.

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

<div class = "media" > 
  <a class="pull-left" href="#" > _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

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

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

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

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

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.

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.

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.
ຫົວຂໍ້ສື່ມວນຊົນ
Cras ນັ່ງ amet nibh libero, ໃນ gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "media" > 
    <a class="pull-left" href="#" > _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > ຫົວຂໍ້ສື່ </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

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 ; 
  &: ກ່ອນ ,
  &: ຫຼັງຈາກ {
    ຈໍສະແດງຜົນ : ຕາຕະລາງ ;
    ເນື້ອໃນ : "" ; 
  }
  &: ຫຼັງຈາກ {
    ຈະແຈ້ງ : ທັງສອງ ;
  }
}

ເມນູແບບເລື່ອນລົງ

ຕົວຢ່າງ

ມາກອັບ

ທາງເລືອກ

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

ຕົວເລືອກເມນູປິດໃຊ້ງານ

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

ກຸ່ມປຸ່ມ

ຕົວຢ່າງ

ກຸ່ມປຸ່ມດຽວ

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

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

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

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

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

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

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

ຕ້ອງການ JavaScript

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

ຂະໜາດ

ເມນູເລື່ອນ

Nav: ແຖບ, ຢາຄຸມກໍາເນີດ, ແລະລາຍການ

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

ແຖບພື້ນຖານ

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

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

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

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

ແຖບຊ້ອນກັນ

ຢາຄຸມກຳເນີດ

ເລື່ອນລົງ

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

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

ລາຍຊື່ nav

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

ແບ່ງແນວນອນ

Tabbable nav

ຕົວຢ່າງແບບ Tabbable

ຈາງລົງໃນແຖບ

ຕ້ອງການ plugin jQuery

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

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

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

ແຖບດ້ານຂວາ

Navbar

ແຖບ navbar ພື້ນຖານ

ອົງປະກອບ Navbar

ຍີ່ຫໍ້

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

ແບບຟອມ

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

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

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

ຂໍ້​ຄວາມ

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

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

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

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

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

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

ເຂົ້າໜົມປັງ

ຕົວຢ່າງ

Pagination ສອງທາງເລືອກສໍາລັບການ pageaging ຜ່ານເນື້ອຫາ

pagination ມາດຕະຖານ

ທາງເລືອກ

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

ຂະໜາດ

ຈັດຮຽງ

Pager

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

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

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

ປ້າຍ ແລະປ້າຍ

ປ້າຍກຳກັບ

ປ້າຍ

ຍຸບງ່າຍ

ອົງປະກອບພິມ

ໜ່ວຍພະເອກ

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

ສ່ວນຫົວໜ້າ

ຂໍ້ຄວາມ

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

ຕົວຢ່າງຫົວຫນ້າຂໍ້ ຄວາມຍ່ອຍສໍາລັບສ່ວນຫົວ

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

ຄວາມສໍາເລັດ

.ແກ້ໄຂ