glyphs ທີ່ມີຢູ່

ລວມມີຫຼາຍກວ່າ 250 glyphs ໃນຮູບແບບຕົວອັກສອນຈາກຊຸດ Glyphicon Halflings. Glyphicons Halflings ປົກກະຕິແລ້ວບໍ່ມີໃຫ້ຟຣີ, ແຕ່ຜູ້ສ້າງຂອງພວກເຂົາໄດ້ເຮັດໃຫ້ພວກເຂົາສາມາດໃຊ້ໄດ້ສໍາລັບ Bootstrap ໂດຍບໍ່ເສຍຄ່າ. ເພື່ອເປັນການຂອບໃຈ, ພວກເຮົາພຽງແຕ່ຂໍໃຫ້ທ່ານລວມເອົາການເຊື່ອມຕໍ່ກັບຄືນໄປບ່ອນ Glyphicons ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-ລົບ
glyphicon glyphicon-cloud
glyphicon glyphicon-ຊອງຈົດໝາຍ
glyphicon glyphicon-ສໍ
glyphicon glyphicon-ແກ້ວ
glyphicon glyphicon-ດົນຕີ
glyphicon glyphicon-ຄົ້ນຫາ
glyphicon glyphicon-ຫົວໃຈ
glyphicon glyphicon-star
glyphicon glyphicon-star-ເປົ່າ
glyphicon glyphicon-ຜູ້ໃຊ້
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-ເອົາອອກ
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-ສັນຍານ
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-ດາວໂຫຼດ
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-ທຸງ
glyphicon glyphicon-ຫູຟັງ
glyphicon glyphicon-ປະລິມານປິດ
glyphicon glyphicon-ປະລິມານລົງ
glyphicon glyphicon-ປະລິມານຂຶ້ນ
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-ກ້ອງຖ່າຍຮູບ
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-ຊ້າຍ
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-ບັນຊີລາຍຊື່
glyphicon glyphicon-indent-ຊ້າຍ
glyphicon glyphicon-indent-ຂວາ
glyphicon glyphicon-facetime-video
glyphicon glyphicon-ຮູບ
glyphicon glyphicon-map-marker
glyphicon glyphicon-ປັບ
glyphicon glyphicon-tint
glyphicon glyphicon-ດັດແກ້
glyphicon glyphicon-share
glyphicon glyphicon-ກວດ
glyphicon glyphicon-ຍ້າຍ
glyphicon glyphicon-ກ້າວ-ຖອຍຫຼັງ
glyphicon glyphicon-ໄວ-ກັບຄືນ
glyphicon glyphicon-ຖອຍຫຼັງ
glyphicon glyphicon-play
glyphicon glyphicon-ຢຸດຊົ່ວຄາວ
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-ກ້າວໄປຂ້າງຫນ້າ
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-ຊ້າຍ
glyphicon glyphicon-chevron-ຂວາ
glyphicon glyphicon-plus-sign
glyphicon glyphicon-ເຄື່ອງໝາຍລົບ
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-ພາບຫນ້າຈໍ
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-ວົງ
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-ຊ້າຍ
glyphicon glyphicon-ລູກສອນ-ຂວາ
glyphicon glyphicon-ລູກສອນຂຶ້ນ
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-ປັບຂະໜາດ-ເຕັມ
glyphicon glyphicon-ປັບຂະໜາດ-ນ້ອຍ
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-ຂອງຂວັນ
glyphicon glyphicon-ໃບ
glyphicon glyphicon-ໄຟ
glyphicon glyphicon-eye-open
glyphicon glyphicon-ຕາ-ປິດ
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-ປະຕິທິນ
glyphicon glyphicon-ສຸ່ມ
glyphicon glyphicon-ຄໍາເຫັນ
glyphicon glyphicon-ແມ່ເຫຼັກ
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-ລົງ
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-ປັບຂະໜາດ-ຕັ້ງ
glyphicon glyphicon-ປັບຂະໜາດ-ແນວນອນ
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-ຍົກໂປ້ມືຂຶ້ນ
glyphicon glyphicon-ໂປ້ມືລົງ
glyphicon glyphicon-ມື-ຂວາ
glyphicon glyphicon-ມືຊ້າຍ
glyphicon glyphicon-ມືຂຶ້ນ
glyphicon glyphicon-ມືລົງ
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-ຊ້າຍ
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-ເຕັມຈໍ
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-ຫົວໃຈ-ເປົ່າ
glyphicon glyphicon-link
glyphicon glyphicon-ໂທລະສັບ
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-ຈັດຮຽງຕາມຕົວອັກສອນ
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-ຈັດຮຽງຕາມລໍາດັບ
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-ຄຸນລັກສະນະ
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-ບໍ່ໄດ້ເລືອກ
glyphicon glyphicon-ຂະຫຍາຍ
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-ເຂົ້າສູ່ລະບົບ
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-ບັນທຶກ
glyphicon glyphicon-save
glyphicon glyphicon-ເປີດ
glyphicon glyphicon-ບັນທຶກໄວ້
glyphicon glyphicon-ນໍາເຂົ້າ
glyphicon glyphicon-ສົ່ງອອກ
glyphicon glyphicon-ສົ່ງ
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-ບັນທຶກໄວ້
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-ບັດເຄຣດິດ
glyphicon glyphicon-ໂອນ
glyphicon glyphicon-ເຄື່ອງຕັດ
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-ຫູຟັງ
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-ສະຖິຕິ
glyphicon glyphicon-sd-ວິດີໂອ
glyphicon glyphicon-hd-video
glyphicon glyphicon-ຄໍາບັນຍາຍ
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-ການລົງທະບຽນ-ເຄື່ອງໝາຍ
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-ຕົ້ນໄມ້-conifer
glyphicon glyphicon-ຕົ້ນໄມ້ປ່ຽນໃບ
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-ລະດັບຂຶ້ນ
glyphicon glyphicon-copy
glyphicon glyphicon-ວາງ
glyphicon glyphicon-ເຕືອນ
glyphicon glyphicon-ເທົ່າກັນ
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-ອະທິການ
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-ຕຽງ
glyphicon glyphicon-apple
glyphicon glyphicon-ລຶບ
glyphicon glyphicon-hourglass
glyphicon glyphicon-ໂຄມໄຟ
glyphicon glyphicon-ຊໍ້າກັນ
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-ມີດຕັດ
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-ລົດຊາດ
glyphicon glyphicon-ການສຶກສາ
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-ທາງເລືອກ-ຕັ້ງ
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-ນໍ້າມັນ
glyphicon glyphicon-ເມັດພືດ
glyphicon glyphicon-ແວ່ນຕາກັນແດດ
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-ຂໍ້ຄວາມ-ພື້ນຫຼັງ
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-ສາມຫຼ່ຽມ-ຂວາ
glyphicon glyphicon-ສາມຫຼ່ຽມ-ຊ້າຍ
glyphicon glyphicon-ສາມຫຼ່ຽມ-ລຸ່ມ
glyphicon glyphicon-ສາມຫຼ່ຽມ-ເທິງ
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-ຊ້າຍ
glyphicon glyphicon-ເມນູ-ຂວາ
glyphicon glyphicon-menu-ລົງ
glyphicon glyphicon-ເມນູຂຶ້ນ

ວິທີການນໍາໃຊ້

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

ຢ່າປະສົມກັບສ່ວນປະກອບອື່ນໆ

ຫ້ອງຮຽນໄອຄອນບໍ່ສາມາດຖືກລວມໂດຍກົງກັບອົງປະກອບອື່ນໆ. ພວກມັນບໍ່ຄວນໃຊ້ພ້ອມກັບຫ້ອງຮຽນອື່ນໆໃນອົງປະກອບດຽວກັນ. ແທນທີ່ຈະ, ຕື່ມການຊ້ອນກັນ <span>ແລະນໍາໃຊ້ຫ້ອງຮຽນໄອຄອນກັບ <span>.

ພຽງແຕ່ສໍາລັບການນໍາໃຊ້ໃນອົງປະກອບເປົ່າ

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

ການປ່ຽນແປງທີ່ຕັ້ງຕົວອັກສອນ icon

Bootstrap ສົມມຸດວ່າໄອຄອນໄຟລ໌ຕົວອັກສອນຈະຢູ່ໃນໄດເລກະ ../fonts/ທໍລີ, ທຽບກັບໄຟລ໌ CSS ທີ່ຖືກລວບລວມ. ການເຄື່ອນຍ້າຍຫຼືປ່ຽນຊື່ໄຟລ໌ຕົວອັກສອນເຫຼົ່ານັ້ນຫມາຍເຖິງການປັບປຸງ CSS ໃນຫນຶ່ງໃນສາມວິທີ:

ປ່ຽນແປງ @icon-font-pathແລະ/ຫຼື @icon-font-nameຕົວແປໃນແຫຼ່ງໄຟລ໌ຫນ້ອຍ.
ໃຊ້ ທາງເລືອກ URLs ທີ່ກ່ຽວຂ້ອງທີ່ ສະຫນອງໂດຍຜູ້ລວບລວມຂໍ້ມູນຫນ້ອຍ.
ປ່ຽນ url()ເສັ້ນທາງໃນ CSS ທີ່ລວບລວມ.

ໃຊ້ທາງເລືອກໃດກໍ່ຕາມທີ່ເຫມາະສົມກັບການຕັ້ງຄ່າການພັດທະນາສະເພາະຂອງທ່ານ.

