ອົງປະກອບ

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

ກຸ່ມປຸ່ມ

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

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

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

ນີ້ແມ່ນວິທີທີ່ 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-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

ເອົາ javascript »

ຫົວຂຶ້ນ

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

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

ໃຊ້ປຸ່ມໃດກໍໄດ້ເພື່ອກະຕຸ້ນເມນູແບບເລື່ອນລົງໂດຍການວາງມັນໄວ້ພາຍໃນ .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>

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

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

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

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

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

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

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

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

ເປັນຫຍັງຢາເມັດແລະຢາ

ແຖບແລະຢາຄຸມກໍາເນີດໃນ Bootstrap ຖືກສ້າງຂຶ້ນ <ul>ດ້ວຍ HTML ຫຼັກດຽວກັນ, ບັນຊີລາຍຊື່ຂອງການເຊື່ອມຕໍ່. ແລກປ່ຽນລະຫວ່າງແທັບ ຫຼືຢາຄຸມກຳເນີດໂດຍມີພຽງແຕ່ປະເພດ.

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

ແຖບພື້ນຖານ

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

Stackable ເຮັດໃຫ້ແຖບຫຼືຢາວາງຢູ່ໃນແນວຕັ້ງ

ວິທີການ stack 'em

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

ແຖບຊ້ອນກັນ

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

ຢາຄຸມກຳເນີດ

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

Dropdowns ສໍາລັບອົງປະກອບ nav ຂັ້ນສູງ

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

ເມນູແບບເລື່ອນລົງໃນແຖບ 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>

ລາຍຊື່ navs ສ້າງ navs stacked ງ່າຍດາຍ, ດີສໍາລັບ sidebars

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

ລາຍຊື່ 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>

Tabbable nav ເອົາແທັບໄປສູ່ຊີວິດຜ່ານ javascript

ມີຫຍັງແດ່

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

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

ຕົວຢ່າງແບບ Tabbable

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

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

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

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

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

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

ເອົາ javascript →

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

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

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href="#1" data-toggle = "tab"> ພາກ ທີ 1 </a> < / li>   
    <li><a href = "#2" data-toggle = "tab"> ພາກທີ 2 </a> </li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> ຂ້ອຍຢູ່ພາກທີ 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> ສະບາຍດີ ຂ້ອຍຢູ່ພາກທີ 2. </p>
    </div>
  </div>
</div>

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 ຄົງທີ່

ຕົວຢ່າງຂອງແຖບນໍາທາງແບບຄົງທີ່ (ບໍ່ຄົງທີ່ຢູ່ເທິງສຸດ) ທີ່ມີຊື່ໂຄງການ, ການນໍາທາງ ແລະແບບຟອມການຊອກຫາ.

Navbar scaffolding

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

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

ເພື່ອເຮັດໃຫ້ແຖບ navbar ຄົງຢູ່ດ້ານເທິງຂອງຊ່ອງເບິ່ງ, ເພີ່ມ .navbar-fixed-topໃສ່ div ຊັ້ນນອກທີ່ສຸດ, .navbar. ໃນ CSS ຂອງທ່ານ, ທ່ານຍັງຈະຕ້ອງບັນຊີສໍາລັບການຊ້ອນກັນທີ່ມັນເຮັດໃຫ້ເກີດໂດຍການເພີ່ມ padding-top: 40px;ໃສ່ <body>.

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

ຊື່ຍີ່ຫໍ້

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

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

ລະວັງ! ແຖບ navbar ຕອບສະຫນອງຕ້ອງການ plugin ຫຍໍ້ .

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

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

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

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

ການເພີ່ມ 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

ອົງປະກອບຂອງ 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>

