ກຸ່ມປຸ່ມ

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <a class="btn" href="#"> 1 </a> _ _ _ _ _  
  <a class="btn" href="#"> 2 </a> _ _ _ _ _  
  <a class="btn" href="#"> 3 </a> _ _ _ _ _  
</div>

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

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

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

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

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

ເອົາ javascript »

ຫົວຂຶ້ນ

CSS ສໍາລັບກຸ່ມປຸ່ມຢູ່ໃນໄຟລ໌ແຍກຕ່າງຫາກ, button-groups.less.

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

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

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

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

ຄ້າຍຄືກັນກັບກຸ່ມປຸ່ມ, 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>

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

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

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

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

<div class = "btn-group" > 
  <a class="btn" href="#"> ການ ກະ ທຳ </a> _ _ _  
  <a class="btn dropdown-toggle" data-toggle = "dropdown" href = "#" > _   
    <span class = "caret" ></span> 
  </a>
  <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.

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

• ບ້ານ
• ໂປຣໄຟລ໌
• ເລື່ອນລົງ
  • ການປະຕິບັດ
  • ການກະທຳອື່ນ
  • ບາງສິ່ງບາງຢ່າງທີ່ນີ້
  • ແຍກການເຊື່ອມຕໍ່

<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 ຫຼັກດຽວກັນກັບແທັບແລະຢາ, ດັ່ງນັ້ນການນໍາໃຊ້ແລະການປັບແຕ່ງແມ່ນກົງໄປກົງມາ.

ມີໄອຄອນ

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

ຕົວຢ່າງລາຍຊື່ 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 ປະສົມປະສານແຖບຕາຕະລາງໄດ້ໃນສີ່ຮູບແບບ: ເທິງ (ຄ່າເລີ່ມຕົ້ນ), ຂວາ, ລຸ່ມ, ແລະຊ້າຍ.

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

ຕົວຢ່າງແບບ Tabbable

ເພື່ອເຮັດໃຫ້ແຖບສາມາດ tabbable, ຫໍ່ .nav-tabsdiv ອື່ນດ້ວຍຊັ້ນ .tabbable.

ປລັກອິນ jQuery ແບບກຳນົດເອງ

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

ເອົາ javascript →

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

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 ຄົງຢູ່ດ້ານເທິງຂອງຊ່ອງເບິ່ງ, ເພີ່ມ .navbar-fixed-topໃສ່ div ຊັ້ນນອກທີ່ສຸດ, .navbar.

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

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

ຊື່ຍີ່ຫໍ້

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

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

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

ແບບຟອມຄົ້ນຫາໄດ້ຮັບຮູບແບບທີ່ກໍາຫນົດເອງໃນແຖບ navbar ກັບ .navbar-searchຊັ້ນ. ລວມ .pull-left​ຫຼື .pull-right​ຢູ່​ໃນ form​ການ​ຈັດ​ວາງ​ມັນ​.

<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 ກັບ nav ແມ່ນງ່າຍດາຍຫຼາຍ, ແຕ່ມັນຈໍາເປັນຕ້ອງໃຊ້ 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 →

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

ການນໍາທາງ 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" > 
    <a href="#"> ຂໍ້ ມູນ </a> _ _ 
  </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 ສູນກາງເຊື່ອມຕໍ່.

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

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

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

ມາກອັບ

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

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

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

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

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

<div class = "ເຕືອນເຕືອນ-ບລັອກ" > 
  <a class="close" data-dismiss="alert"> × </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>

ເສັ້ນດ່າງ

ໃຊ້ສີເປັນສີເພື່ອສ້າງຜົນກະທົບເປັນເສັ້ນດ່າງ.

<div class = "ຄວາມຄືບໜ້າ progress-info 
     ຄວາມຄືບໜ້າ-ເສັ້ນດ່າງ" >
  <div class = "bar" 
       style = " width : 20 %; " ></div> 
</div>

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

ເອົາຕົວຢ່າງເສັ້ນດ່າງ ແລະເຄື່ອນໄຫວມັນ.

<div class = "ຄວາມຄືບໜ້າ progress-danger 
     progress-triped active" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

ສີເພີ່ມເຕີມ

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

• .progress-info
• .progress-success
• .progress-danger

ອີກທາງເລືອກ, ທ່ານສາມາດປັບແຕ່ງໄຟລ໌ LESS ແລະມ້ວນສີແລະຂະຫນາດຂອງທ່ານເອງ.

ພຶດຕິກຳ

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

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

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

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

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

Wells

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

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

ປ້າຍ

ໃຊ້ປ້າຍໃສ່ອົງປະກອບສໍາລັບການນັບທີ່ຍັງບໍ່ໄດ້ອ່ານຫຼືເປັນຕົວຊີ້ວັດງ່າຍໆ.

<span class = "badge" > 3 </div> 

ປິດໄອຄອນ

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

×

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