ໄອຄອນທີ່ສາມາດເຂົ້າເຖິງໄດ້

ຮຸ່ນທີ່ທັນສະໄຫມຂອງເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອຈະປະກາດເນື້ອຫາທີ່ສ້າງ CSS, ເຊັ່ນດຽວກັນກັບຕົວອັກສອນ Unicode ສະເພາະ. ເພື່ອຫຼີກເວັ້ນການຜົນຜະລິດທີ່ບໍ່ໄດ້ຕັ້ງໃຈແລະສັບສົນໃນຕົວອ່ານຫນ້າຈໍ (ໂດຍສະເພາະເມື່ອໄອຄອນຖືກນໍາໃຊ້ເພື່ອຕົບແຕ່ງ), ພວກເຮົາເຊື່ອງພວກມັນດ້ວຍ aria-hidden="true"ຄຸນລັກສະນະ.

ຖ້າທ່ານກໍາລັງໃຊ້ໄອຄອນເພື່ອສະແດງຄວາມຫມາຍ (ແທນທີ່ຈະພຽງແຕ່ເປັນອົງປະກອບຕົກແຕ່ງ), ໃຫ້ແນ່ໃຈວ່າຄວາມຫມາຍນີ້ຍັງຖືກຖ່າຍທອດໄປສູ່ເຕັກໂນໂລຢີທີ່ຊ່ວຍ - ຕົວຢ່າງ, ປະກອບມີເນື້ອຫາເພີ່ມເຕີມ, ເຊື່ອງໄວ້ດ້ວຍສາຍຕາ .sr-only.

ຖ້າທ່ານກໍາລັງສ້າງການຄວບຄຸມໂດຍບໍ່ມີຂໍ້ຄວາມອື່ນ (ເຊັ່ນ <button>ວ່າມີພຽງແຕ່ໄອຄອນ), ທ່ານຄວນສະຫນອງເນື້ອຫາທາງເລືອກເພື່ອກໍານົດຈຸດປະສົງຂອງການຄວບຄຸມ, ດັ່ງນັ້ນມັນຈຶ່ງມີຄວາມຫມາຍສໍາລັບຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ. ໃນກໍລະນີນີ້, ທ່ານສາມາດເພີ່ມ aria-labelຄຸນລັກສະນະຂອງການຄວບຄຸມຕົວມັນເອງ.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ຕົວຢ່າງ

ໃຊ້ພວກມັນຢູ່ໃນປຸ່ມ, ກຸ່ມປຸ່ມສໍາລັບແຖບເຄື່ອງມື, ການນໍາທາງ, ຫຼືການປ້ອນຂໍ້ມູນແບບຟອມ.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ໄອຄອນທີ່ໃຊ້ໃນການ ແຈ້ງເຕືອນ ເພື່ອບົ່ງບອກວ່າມັນເປັນຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດ, ພ້ອມກັບ .sr-onlyຂໍ້ຄວາມເພີ່ມເຕີມເພື່ອບົ່ງບອກຂໍ້ແນະນຳນີ້ໃຫ້ກັບຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ.

ໃສ່ທີ່ຢູ່ອີເມວທີ່ຖືກຕ້ອງ

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

ຕົວຢ່າງ

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ເມນູແບບເລື່ອນລົງສາມາດປ່ຽນແປງໄດ້ເພື່ອຂະຫຍາຍຂຶ້ນເທິງ (ແທນທີ່ຈະລົງລຸ່ມ) ໂດຍການເພີ່ມ .dropupໃສ່ຕົວແມ່.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ຈັດຮຽງ

ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູເລື່ອນລົງຈະຖືກຈັດວາງໂດຍອັດຕະໂນມັດ 100% ຈາກດ້ານເທິງ ແລະທາງຊ້າຍຂອງພໍ່ແມ່ຂອງມັນ. ຕື່ມການໃສ່ .dropdown-menu-rightໄປ .dropdown-menuທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

ສ່ວນຫົວ

ເພີ່ມສ່ວນຫົວໃສ່ປ້າຍກຳກັບພາກສ່ວນຂອງຄຳສັ່ງຢູ່ໃນເມນູແບບເລື່ອນລົງໃດໆກໍຕາມ.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ຕົວແບ່ງ

ເພີ່ມຕົວແບ່ງໄປຫາຊຸດເຊື່ອມຕໍ່ແຍກຕ່າງຫາກໃນເມນູແບບເລື່ອນລົງ.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

ປິດການໃຊ້ງານລາຍການເມນູ

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ຈັດກຸ່ມຊຸດຂອງປຸ່ມຮ່ວມກັນຢູ່ໃນແຖວດຽວກັບກຸ່ມປຸ່ມ. ຕື່ມການທາງເລືອກໃນວິທະຍຸ JavaScript ແລະພຶດຕິກໍາຮູບແບບ checkbox ກັບ plugin ປຸ່ມຂອງພວກເຮົາ .

ຄໍາແນະນໍາເຄື່ອງມື & popovers ໃນກຸ່ມປຸ່ມຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຫຼື popovers ກ່ຽວກັບອົງປະກອບພາຍໃນ .btn-group, ທ່ານຈະຕ້ອງກໍານົດທາງເລືອກ container: 'body'ເພື່ອຫຼີກເວັ້ນການຜົນຂ້າງຄຽງທີ່ບໍ່ຕ້ອງການ (ເຊັ່ນ: ອົງປະກອບທີ່ຂະຫຍາຍກວ້າງຂຶ້ນແລະ / ຫຼືສູນເສຍມຸມມົນຂອງມັນເມື່ອຄໍາແນະນໍາຫຼື popover ຖືກກະຕຸ້ນ).

ໃຫ້ແນ່ໃຈວ່າຖືກຕ້ອງ `role`ແລະໃຫ້ປ້າຍຊື່

ເພື່ອໃຫ້ເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ເພື່ອບົ່ງບອກວ່າປຸ່ມຕ່າງໆຖືກຈັດເປັນກຸ່ມ, ຕ້ອງມີ roleຄຸນສົມບັດທີ່ເຫມາະສົມ. ສໍາລັບກຸ່ມປຸ່ມ, ນີ້ຈະເປັນ role="group", ໃນຂະນະທີ່ແຖບເຄື່ອງມືຄວນຈະມີ role="toolbar".

ຂໍ້ຍົກເວັ້ນຫນຶ່ງແມ່ນກຸ່ມທີ່ມີພຽງແຕ່ການຄວບຄຸມດຽວ (ຕົວຢ່າງເຊັ່ນ ກຸ່ມປຸ່ມທີ່ສົມເຫດສົມຜົນທີ່ ມີ <button>ອົງປະກອບ) ຫຼືແບບເລື່ອນລົງ.

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

ຕົວຢ່າງພື້ນຖານ

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

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

ຂະໜາດ

ແທນທີ່ຈະໃຊ້ຫ້ອງຮຽນການປັບຂະໜາດປຸ່ມໃສ່ທຸກປຸ່ມໃນກຸ່ມ, ພຽງແຕ່ເພີ່ມ .btn-group-*ໃສ່ແຕ່ລະ ກຸ່ມ .btn-group, ລວມທັງເມື່ອສ້າງກຸ່ມຫຼາຍກຸ່ມ.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ຮັງ

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ການປ່ຽນແປງແນວຕັ້ງ

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

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

ກຸ່ມປຸ່ມທີ່ສົມເຫດສົມຜົນ

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

ການຈັດການຊາຍແດນ

ເນື່ອງຈາກ HTML ແລະ CSS ສະເພາະທີ່ໃຊ້ເພື່ອແກ້ໄຂປຸ່ມ (ຄື display: table-cell), ຊາຍແດນລະຫວ່າງພວກມັນແມ່ນເພີ່ມຂຶ້ນສອງເທົ່າ. ໃນກຸ່ມປຸ່ມປົກກະຕິ, margin-left: -1pxຖືກນໍາໃຊ້ເພື່ອ stack ຊາຍແດນແທນທີ່ຈະເອົາອອກ. ຢ່າງໃດກໍຕາມ, marginບໍ່ໄດ້ເຮັດວຽກກັບ display: table-cell. ດັ່ງນັ້ນ, ອີງຕາມການປັບແຕ່ງຂອງທ່ານຕໍ່ກັບ Bootstrap, ທ່ານອາດຈະຕ້ອງການເອົາຫຼືປ່ຽນສີຂອບໃຫມ່.

IE8 ແລະຊາຍແດນ

Internet Explorer 8 ບໍ່ໄດ້ສະແດງຂອບເຂດຂອງປຸ່ມຕ່າງໆໃນກຸ່ມປຸ່ມທີ່ສົມເຫດສົມຜົນ, ບໍ່ວ່າຈະຢູ່ໃນ <a>ຫຼື <button>ອົງປະກອບ. ເພື່ອເຂົ້າໄປທີ່ນັ້ນ, ໃຫ້ຫໍ່ແຕ່ລະປຸ່ມໃສ່ໃນອັນອື່ນ .btn-group.

ເບິ່ງ #12476 ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.

ມີ `<a>`ອົງປະກອບ

ພຽງແຕ່ຫໍ່ຊຸດຂອງ .btns ໃນ .btn-group.btn-group-justified.

ຊ້າຍ ກາງ ສິດ

ຊ້າຍ ກາງ

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ລິ້ງທີ່ເຮັດໜ້າທີ່ເປັນປຸ່ມ