ປ້າຍກຳກັບ	ມາກອັບ
ຄ່າເລີ່ມຕົ້ນ	`<span class="label">Default</span>`
ໃຫມ່	`<span class="label label-success">New</span>`
ຄຳເຕືອນ	`<span class="label label-warning">Warning</span>`
ສຳຄັນ	`<span class="label label-important">Important</span>`
ຂໍ້ມູນ	`<span class="label label-info">Info</span>`

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, ຮູບຫຍໍ້ຂອງ 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"> × </a> _ _ _ 
  <strong> ເຕືອນ! </strong> ກວດເບິ່ງຕົວເອງທີ່ດີທີ່ສຸດ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.
</div>

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

ເຕືອນໄພ!

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

<div class = "ເຕືອນເຕືອນ-ບລັອກ" > 
  <a class="close"> × </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 
     ຄວາມຄືບໜ້າແບບເຄື່ອນໄຫວ" >
  <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>

ປຸ່ມກຸ່ມປຸ່ມ ເຂົ້າຮ່ວມເພື່ອເຮັດໜ້າທີ່ຄ້າຍຄືແຖບເຄື່ອງມືຫຼາຍຂຶ້ນ

ກຸ່ມປຸ່ມ

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

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

ຫົວຂຶ້ນ

ເມນູເລື່ອນ ລົງປຸ່ມ ຕາມບໍລິບົດທີ່ສ້າງຂຶ້ນໃນກຸ່ມປຸ່ມ

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

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

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

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

Nav, tabs, and pills ການນໍາທາງແບບລາຍຊື່ທີ່ສາມາດປັບແຕ່ງໄດ້ສູງ

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

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

ເປັນຫຍັງຢາເມັດແລະຢາ

ແຖບພື້ນຖານ

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

Stackable ເຮັດໃຫ້ແຖບຫຼືຢາວາງຢູ່ໃນແນວຕັ້ງ

ວິທີການ stack 'em

ແຖບຊ້ອນກັນ

ຢາຄຸມກຳເນີດ

Dropdowns ສໍາລັບອົງປະກອບ nav ຂັ້ນສູງ

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

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

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

ລາຍຊື່ navs ສ້າງ navs stacked ງ່າຍດາຍ, ດີສໍາລັບ sidebars

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

ມີໄອຄອນ

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

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

Tabbable nav ເອົາແທັບໄປສູ່ຊີວິດຜ່ານ javascript

ມີຫຍັງແດ່

ຕົວຢ່າງແບບ Tabbable

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

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

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

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

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

ແຖບດ້ານຂວາ

Navbar

ຕົວຢ່າງແຖບ navbar ຄົງທີ່

Navbar scaffolding

ຊື່ຍີ່ຫໍ້

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

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

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

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

ເຂົ້າໜົມປັງ

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

ຕົວຢ່າງ

ມາກອັບ

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

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

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

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

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

ຕົວຢ່າງ

ມາກອັບ

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

ກ່ຽວກັບ pager

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

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

ປ້າຍຊື່ໃນແຖວ ປ້າຍກຳ ກັບ ແລະໝາຍຫຍໍ້ຂໍ້ຄວາມ

ຮູບຫຍໍ້ ຂອງຕາຂ່າຍໄຟຟ້າ, ວິດີໂອ, ຂໍ້ຄວາມ, ແລະອື່ນໆອີກ

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

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

ປ້າຍຊື່ຫຍໍ້

ປ້າຍຊື່ຫຍໍ້

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

ງ່າຍດາຍ, ເຄື່ອງຫມາຍການປ່ຽນແປງ

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

ເຄື່ອງຫມາຍ

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

ຮູບແບບການ ແຈ້ງເຕືອນ ສໍາລັບຄວາມສໍາເລັດ, ການເຕືອນໄພ, ແລະຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດ

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

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

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

ໄປໄດ້ດີກັບ javascript

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

ເຕືອນໄພ!

ທາງເລືອກຕາມ ບໍລິບົດ ເພີ່ມຫ້ອງຮຽນທາງເລືອກເພື່ອປ່ຽນຄວາມໝາຍຂອງການແຈ້ງເຕືອນ

ຄວາມສໍາເລັດ