ຖ້າ <a>ອົງປະກອບຖືກໃຊ້ເພື່ອເຮັດຫນ້າທີ່ເປັນປຸ່ມ - ກະຕຸ້ນການເຮັດວຽກໃນຫນ້າ, ແທນທີ່ຈະນໍາທາງໄປຫາເອກະສານຫຼືພາກສ່ວນອື່ນພາຍໃນຫນ້າປະຈຸບັນ - ພວກເຂົາຄວນຈະຖືກມອບໃຫ້ທີ່ເຫມາະສົມ role="button".

ມີ `<button>`ອົງປະກອບ

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

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

ການຂຶ້ນກັບປລັກອິນ

ປຸ່ມ dropdowns ຕ້ອງການ plugin dropdown ທີ່ຈະລວມຢູ່ໃນ Bootstrap ສະບັບຂອງທ່ານ.

ເລື່ອນລົງປຸ່ມດຽວ

ປ່ຽນປຸ່ມເປັນປຸ່ມສະຫຼັບແບບເລື່ອນລົງດ້ວຍການປ່ຽນແປງເຄື່ອງໝາຍພື້ນຖານບາງຢ່າງ.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

ເຊັ່ນດຽວກັນ, ສ້າງແຖບເລື່ອນລົງຂອງປຸ່ມທີ່ແຕກແຍກກັບການປ່ຽນແປງເຄື່ອງຫມາຍດຽວກັນ, ພຽງແຕ່ມີປຸ່ມແຍກຕ່າງຫາກ.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ຂະໜາດ

ປຸ່ມເລື່ອນລົງເຮັດວຽກກັບປຸ່ມທຸກຂະໜາດ.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ການປ່ຽນແປງແບບ Dropup

ກະຕຸ້ນເມນູແບບເລື່ອນລົງຂ້າງເທິງອົງປະກອບໂດຍການເພີ່ມ .dropupໃສ່ພໍ່ແມ່.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ຂະຫຍາຍການຄວບຄຸມແບບຟອມໂດຍການເພີ່ມຂໍ້ຄວາມ ຫຼືປຸ່ມກ່ອນ, ຫຼັງ, ຫຼືທັງສອງດ້ານຂອງຂໍ້ຄວາມໃດໆກໍຕາມ <input>. ໃຊ້ .input-groupກັບ .input-group-addonຫຼື .input-group-btnເພື່ອນຳໜ້າ ຫຼືຕໍ່ທ້າຍອົງປະກອບໃສ່ອັນດຽວ .form-control.

Textual `<input>`s ເທົ່ານັ້ນ

ຫຼີກເວັ້ນການນໍາໃຊ້ <select>ອົງປະກອບຢູ່ທີ່ນີ້ຍ້ອນວ່າພວກມັນບໍ່ສາມາດຖືກຈັດຮູບແບບເຕັມຮູບແບບໃນຕົວທ່ອງເວັບ WebKit.

ຫຼີກເວັ້ນການນໍາໃຊ້ <textarea>ອົງປະກອບຢູ່ທີ່ນີ້ຍ້ອນວ່າ rowsຄຸນລັກສະນະຂອງພວກມັນຈະບໍ່ຖືກເຄົາລົບໃນບາງກໍລະນີ.

ຄໍາແນະນໍາເຄື່ອງມື & popovers ໃນກຸ່ມ input ຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຫຼື popovers ກ່ຽວກັບອົງປະກອບພາຍໃນ .input-group, ທ່ານຈະຕ້ອງກໍານົດທາງເລືອກ container: 'body'ເພື່ອຫຼີກເວັ້ນຜົນກະທົບຂ້າງຄຽງທີ່ບໍ່ຕ້ອງການ (ເຊັ່ນ: ອົງປະກອບທີ່ຂະຫຍາຍກວ້າງຂຶ້ນແລະ / ຫຼືສູນເສຍມຸມມົນຂອງມັນເມື່ອຄໍາແນະນໍາຫຼື popover ຖືກກະຕຸ້ນ).

ຢ່າປະສົມກັບສ່ວນປະກອບອື່ນໆ

ຢ່າປະປົນກຸ່ມແບບຟອມ ຫຼືຊັ້ນຖັນແຖວໂດຍກົງກັບກຸ່ມປ້ອນຂໍ້ມູນ. ແທນທີ່ຈະ, ວາງກຸ່ມການປ້ອນຂໍ້ມູນພາຍໃນກຸ່ມແບບຟອມ ຫຼືອົງປະກອບທີ່ກ່ຽວຂ້ອງກັບຕາຂ່າຍ.

ເພີ່ມປ້າຍກຳກັບສະເໝີ

ໂປຣແກຣມອ່ານໜ້າຈໍຈະມີບັນຫາກັບແບບຟອມຂອງເຈົ້າຫາກເຈົ້າບໍ່ໃສ່ປ້າຍກຳກັບສຳລັບທຸກໆການປ້ອນຂໍ້ມູນ. ສໍາລັບກຸ່ມການປ້ອນຂໍ້ມູນເຫຼົ່ານີ້, ໃຫ້ແນ່ໃຈວ່າປ້າຍກຳກັບ ຫຼືການທໍາງານເພີ່ມເຕີມໃດນຶ່ງຖືກຖ່າຍທອດໄປສູ່ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ.

ເຕັກນິກທີ່ແນ່ນອນທີ່ຈະນໍາໃຊ້ ( <label>ອົງປະກອບທີ່ເຫັນໄດ້, <label>ອົງປະກອບທີ່ເຊື່ອງໄວ້ໂດຍໃຊ້ .sr-onlyຊັ້ນ, ຫຼືການນໍາໃຊ້ aria-label, aria-labelledby, aria-describedby, titleຫຼື placeholderຄຸນລັກສະນະ) ແລະສິ່ງທີ່ຂໍ້ມູນເພີ່ມເຕີມທີ່ຈະຕ້ອງໄດ້ຮັບການຖ່າຍທອດຈະແຕກຕ່າງກັນໄປຕາມປະເພດທີ່ແນ່ນອນຂອງ widget ໃນການໂຕ້ຕອບທີ່ທ່ານກໍາລັງປະຕິບັດ. ຕົວຢ່າງໃນພາກນີ້ສະຫນອງບາງວິທີການແນະນໍາ, ແຕ່ລະກໍລະນີສະເພາະ.

ຕົວຢ່າງພື້ນຖານ

ວາງຫນຶ່ງສ່ວນເສີມ ຫຼືປຸ່ມໃສ່ສອງຂ້າງຂອງອິນພຸດ. ເຈົ້າອາດຈະວາງອັນໜຶ່ງໃສ່ທັງສອງດ້ານຂອງການປ້ອນຂໍ້ມູນ.

ພວກເຮົາບໍ່ຮອງຮັບຫຼາຍ add-ons ( .input-group-addonຫຼື .input-group-btn) ຢູ່ຂ້າງດຽວ.

ພວກເຮົາບໍ່ຮອງຮັບການຄວບຄຸມແບບຟອມຫຼາຍອັນໃນກຸ່ມການປ້ອນຂໍ້ມູນດຽວ.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ຂະໜາດ

ເພີ່ມຫ້ອງຮຽນຂະຫນາດຂອງແບບຟອມທີ່ກ່ຽວຂ້ອງກັບ .input-groupຕົວມັນເອງແລະເນື້ອໃນພາຍໃນຈະປັບຂະຫນາດອັດຕະໂນມັດ - ບໍ່ຈໍາເປັນຕ້ອງເຮັດຊ້ໍາຫ້ອງຮຽນຂະຫນາດການຄວບຄຸມແບບຟອມໃນແຕ່ລະອົງປະກອບ.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ກ່ອງກາເຄື່ອງຫມາຍແລະ addons ວິທະຍຸ

ວາງກ່ອງໝາຍ ຫຼືຕົວເລືອກວິທະຍຸໃດນຶ່ງພາຍໃນ addon ຂອງກຸ່ມປ້ອນຂໍ້ມູນແທນຂໍ້ຄວາມ.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ປຸ່ມ addons

ປຸ່ມຕ່າງໆໃນກຸ່ມປ້ອນຂໍ້ມູນແມ່ນແຕກຕ່າງກັນເລັກນ້ອຍ ແລະຕ້ອງການການວາງຮັງຕື່ມອີກ. ແທນທີ່ຈະ .input-group-addon, ທ່ານຈະຕ້ອງໃຊ້ .input-group-btnເພື່ອຫໍ່ປຸ່ມ. ອັນນີ້ແມ່ນຕ້ອງການເນື່ອງຈາກຮູບແບບຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນທີ່ບໍ່ສາມາດ overridden ໄດ້.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ປຸ່ມແບ່ງສ່ວນ

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

ປຸ່ມຫຼາຍ

ໃນຂະນະທີ່ທ່ານສາມາດມີພຽງຫນຶ່ງ add-on ຕໍ່ຂ້າງ, ທ່ານສາມາດມີຫຼາຍປຸ່ມພາຍໃນດຽວ .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs ທີ່ມີຢູ່ໃນ Bootstrap ໄດ້ແບ່ງປັນເຄື່ອງຫມາຍ, ເລີ່ມຕົ້ນດ້ວຍ .navຊັ້ນພື້ນຖານ, ເຊັ່ນດຽວກັນກັບລັດທີ່ໃຊ້ຮ່ວມກັນ. Swap modifier classes ເພື່ອສະຫຼັບລະຫວ່າງແຕ່ລະຮູບແບບ.

ການໃຊ້ navs ສໍາລັບແຖບແຖບຕ້ອງການ plugin ແຖບ JavaScript

ສໍາລັບແຖບທີ່ມີພື້ນທີ່ສາມາດ tabbable, ທ່ານຕ້ອງໃຊ້ ແທັບ JavaScript plugin . markup ຍັງຈະຮຽກຮ້ອງໃຫ້ມີ roleຄຸນລັກສະນະ ARIA ເພີ່ມເຕີມ - ເບິ່ງເຄື່ອງຫມາຍ ຕົວຢ່າງ ຂອງ plugin ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ.

ເຮັດໃຫ້ navs ທີ່ໃຊ້ເປັນການນໍາທາງສາມາດເຂົ້າເຖິງໄດ້

ຖ້າທ່ານກໍາລັງໃຊ້ navs ເພື່ອສະຫນອງແຖບນໍາທາງ, ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມໃສ່ role="navigation"ພາຊະນະຕົ້ນຕໍທີ່ມີເຫດຜົນທີ່ສຸດຂອງ <ul>, ຫຼືຫໍ່ <nav>ອົງປະກອບປະມານການນໍາທາງທັງຫມົດ. ຢ່າເພີ່ມບົດບາດໃຫ້ກັບ <ul>ຕົວມັນເອງ, ເພາະວ່ານີ້ຈະປ້ອງກັນບໍ່ໃຫ້ມັນຖືກປະກາດເປັນບັນຊີລາຍຊື່ຕົວຈິງໂດຍເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ.

ແຖບ

ໃຫ້ສັງເກດວ່າ .nav-tabsຫ້ອງຮຽນຕ້ອງການ .navຊັ້ນພື້ນຖານ.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ຢາຄຸມກໍາເນີດ

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ຢາຄຸມກໍາເນີດແມ່ນຍັງ stackable ຕັ້ງ. ພຽງແຕ່ເພີ່ມ .nav-stacked.

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

ສົມເຫດສົມຜົນ

ໄດ້ ຢ່າງງ່າຍດາຍເຮັດໃຫ້ແຖບຫຼືຢາມີຄວາມກວ້າງເທົ່າທຽມກັນຂອງພໍ່ແມ່ຂອງເຂົາເຈົ້າຢູ່ໃນຫນ້າຈໍທີ່ກວ້າງກວ່າ 768px ກັບ .nav-justified. ໃນຫນ້າຈໍຂະຫນາດນ້ອຍກວ່າ, ການເຊື່ອມຕໍ່ nav ແມ່ນ stacked.

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

Safari ແລະ navs ທີ່ສົມເຫດສົມຜົນທີ່ຕອບສະຫນອງ

ຕັ້ງແຕ່ v9.1.2, Safari ສະແດງຂໍ້ບົກພ່ອງທີ່ປັບຂະຫນາດເບົາເຊີຂອງທ່ານຕາມແນວນອນເຮັດໃຫ້ຄວາມຜິດພາດໃນການສະແດງຜົນໃນ nav ທີ່ຖືກຕ້ອງທີ່ຖືກລຶບລ້າງເມື່ອໂຫຼດຫນ້າຈໍຄືນ. ບັກນີ້ຍັງຖືກສະແດງຢູ່ໃນ ຕົວຢ່າງ nav ທີ່ເປັນເຫດຜົນ .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ລິ້ງທີ່ຖືກປິດນຳໃຊ້

ສໍາລັບອົງປະກອບ nav (ແຖບຫຼືຢາ), ເພີ່ມ .disabledສໍາລັບ ການເຊື່ອມຕໍ່ສີຂີ້ເຖົ່າແລະບໍ່ມີຜົນກະທົບ hover .

ຟັງຊັນການເຊື່ອມໂຍງບໍ່ໄດ້ຮັບຜົນກະທົບ

ຊັ້ນຮຽນນີ້ຈະປ່ຽນພຽງແຕ່ <a>ລັກສະນະ, ບໍ່ແມ່ນການທໍາງານຂອງມັນ. ໃຊ້ JavaScript ແບບກຳນົດເອງເພື່ອປິດການເຊື່ອມຕໍ່ຢູ່ທີ່ນີ້.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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

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

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars ແມ່ນອົງປະກອບ meta ທີ່ຕອບສະຫນອງທີ່ເຮັດຫນ້າທີ່ເປັນສ່ວນຫົວການນໍາທາງສໍາລັບຄໍາຮ້ອງສະຫມັກຫຼືເວັບໄຊທ໌ຂອງທ່ານ. ພວກມັນເລີ່ມຫຍໍ້ລົງ (ແລະສາມາດສະຫຼັບໄດ້) ໃນມຸມເບິ່ງມືຖືແລະກາຍເປັນແນວນອນຍ້ອນວ່າຄວາມກວ້າງຂອງຊ່ອງຫວ່າງເພີ່ມຂຶ້ນ.

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

ເນື້ອຫາລົ້ນ

ເນື່ອງຈາກ Bootstrap ບໍ່ຮູ້ວ່າເນື້ອຫາໃນ navbar ຕ້ອງການພື້ນທີ່ຫຼາຍປານໃດ, ທ່ານອາດຈະມີບັນຫາກັບການຫໍ່ເນື້ອຫາເຂົ້າໄປໃນແຖວທີສອງ. ເພື່ອແກ້ໄຂບັນຫານີ້, ທ່ານສາມາດ:

ຫຼຸດປະລິມານ ຫຼືຄວາມກວ້າງຂອງລາຍການ navbar.
ເຊື່ອງບາງລາຍການແຖບ navbar ຢູ່ໃນຂະຫນາດຫນ້າຈໍທີ່ແນ່ນອນໂດຍໃຊ້ ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ຕອບ ສະຫນອງ .
ປ່ຽນຈຸດທີ່ແຖບ navbar ຂອງທ່ານປ່ຽນລະຫວ່າງແບບຫຍໍ້ລົງ ແລະ ໂໝດແນວນອນ. ປັບແຕ່ງ @grid-float-breakpointຕົວແປ ຫຼືເພີ່ມການສອບຖາມສື່ຂອງທ່ານເອງ.

ຕ້ອງການ plugin JavaScript

ຖ້າ JavaScript ຖືກປິດໃຊ້ງານແລະ viewport ແຄບພຽງພໍທີ່ navbar ຫຍໍ້ລົງ, ມັນຈະເປັນໄປບໍ່ໄດ້ທີ່ຈະຂະຫຍາຍ navbar ແລະເບິ່ງເນື້ອຫາພາຍໃນ..navbar-collapse .

ແຖບນຳທາງທີ່ຕອບສະໜອງໄດ້ຮຽກຮ້ອງໃຫ້ ປລັກອິນຫຍໍ້ ເຂົ້າໃສ່ໃນ Bootstrap ລຸ້ນຂອງເຈົ້າ.

ການປ່ຽນແປງຈຸດຢຸດ navbar ມືຖືທີ່ຫຍໍ້ລົງ

ແຖບ navbar ລົ້ມລົງໃນມຸມເບິ່ງມືຖືຕາມແນວຕັ້ງຂອງມັນເມື່ອຊ່ອງເບິ່ງແຄບກວ່າ @grid-float-breakpoint, ແລະຂະຫຍາຍເຂົ້າໄປໃນມຸມເບິ່ງທີ່ບໍ່ແມ່ນມືຖືຕາມແນວນອນ ເມື່ອຊ່ອງເບິ່ງມີ @grid-float-breakpointຄວາມກວ້າງຢ່າງໜ້ອຍ. ປັບຕົວແປນີ້ຢູ່ໃນແຫຼ່ງທີ່ໜ້ອຍເພື່ອຄວບຄຸມເມື່ອແຖບ navbar ຫຍໍ້ລົງ/ຂະຫຍາຍ. ຄ່າເລີ່ມຕົ້ນແມ່ນ 768px(ຫນ້າຈໍ "ຂະຫນາດນ້ອຍ" ຫຼື "ແທັບເລັດ" ທີ່ນ້ອຍທີ່ສຸດ).

ເຮັດໃຫ້ navbars ສາມາດເຂົ້າເຖິງໄດ້

ໃຫ້ແນ່ໃຈວ່າໃຊ້ <nav>ອົງປະກອບໃດຫນຶ່ງຫຼື, ຖ້າໃຊ້ອົງປະກອບທົ່ວໄປເຊັ່ນ a <div>, ເພີ່ມ a role="navigation"ໃສ່ທຸກແຖບ navbar ເພື່ອກໍານົດຢ່າງຊັດເຈນວ່າມັນເປັນພື້ນທີ່ສໍາຄັນສໍາລັບຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ແທນທີ່ຍີ່ຫໍ້ navbar ດ້ວຍຮູບພາບຂອງທ່ານເອງໂດຍການສະຫຼັບຂໍ້ຄວາມເປັນ <img>. ເນື່ອງຈາກ .navbar-brandມີ padding ແລະຄວາມສູງຂອງຕົນເອງ, ທ່ານອາດຈະຈໍາເປັນຕ້ອງ override ບາງ CSS ຂຶ້ນກັບຮູບພາບຂອງທ່ານ.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

ວາງເນື້ອຫາແບບຟອມພາຍໃນ .navbar-formສໍາລັບການຈັດຕໍາແຫນ່ງແນວຕັ້ງທີ່ເຫມາະສົມແລະພຶດຕິກໍາການຫຍໍ້ລົງໃນ viewports ແຄບ. ໃຊ້ຕົວເລືອກການຈັດຮຽງເພື່ອຕັດສິນໃຈບ່ອນທີ່ມັນຢູ່ພາຍໃນເນື້ອຫາ navbar.

ໃນຖານະເປັນຫົວຫນ້າເຖິງ, .navbar-formແບ່ງປັນລະຫັດຂອງຕົນຫຼາຍ .form-inlineໂດຍຜ່ານ mixin. ການຄວບຄຸມແບບຟອມບາງຢ່າງ, ເຊັ່ນກຸ່ມການປ້ອນຂໍ້ມູນ, ອາດຈະຕ້ອງການຄວາມກວ້າງຄົງທີ່ເພື່ອສະແດງຢ່າງຖືກຕ້ອງພາຍໃນແຖບ navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ເພີ່ມປ້າຍກຳກັບສະເໝີ

ໂປຣແກຣມອ່ານໜ້າຈໍຈະມີບັນຫາກັບແບບຟອມຂອງເຈົ້າຫາກເຈົ້າບໍ່ໃສ່ປ້າຍກຳກັບສຳລັບທຸກໆການປ້ອນຂໍ້ມູນ. ສໍາລັບແບບຟອມ inline ເຫຼົ່ານີ້, ທ່ານສາມາດເຊື່ອງປ້າຍຊື່ໂດຍໃຊ້ .sr-onlyຊັ້ນ. ມີວິທີການທາງເລືອກເພີ່ມເຕີມຂອງການສະຫນອງປ້າຍສໍາລັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ເຊັ່ນ: aria-label, aria-labelledbyຫຼື titleຄຸນລັກສະນະ. ຖ້າບໍ່ມີສິ່ງເຫຼົ່ານີ້, ຜູ້ອ່ານຫນ້າຈໍອາດຈະຫັນກັບການນໍາໃຊ້ placeholderຄຸນລັກສະນະ, ຖ້າມີ, ແຕ່ຄວນສັງເກດວ່າການໃຊ້ placeholderແທນວິທີການຕິດສະຫຼາກອື່ນໆແມ່ນບໍ່ແນະນໍາ.

ເພີ່ມ .navbar-btnຫ້ອງຮຽນໃສ່ <button>ອົງປະກອບທີ່ບໍ່ຢູ່ໃນ a <form>ເພື່ອວາງພວກມັນໄວ້ທາງກາງໃນແຖບ navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

ສໍາລັບຄົນອື່ນໆທີ່ໃຊ້ລິ້ງມາດຕະຖານທີ່ບໍ່ຢູ່ໃນອົງປະກອບນໍາທາງ navbar ປົກກະຕິ, ໃຊ້ .navbar-linkclass ເພື່ອເພີ່ມສີທີ່ເຫມາະສົມສໍາລັບຕົວເລືອກ navbar ເລີ່ມຕົ້ນແລະ inverse.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

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

ຫ້ອງຮຽນເຫຼົ່ານີ້ແມ່ນສະບັບ mixin-ed ຂອງ .pull-leftແລະ .pull-right, ແຕ່ພວກເຂົາເຈົ້າກໍາລັງກໍານົດຂອບເຂດການສອບຖາມສື່ມວນຊົນສໍາລັບການຈັດການອົງປະກອບ navbar ໄດ້ງ່າຍຂຶ້ນໃນທົ່ວຂະຫນາດອຸປະກອນ.

ການຈັດຮຽງຂວາຫຼາຍອົງປະກອບ

ປະຈຸບັນ Navbars ມີຂໍ້ຈໍາກັດກັບຫຼາຍ .navbar-rightຊັ້ນຮຽນ. ເພື່ອໃຫ້ເນື້ອຫາຫວ່າງຢ່າງຖືກຕ້ອງ, ພວກເຮົາໃຊ້ຂອບທາງລົບໃນ .navbar-rightອົງປະກອບສຸດທ້າຍ. ເມື່ອມີຫຼາຍອົງປະກອບທີ່ໃຊ້ຊັ້ນຮຽນນັ້ນ, ຂອບເຫຼົ່ານີ້ຈະບໍ່ເຮັດວຽກຕາມຈຸດປະສົງ.

ພວກເຮົາຈະທົບທວນຄືນນີ້ເມື່ອພວກເຮົາສາມາດຂຽນອົງປະກອບນັ້ນຄືນໃໝ່ໃນ v4.

ຕື່ມ .navbar-fixed-topແລະລວມເອົາເນື້ອໃນແຖບແຖບ .containerຫຼື .container-fluidໃສ່ກາງ ແລະແຖບ.

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

ຕ້ອງການແຜ່ນຮອງ

ແຖບ navbar ຄົງຈະ overlay ເນື້ອໃນອື່ນໆຂອງທ່ານ, ເວັ້ນເສຍແຕ່ວ່າທ່ານເພີ່ມ paddingໃສ່ເທິງຂອງ <body>. ລອງໃຊ້ຄຸນຄ່າຂອງຕົນເອງ ຫຼືໃຊ້ຕົວຢ່າງຂອງພວກເຮົາຂ້າງລຸ່ມນີ້. ເຄັດລັບ: ໂດຍຄ່າເລີ່ມຕົ້ນ, navbar ສູງ 50px.

body { padding-top: 70px; }

ໃຫ້ແນ່ໃຈວ່າຈະປະກອບນີ້ ຫຼັງຈາກ CSS Bootstrap ຫຼັກ.

ຕື່ມ .navbar-fixed-bottomແລະລວມເອົາເນື້ອໃນແຖບແຖບ .containerຫຼື .container-fluidໃສ່ກາງ ແລະແຖບ.

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

ຕ້ອງການແຜ່ນຮອງ

ແຖບ navbar ຄົງຈະ overlay ເນື້ອຫາອື່ນໆຂອງທ່ານ, ເວັ້ນເສຍແຕ່ວ່າທ່ານເພີ່ມ paddingໃສ່ລຸ່ມສຸດຂອງ <body>. ລອງໃຊ້ຄຸນຄ່າຂອງຕົນເອງ ຫຼືໃຊ້ຕົວຢ່າງຂອງພວກເຮົາຂ້າງລຸ່ມນີ້. ເຄັດລັບ: ໂດຍຄ່າເລີ່ມຕົ້ນ, navbar ສູງ 50px.

body { padding-bottom: 70px; }

ໃຫ້ແນ່ໃຈວ່າຈະປະກອບນີ້ ຫຼັງຈາກ CSS Bootstrap ຫຼັກ.

ສ້າງແຖບ navbar ຄວາມກວ້າງເຕັມທີ່ເລື່ອນອອກໄປກັບຫນ້າໂດຍການເພີ່ມ .navbar-static-topແລະລວມເອົາເນື້ອໃນແຖບ navbar .containerຫຼື ໄປທາງກາງ..container-fluid

ບໍ່ເຫມືອນກັບ .navbar-fixed-*ຫ້ອງຮຽນ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງປ່ຽນ padding ໃດໆກ່ຽວກັບ body.

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

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

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

ເຂົ້າໜົມປັງ

ຊີ້ບອກທີ່ຢູ່ຂອງໜ້າປັດຈຸບັນພາຍໃນລຳດັບການນຳທາງ.

ຕົວແຍກຈະຖືກເພີ່ມໂດຍອັດຕະໂນມັດໃນ CSS ຜ່ານ :beforeແລະ content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

ສະຫນອງການເຊື່ອມຕໍ່ pagination ສໍາລັບເວັບໄຊທ໌ຫຼື app ຂອງທ່ານດ້ວຍອົງປະກອບ pagination ຫຼາຍຫນ້າ, ຫຼື ທາງເລືອກ pager ທີ່ງ່າຍກວ່າ .

pagination ເລີ່ມຕົ້ນ

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ການຕິດສະຫຼາກອົງປະກອບ pagination

ອົງປະກອບ pagination ຄວນຖືກຫໍ່ຢູ່ໃນ <nav>ອົງປະກອບເພື່ອກໍານົດມັນເປັນສ່ວນນໍາທາງເພື່ອຫນ້າຈໍຜູ້ອ່ານແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອອື່ນໆ. ນອກຈາກນັ້ນ, ເນື່ອງຈາກຫນ້າເວັບມີແນວໂນ້ມທີ່ຈະມີຫຼາຍກວ່າຫນຶ່ງສ່ວນການນໍາທາງດັ່ງກ່າວແລ້ວ (ເຊັ່ນ: ການນໍາທາງຕົ້ນຕໍໃນສ່ວນຫົວ, ຫຼືການນໍາທາງແຖບດ້ານຂ້າງ), ຄວນແນະນໍາການສະຫນອງຄໍາອະທິບາຍ aria-labelສໍາລັບສິ່ງ <nav>ທີ່ສະທ້ອນໃຫ້ເຫັນເຖິງຈຸດປະສົງຂອງມັນ. ຕົວຢ່າງ, ຖ້າອົງປະກອບ pagination ຖືກນໍາໃຊ້ເພື່ອນໍາທາງລະຫວ່າງຊຸດຜົນການຄົ້ນຫາ, ປ້າຍຊື່ທີ່ເຫມາະສົມອາດຈະເປັນ aria-label="Search results pages".

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

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

ພວກເຮົາແນະນຳໃຫ້ທ່ານປ່ຽນສະໝໍທີ່ໃຊ້ງານ ຫຼືປິດໃຊ້ງານອອກເພື່ອ <span>, ຫຼືຍົກເລີກສະໝໍ ໃນກໍລະນີຂອງລູກສອນກ່ອນໜ້າ/ຕໍ່ໄປ, ເພື່ອລຶບການທໍາງານຂອງຄລິກໃນຂະນະທີ່ຍັງຄົງຮັກສາຮູບແບບທີ່ຕັ້ງໄວ້.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ຂະໜາດ

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

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

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

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

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ຕົວຢ່າງ

ຕົວຢ່າງຫົວຂໍ້ New

<h3>Example heading <span class="label label-default">New</span></h3>

ການປ່ຽນແປງທີ່ມີຢູ່

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

ການເຕືອນໄພ ອັນຕະລາຍຂອງ ຂໍ້ ມູນ ຄວາມສໍາເລັດ ເບື້ອງຕົ້ນ ເລີ່ມຕົ້ນ

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ມີປ້າຍຫຼາຍໂຕນບໍ?

ບັນຫາການສະແດງຜົນສາມາດເກີດຂຶ້ນໄດ້ເມື່ອທ່ານມີປ້າຍຊື່ໃນແຖວຫຼາຍສິບປ້າຍພາຍໃນຖັງແຄບ, ແຕ່ລະ ອັນມີ inline-blockອົງປະກອບຂອງຕົນເອງ (ເຊັ່ນໄອຄອນ). ວິທີການປະມານນີ້ແມ່ນການຕັ້ງຄ່າ display: inline-block;. ສໍາລັບສະພາບການ ແລະຕົວຢ່າງ, ເບິ່ງ #13219 .

ເນັ້ນລາຍການໃໝ່ ຫຼືຍັງບໍ່ໄດ້ອ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍການເພີ່ມໃສ່ <span class="badge">ລິ້ງ, Bootstrap navs ແລະອື່ນໆອີກ.

ອິນບັອກ42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ລົ້ມເອງ

ໃນເວລາທີ່ບໍ່ມີລາຍການໃຫມ່ຫຼືຍັງບໍ່ໄດ້ອ່ານ, badges ພຽງແຕ່ຈະຍຸບ (ຜ່ານ :emptyຕົວເລືອກຂອງ CSS) ສະຫນອງໃຫ້ບໍ່ມີເນື້ອຫາຢູ່ໃນ.

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ

ປ້າຍຊື່ຈະບໍ່ພັງລົງເອງໃນ Internet Explorer 8 ເພາະວ່າມັນຂາດ :emptyຕົວເລືອກ.

ປັບຕົວເຂົ້າກັບສະຖານະ nav ທີ່ໃຊ້ໄດ້

ຮູບແບບໃນຕົວແມ່ນລວມສໍາລັບການວາງປ້າຍຢູ່ໃນລັດທີ່ເຄື່ອນໄຫວຢູ່ໃນການນໍາທາງຢາ.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

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

ນີ້ແມ່ນຫນ່ວຍງານ hero ງ່າຍດາຍ, ເປັນອົງປະກອບແບບ jumbotron ງ່າຍດາຍສໍາລັບການໂທຫາຄວາມສົນໃຈເປັນພິເສດຕໍ່ເນື້ອໃນທີ່ໂດດເດັ່ນຫຼືຂໍ້ມູນຂ່າວສານ.

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ເພື່ອເຮັດໃຫ້ jumbotron ມີຄວາມກວ້າງເຕັມ, ແລະບໍ່ມີມຸມມົນ, ວາງມັນໄວ້ພາຍນອກທັງຫມົດ .containerແລະແທນທີ່ຈະເພີ່ມ .containerພາຍໃນ.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ຂະຫຍາຍ ລະບົບຕາໜ່າງ ຂອງ Bootstrap ດ້ວຍອົງປະກອບຮູບຫຍໍ້ເພື່ອສະແດງຕາໜ່າງຂອງຮູບພາບ, ວິດີໂອ, ຂໍ້ຄວາມ ແລະອື່ນໆອີກໄດ້ຢ່າງງ່າຍດາຍ.

ຖ້າທ່ານກໍາລັງຊອກຫາການນໍາສະເຫນີທີ່ຄ້າຍຄືກັບ Pinterest ຂອງຮູບຫຍໍ້ຂອງຄວາມສູງແລະ / ຫຼືຄວາມກວ້າງທີ່ແຕກຕ່າງກັນ, ທ່ານຈະຕ້ອງໃຊ້ plugin ພາກສ່ວນທີສາມເຊັ່ນ Masonry , Isotope , ຫຼື Salvattore .

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

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ເນື້ອໃນທີ່ກໍາຫນົດເອງ

ດ້ວຍເຄື່ອງໝາຍເພີ່ມເຕີມເລັກນ້ອຍ, ມັນເປັນໄປໄດ້ທີ່ຈະເພີ່ມເນື້ອຫາ 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.

ປຸ່ມ ປຸ່ມ

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

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

ຕົວຢ່າງ

ຫໍ່ຂໍ້ຄວາມໃດນຶ່ງ ແລະປຸ່ມປິດເປັນທາງເລືອກໃນ .alertແລະນຶ່ງໃນສີ່ຫ້ອງຮຽນບໍລິບົດ (ຕົວຢ່າງ, .alert-success) ສໍາລັບຂໍ້ຄວາມເຕືອນພື້ນຖານ.

ບໍ່ມີຊັ້ນຮຽນເລີ່ມຕົ້ນ

ການແຈ້ງເຕືອນບໍ່ມີຊັ້ນຮຽນເລີ່ມຕົ້ນ, ມີພຽງແຕ່ຫ້ອງຮຽນພື້ນຖານ ແລະຕົວແກ້ໄຂເທົ່ານັ້ນ. ການແຈ້ງເຕືອນສີເທົາເລີ່ມຕົ້ນບໍ່ມີຄວາມຫມາຍຫຼາຍ, ດັ່ງນັ້ນທ່ານຈຶ່ງຈໍາເປັນຕ້ອງລະບຸປະເພດໂດຍຜ່ານ contextual class. ເລືອກຈາກຄວາມສໍາເລັດ, ຂໍ້ມູນ, ການເຕືອນໄພ, ຫຼືອັນຕະລາຍ.

ເຮັດໄດ້ດີ! ທ່ານໄດ້ອ່ານຂໍ້ຄວາມເຕືອນທີ່ສໍາຄັນນີ້ຢ່າງສໍາເລັດຜົນ.

ລະວັງ! ການແຈ້ງເຕືອນນີ້ຕ້ອງການຄວາມສົນໃຈຂອງທ່ານ, ແຕ່ມັນບໍ່ສໍາຄັນຫຼາຍ.

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

ໂອ້ຍ! ປ່ຽນບາງອັນແລ້ວລອງສົ່ງໃໝ່ອີກຄັ້ງ.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

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

ສ້າງການແຈ້ງເຕືອນໂດຍການເພີ່ມ .alert-dismissibleປຸ່ມທາງເລືອກ ແລະປິດ.

ຕ້ອງການ plugin ເຕືອນ JavaScript

ສໍາລັບການເຮັດວຽກຢ່າງເຕັມທີ່, ການແຈ້ງເຕືອນປິດ, ທ່ານຕ້ອງໃຊ້ plugin JavaScript ແຈ້ງເຕືອນ .

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ຮັບປະກັນພຶດຕິກໍາທີ່ເຫມາະສົມໃນທົ່ວອຸປະກອນທັງຫມົດ

ໃຫ້ແນ່ໃຈວ່າໃຊ້ <button>ອົງປະກອບທີ່ມີ data-dismiss="alert"ຄຸນລັກສະນະຂໍ້ມູນ.

ການເຊື່ອມຕໍ່ໃນການແຈ້ງເຕືອນ

ໃຊ້ .alert-linkຫ້ອງຮຽນຜົນປະໂຫຍດເພື່ອສະຫນອງການເຊື່ອມຕໍ່ສີທີ່ກົງກັນຢ່າງໄວວາພາຍໃນການແຈ້ງເຕືອນໃດໆ.

ເຮັດໄດ້ດີ! ທ່ານໄດ້ອ່ານ ຂໍ້ຄວາມເຕືອນທີ່ສໍາຄັນນີ້ ຢ່າງສໍາເລັດຜົນ .

ລະວັງ! ການ ແຈ້ງເຕືອນນີ້ຕ້ອງການຄວາມສົນໃຈຂອງເຈົ້າ , ແຕ່ມັນບໍ່ສໍາຄັນຫຼາຍ.

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

ໂອ້ຍ! ປ່ຽນບາງອັນແລ້ວ ລອງສົ່ງໃໝ່ອີກຄັ້ງ.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

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

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ

ແຖບຄວາມຄືບໜ້າໃຊ້ການຫັນປ່ຽນ CSS3 ແລະພາບເຄື່ອນໄຫວເພື່ອບັນລຸຜົນກະທົບບາງຢ່າງ. ຄຸນສົມບັດເຫຼົ່ານີ້ບໍ່ຖືກຮອງຮັບໃນ Internet Explorer 9 ແລະ Firefox ເວີຊັ່ນຕ່ຳກວ່າ ຫຼືເກົ່າກວ່າ. Opera 12 ບໍ່ຮອງຮັບພາບເຄື່ອນໄຫວ.

ຄວາມເຂົ້າກັນໄດ້ຂອງນະໂຍບາຍຄວາມປອດໄພເນື້ອຫາ (CSP).

ຖ້າເວັບໄຊທ໌ຂອງທ່ານມີ ນະໂຍບາຍຄວາມປອດໄພຂອງເນື້ອຫາ (CSP) ທີ່ບໍ່ອະນຸຍາດໃຫ້ style-src 'unsafe-inline', ຫຼັງຈາກນັ້ນທ່ານຈະບໍ່ສາມາດໃຊ້ styleຄຸນລັກສະນະ inline ເພື່ອກໍານົດຄວາມກວ້າງຂອງແຖບຄວາມຄືບຫນ້າດັ່ງທີ່ສະແດງຢູ່ໃນຕົວຢ່າງຂອງພວກເຮົາຂ້າງລຸ່ມນີ້. ວິທີການທາງເລືອກສໍາລັບການກໍານົດຄວາມກວ້າງທີ່ເຫມາະສົມກັບ CSPs ທີ່ເຄັ່ງຄັດລວມມີການໃຊ້ JavaScript ແບບກໍານົດເອງເລັກນ້ອຍ (ທີ່ກໍານົດ element.style.width) ຫຼືໃຊ້ຫ້ອງຮຽນ CSS ແບບກໍາຫນົດເອງ.

ຕົວຢ່າງພື້ນຖານ

ແຖບຄວາມຄືບໜ້າເລີ່ມຕົ້ນ.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ພ້ອມປ້າຍ

ເອົາ <span>ກັບ .sr-onlyຫ້ອງຮຽນອອກຈາກພາຍໃນແຖບຄວາມຄືບຫນ້າເພື່ອສະແດງອັດຕາສ່ວນທີ່ເຫັນໄດ້.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

ເພື່ອຮັບປະກັນວ່າຂໍ້ຄວາມປ້າຍຊື່ຍັງຄົງສາມາດອ່ານໄດ້ເຖິງແມ່ນວ່າມີອັດຕາສ່ວນຕໍ່າ, ພິຈາລະນາເພີ່ມໃສ່ min-widthແຖບຄວາມຄືບຫນ້າ.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ທາງເລືອກໃນສະພາບການ

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ເສັ້ນດ່າງ

ໃຊ້ສີເປັນສີເພື່ອສ້າງຜົນກະທົບເປັນເສັ້ນດ່າງ. ບໍ່ມີຢູ່ໃນ IE9 ແລະຂ້າງລຸ່ມນີ້.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

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

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

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ຊ້ອນກັນ

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ຮູບແບບວັດຖຸທີ່ບໍ່ມີຕົວຕົນສຳລັບການສ້າງອົງປະກອບປະເພດຕ່າງໆ (ເຊັ່ນ: ຄໍາຄິດເຫັນຂອງບລັອກ, 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.

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

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.

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ໃນ faucibus.

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

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ຫ້ອງຮຽນ .pull-leftແລະ .pull-rightຍັງມີຢູ່ ແລະຖືກໃຊ້ໃນເມື່ອກ່ອນເປັນສ່ວນໜຶ່ງຂອງອົງປະກອບສື່, ແຕ່ຖືກຍົກເລີກການນຳໃຊ້ເປັນ v3.3.0. ພວກເຂົາເຈົ້າແມ່ນປະມານເທົ່າກັບ .media-leftແລະ .media-right, ຍົກເວັ້ນທີ່ .media-rightຄວນຈະຖືກວາງໄວ້ຫຼັງຈາກ .media-bodyໃນ html.

ການຈັດຮຽງສື່

ຮູບພາບຫຼືສື່ມວນຊົນອື່ນໆສາມາດຈັດວາງເທິງ, ກາງ, ຫຼືລຸ່ມ. ຄ່າເລີ່ມຕົ້ນແມ່ນຈັດຮຽງດ້ານເທິງ.

ສື່ຈັດຮຽງດ້ານເທິງ

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

ສື່ຈັດຮຽງກາງ

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

ມີເດຍຈັດຮຽງທາງລຸ່ມ

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

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

ຕົວຢ່າງພື້ນຖານ

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

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ປ້າຍ

ເພີ່ມອົງປະກອບປ້າຍໃສ່ລາຍການກຸ່ມລາຍຊື່ໃດນຶ່ງ ແລະມັນຈະຖືກວາງໄວ້ທາງຂວາໂດຍອັດຕະໂນມັດ.

14Cras justo odio
2Dapibus ac facilisis ໃນ
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ລາຍການທີ່ເຊື່ອມຕໍ່

Linkify ລາຍການກຸ່ມລາຍການໂດຍການນໍາໃຊ້ tags ສະມໍແທນທີ່ຈະເປັນລາຍການລາຍການ (ນັ້ນຍັງຫມາຍຄວາມວ່າພໍ່ແມ່ <div>ແທນທີ່ຈະເປັນ <ul>). ບໍ່ຈໍາເປັນຕ້ອງມີພໍ່ແມ່ສ່ວນບຸກຄົນປະມານແຕ່ລະອົງປະກອບ.

Cras justo odio Dapibus ac facilisis ໃນ Morbi leo risus Porta ac consectetur ac vestibulum ຢູ່ eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ລາຍການປຸ່ມ

ລາຍການກຸ່ມລາຍຊື່ອາດຈະເປັນປຸ່ມແທນທີ່ຈະເປັນລາຍການລາຍການ (ນັ້ນຍັງຫມາຍເຖິງພໍ່ແມ່ <div>ແທນທີ່ຈະເປັນ <ul>). ບໍ່ຈໍາເປັນຕ້ອງມີພໍ່ແມ່ສ່ວນບຸກຄົນປະມານແຕ່ລະອົງປະກອບ. ຢ່າໃຊ້ .btnຫ້ອງຮຽນມາດຕະຖານຢູ່ທີ່ນີ້.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

ລາຍການທີ່ພິການ

ຕື່ມ .disabledໃສ່ a .list-group-itemໃຫ້ເປັນສີເທົາໃຫ້ປະກົດວ່າປິດໃຊ້ງານ.

Cras justo odio Dapibus ac facilisis ໃນ Morbi leo risus Porta ac consectetur ac vestibulum ຢູ່ eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ຫ້ອງຮຽນຕາມບໍລິບົດ

ໃຊ້ contextual classes ເພື່ອ style list list, default ຫຼື linked. ລວມທັງ .activeລັດ.

Dapibus ac facilisis ໃນ
Cras ນັ່ງ amet nibh libero
Porta ac consectetur ac
vestibulum ຢູ່ eros

Dapibus ac facilisis ໃນ Cras ນັ່ງ amet nibh libero Porta ac consectetur ac vestibulum ຢູ່ eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ເນື້ອໃນທີ່ກໍາຫນົດເອງ

ເພີ່ມເກືອບທຸກ HTML ພາຍໃນ, ເຖິງແມ່ນວ່າສໍາລັບກຸ່ມລາຍຊື່ທີ່ເຊື່ອມໂຍງເຊັ່ນຫນຶ່ງຂ້າງລຸ່ມນີ້.

ລາຍຊື່ກຸ່ມຫົວຂໍ້

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

ລາຍຊື່ກຸ່ມຫົວຂໍ້

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

ລາຍຊື່ກຸ່ມຫົວຂໍ້

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ໃນຂະນະທີ່ບໍ່ຈໍາເປັນສະເຫມີ, ບາງຄັ້ງທ່ານຈໍາເປັນຕ້ອງເອົາ DOM ຂອງທ່ານໃສ່ໃນປ່ອງ. ສໍາລັບສະຖານະການເຫຼົ່ານັ້ນ, ລອງອົງປະກອບຂອງແຜງ.

ຕົວຢ່າງພື້ນຖານ

ໂດຍຄ່າເລີ່ມຕົ້ນ, ທຸກໆສິ່ງທີ່ .panelເຮັດແມ່ນໃຊ້ບາງຂອບພື້ນຖານແລະ padding ເພື່ອບັນຈຸເນື້ອຫາບາງຢ່າງ.

ຕົວຢ່າງແຜງພື້ນຖານ

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ກະດານທີ່ມີຫົວຂໍ້

ເພີ່ມກ່ອງໃສ່ຫົວໃສ່ກະດານຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍດ້ວຍ .panel-heading. ທ່ານອາດຈະລວມເອົາອັນໃດກໍໄດ້ <h1>- <h6>ກັບ .panel-titleຫ້ອງຮຽນເພື່ອເພີ່ມຫົວຂໍ້ທີ່ມີຮູບແບບກ່ອນ. ຢ່າງໃດກໍຕາມ, ຂະຫນາດຕົວອັກສອນຂອງ <h1>- <h6>ແມ່ນ overridden ໂດຍ .panel-heading.

ສໍາລັບການໃສ່ສີເຊື່ອມຕໍ່ທີ່ເຫມາະສົມ, ໃຫ້ແນ່ໃຈວ່າຈະວາງການເຊື່ອມຕໍ່ຢູ່ໃນຫົວຂໍ້ພາຍໃນ .panel-title.

ຫົວຂໍ້ກະດານບໍ່ມີຫົວຂໍ້

ເນື້ອໃນກະດານ

ຊື່ກະດານ

ເນື້ອໃນກະດານ

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

ແຜງທີ່ມີສ່ວນທ້າຍ

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

ເນື້ອໃນກະດານ

ສ່ວນທ້າຍກະດານ

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ທາງເລືອກໃນສະພາບການ

ເຊັ່ນດຽວກັບອົງປະກອບອື່ນໆ, ເຮັດໃຫ້ແຜງມີຄວາມໝາຍຫຼາຍຂຶ້ນຕໍ່ກັບສະພາບການສະເພາະໃດໜຶ່ງໄດ້ງ່າຍຂຶ້ນໂດຍການເພີ່ມໝວດໝູ່ຂອງສະພາບການໃດໜຶ່ງ.

ຊື່ກະດານ

ເນື້ອໃນກະດານ

ຊື່ກະດານ

ເນື້ອໃນກະດານ

ຊື່ກະດານ

ເນື້ອໃນກະດານ

ຊື່ກະດານ

ເນື້ອໃນກະດານ

ຊື່ກະດານ

ເນື້ອໃນກະດານ

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ມີຕາຕະລາງ

ຕື່ມການໃດໆທີ່ບໍ່ມີຊາຍແດນຕິດ .tableພາຍໃນກະດານສໍາລັບການອອກແບບທີ່ບໍ່ມີ seamless. ຖ້າມີ .panel-body, ພວກເຮົາເພີ່ມຂອບໃສ່ເທິງຂອງຕາຕະລາງສໍາລັບການແຍກ.

ຫົວຂໍ້ກະດານ

ບາງເນື້ອໃນແຜງເລີ່ມຕົ້ນຢູ່ທີ່ນີ້. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	ຊື່ແທ້	ນາມສະກຸນ	ຊື່ຜູ້ໃຊ້
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ຖ້າບໍ່ມີເນື້ອໃນແຜງ, ອົງປະກອບຈະຍ້າຍຈາກສ່ວນຫົວຂອງກະດານໄປຫາຕາຕະລາງໂດຍບໍ່ມີການຂັດຈັງຫວະ.

ຫົວຂໍ້ກະດານ

#	ຊື່ແທ້	ນາມສະກຸນ	ຊື່ຜູ້ໃຊ້
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ກັບກຸ່ມລາຍຊື່

ຮວມເອົາ ກຸ່ມລາຍຊື່ ເຕັມຄວາມກວ້າງ ພາຍໃນແຜງໃດນຶ່ງໄດ້ຢ່າງງ່າຍດາຍ.

ຫົວຂໍ້ກະດານ

ບາງເນື້ອໃນແຜງເລີ່ມຕົ້ນຢູ່ທີ່ນີ້. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ອະນຸຍາດໃຫ້ຕົວທ່ອງເວັບການກໍານົດຂະຫນາດວິດີໂອຫຼື slideshow ໂດຍອີງໃສ່ຄວາມກວ້າງຂອງ block ທີ່ມີຂອງເຂົາເຈົ້າໂດຍການສ້າງອັດຕາສ່ວນພາຍໃນທີ່ຈະປັບຂະຫນາດໃຫ້ເຫມາະສົມໃນອຸປະກອນໃດຫນຶ່ງ.

ກົດລະບຽບຖືກນໍາໃຊ້ໂດຍກົງກັບ <iframe>, <embed>, <video>, ແລະ <object>ອົງປະກອບ; ທາງເລືອກໃນການໃຊ້ຊັ້ນສືບທອດທີ່ຊັດເຈນ .embed-responsive-itemເມື່ອທ່ານຕ້ອງການກົງກັບຮູບແບບຂອງຄຸນລັກສະນະອື່ນໆ.

Pro-Tip! ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງໃສ່ frameborder="0"ໃນ <iframe>s ຂອງທ່ານຍ້ອນວ່າພວກເຮົາ override ມັນສໍາລັບທ່ານ.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ເລີ່ມຕົ້ນໄດ້ດີ

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

ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງ!

<div class="well">...</div>

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

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

ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງໃຫຍ່!

<div class="well well-lg">...</div>

ເບິ່ງ, ຂ້ອຍຢູ່ໃນນໍ້າສ້າງນ້ອຍໆ!

<div class="well well-sm">...</div>

ອົງປະກອບ

Glyphicons

glyphs ທີ່ມີຢູ່

ວິທີການນໍາໃຊ້

ຢ່າປະສົມກັບສ່ວນປະກອບອື່ນໆ

ພຽງແຕ່ສໍາລັບການນໍາໃຊ້ໃນອົງປະກອບເປົ່າ

ການ​ປ່ຽນ​ແປງ​ທີ່​ຕັ້ງ​ຕົວ​ອັກ​ສອນ icon​

ໄອຄອນທີ່ສາມາດເຂົ້າເຖິງໄດ້

ຕົວຢ່າງ

ເລື່ອນລົງ

ຕົວຢ່າງ

ຈັດຮຽງ

ອາດຈະຮຽກຮ້ອງໃຫ້ມີການຈັດຕໍາແຫນ່ງເພີ່ມເຕີມ

ຄັດຄ້ານ .pull-rightການຈັດຮຽງ

ສ່ວນຫົວ

ຕົວແບ່ງ

ປິດການໃຊ້ງານລາຍການເມນູ

ກຸ່ມປຸ່ມ

ຄໍາແນະນໍາເຄື່ອງມື & popovers ໃນກຸ່ມປຸ່ມຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ໃຫ້ແນ່ໃຈວ່າຖືກຕ້ອງ roleແລະໃຫ້ປ້າຍຊື່

ຕົວຢ່າງພື້ນຖານ

ແຖບເຄື່ອງມືປຸ່ມ

ຂະໜາດ

ຮັງ

ການປ່ຽນແປງແນວຕັ້ງ

ກຸ່ມປຸ່ມທີ່ສົມເຫດສົມຜົນ

ການຈັດການຊາຍແດນ

IE8 ແລະຊາຍແດນ

ມີ <a>ອົງປະກອບ

ລິ້ງທີ່ເຮັດໜ້າທີ່ເປັນປຸ່ມ

ມີ <button>ອົງປະກອບ

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

ການຂຶ້ນກັບປລັກອິນ

ເລື່ອນລົງປຸ່ມດຽວ

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

ຂະໜາດ

ການປ່ຽນແປງແບບ Dropup

ກຸ່ມປ້ອນຂໍ້ມູນ

Textual <input>s ເທົ່ານັ້ນ

ຄໍາແນະນໍາເຄື່ອງມື & popovers ໃນກຸ່ມ input ຮຽກຮ້ອງໃຫ້ມີການຕັ້ງຄ່າພິເສດ

ຢ່າປະສົມກັບສ່ວນປະກອບອື່ນໆ

ເພີ່ມປ້າຍກຳກັບສະເໝີ

ຕົວຢ່າງພື້ນຖານ

ຂະໜາດ

ກ່ອງກາເຄື່ອງຫມາຍແລະ addons ວິທະຍຸ

ປຸ່ມ addons

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

ປຸ່ມແບ່ງສ່ວນ

ປຸ່ມຫຼາຍ

ກອງທັບເຮືອ

ການໃຊ້ navs ສໍາລັບແຖບແຖບຕ້ອງການ plugin ແຖບ JavaScript

ເຮັດໃຫ້ navs ທີ່ໃຊ້ເປັນການນໍາທາງສາມາດເຂົ້າເຖິງໄດ້

ແຖບ

ຢາຄຸມກໍາເນີດ

ສົມເຫດສົມຜົນ

Safari ແລະ navs ທີ່ສົມເຫດສົມຜົນທີ່ຕອບສະຫນອງ

ລິ້ງທີ່ຖືກປິດນຳໃຊ້

ຟັງຊັນການເຊື່ອມໂຍງບໍ່ໄດ້ຮັບຜົນກະທົບ

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

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

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

Navbar

ແຖບນໍາທາງເລີ່ມຕົ້ນ

ເນື້ອຫາລົ້ນ

ຕ້ອງການ plugin JavaScript

ການ​ປ່ຽນ​ແປງ​ຈຸດ​ຢຸດ navbar ມື​ຖື​ທີ່​ຫຍໍ້​ລົງ​

ເຮັດໃຫ້ navbars ສາມາດເຂົ້າເຖິງໄດ້

ຮູບພາບຍີ່ຫໍ້

ແບບຟອມ

ອຸ​ປະ​ກອນ​ມື​ຖື​ຄໍາ​ເຕືອນ​

ເພີ່ມປ້າຍກຳກັບສະເໝີ

ປຸ່ມ

ການນຳໃຊ້ສະເພາະບໍລິບົດ

ຂໍ້​ຄວາມ

ການເຊື່ອມຕໍ່ທີ່ບໍ່ແມ່ນ nav

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

ການຈັດຮຽງຂວາຫຼາຍອົງປະກອບ

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

ຕ້ອງການແຜ່ນຮອງ

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

ການປ່ຽນແປງທີ່ຕັ້ງຕົວອັກສອນ icon

ຄັດຄ້ານ `.pull-right`ການຈັດຮຽງ

ໃຫ້ແນ່ໃຈວ່າຖືກຕ້ອງ `role`ແລະໃຫ້ປ້າຍຊື່

ມີ `<a>`ອົງປະກອບ

ມີ `<button>`ອົງປະກອບ

Textual `<input>`s ເທົ່ານັ້ນ

ການປ່ຽນແປງຈຸດຢຸດ navbar ມືຖືທີ່ຫຍໍ້ລົງ

ອຸປະກອນມືຖືຄໍາເຕືອນ

ຂໍ້ຄວາມ

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

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