glyphs ທີ່ມີຢູ່
ລວມມີຫຼາຍກວ່າ 250 glyphs ໃນຮູບແບບຕົວອັກສອນຈາກຊຸດ Glyphicon Halflings. Glyphicons Halflings ປົກກະຕິແລ້ວບໍ່ມີໃຫ້ຟຣີ, ແຕ່ຜູ້ສ້າງຂອງພວກເຂົາໄດ້ເຮັດໃຫ້ພວກເຂົາສາມາດໃຊ້ໄດ້ສໍາລັບ Bootstrap ໂດຍບໍ່ເສຍຄ່າ. ເພື່ອເປັນການຂອບໃຈ, ພວກເຮົາພຽງແຕ່ຂໍໃຫ້ທ່ານລວມເອົາການເຊື່ອມຕໍ່ກັບຄືນໄປບ່ອນ Glyphicons ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້.
ວິທີການນໍາໃຊ້
ສໍາລັບເຫດຜົນການປະຕິບັດ, ໄອຄອນທັງຫມົດຮຽກຮ້ອງໃຫ້ມີຊັ້ນພື້ນຖານແລະຊັ້ນໄອຄອນສ່ວນບຸກຄົນ. ເພື່ອໃຊ້, ໃຫ້ໃສ່ລະຫັດຕໍ່ໄປນີ້ຢູ່ບ່ອນໃດກໍໄດ້. ໃຫ້ແນ່ໃຈວ່າຈະປ່ອຍໃຫ້ຊ່ອງຫວ່າງລະຫວ່າງໄອຄອນແລະຂໍ້ຄວາມສໍາລັບການ 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
ທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.
ອາດຈະຮຽກຮ້ອງໃຫ້ມີການຈັດຕໍາແຫນ່ງເພີ່ມເຕີມ
Dropdowns ແມ່ນຖືກຈັດໃສ່ໂດຍອັດຕະໂນມັດຜ່ານ CSS ພາຍໃນການໄຫຼວຽນປົກກະຕິຂອງເອກະສານ. ນີ້ຫມາຍຄວາມວ່າ dropdowns ອາດຈະຖືກຕັດໂດຍພໍ່ແມ່ທີ່ມີ overflow
ຄຸນສົມບັດສະເພາະໃດຫນຶ່ງຫຼືປາກົດຢູ່ນອກຂອບເຂດຂອງ viewport ໄດ້. ແກ້ໄຂບັນຫາເຫຼົ່ານີ້ດ້ວຍຕົວຂອງທ່ານເອງເມື່ອພວກເຂົາເກີດຂື້ນ.
ຄັດຄ້ານ .pull-right
ການຈັດຮຽງ
ຕັ້ງແຕ່ v3.1.0, ພວກເຮົາໄດ້ເຊົາໃຊ້ .pull-right
ເມນູແບບເລື່ອນລົງແລ້ວ. ເພື່ອຈັດຮຽງເມນູໃຫ້ຖືກຕ້ອງ, ໃຫ້ໃຊ້ .dropdown-menu-right
. ອົງປະກອບ nav ທີ່ຈັດຮຽງຂວາໃນແຖບ navbar ໃຊ້ເວີຊັນ mixin ຂອງຊັ້ນຮຽນນີ້ເພື່ອຈັດຮຽງເມນູໂດຍອັດຕະໂນມັດ. ເພື່ອ override ມັນ, ໃຊ້ .dropdown-menu-left
.
<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 ປຸ່ມຂອງພວກເຮົາ .
ໃຫ້ແນ່ໃຈວ່າຖືກຕ້ອງ 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>
ອົງປະກອບ
ພຽງແຕ່ຫໍ່ຊຸດຂອງ .btn
s ໃນ .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
ລິ້ງທີ່ເຮັດໜ້າທີ່ເປັນປຸ່ມ
ຖ້າ <a>
ອົງປະກອບຖືກໃຊ້ເພື່ອເຮັດຫນ້າທີ່ເປັນປຸ່ມ - ກະຕຸ້ນການເຮັດວຽກໃນຫນ້າ, ແທນທີ່ຈະນໍາທາງໄປຫາເອກະສານຫຼືພາກສ່ວນອື່ນພາຍໃນຫນ້າປະຈຸບັນ - ພວກເຂົາຄວນຈະຖືກມອບໃຫ້ທີ່ເຫມາະສົມ role="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 ຖືກກະຕຸ້ນ).
ວາງຫນຶ່ງສ່ວນເສີມ ຫຼືປຸ່ມໃສ່ສອງຂ້າງຂອງອິນພຸດ. ເຈົ້າອາດຈະວາງອັນໜຶ່ງໃສ່ທັງສອງດ້ານຂອງການປ້ອນຂໍ້ມູນ.
ພວກເຮົາບໍ່ຮອງຮັບຫຼາຍ 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>
ວາງກ່ອງໝາຍ ຫຼືຕົວເລືອກວິທະຍຸໃດນຶ່ງພາຍໃນ 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 -->
ປຸ່ມຕ່າງໆໃນກຸ່ມປ້ອນຂໍ້ມູນແມ່ນແຕກຕ່າງກັນເລັກນ້ອຍ ແລະຕ້ອງການການວາງຮັງຕື່ມອີກ. ແທນທີ່ຈະ .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>
ເພີ່ມ .navbar-btn
ຫ້ອງຮຽນໃສ່ <button>
ອົງປະກອບທີ່ບໍ່ຢູ່ໃນ a <form>
ເພື່ອວາງພວກມັນໄວ້ທາງກາງໃນແຖບ navbar.
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
ການນຳໃຊ້ສະເພາະບໍລິບົດ
ເຊັ່ນດຽວກັນກັບ ຫ້ອງຮຽນປຸ່ມ ມາດຕະຖານ , .navbar-btn
ສາມາດຖືກນໍາໃຊ້ <a>
ແລະ <input>
ອົງປະກອບ. ແນວໃດກໍ່ຕາມ, ທັງ .navbar-btn
ຫຼືຫ້ອງຮຽນປຸ່ມມາດຕະຖານບໍ່ຄວນຖືກໃຊ້ກັບ <a>
ອົງປະກອບພາຍໃນ .navbar-nav
.
ຂໍ້ຄວາມ
ຫໍ່ຂໍ້ຄວາມໃນອົງປະກອບທີ່ມີ .navbar-text
, ປົກກະຕິແລ້ວຢູ່ໃນ <p>
ໂຄດຄໍາສັ່ງສໍາລັບການນໍາພາທີ່ເຫມາະສົມແລະສີ.
ເຂົ້າສູ່ລະບົບເປັນ Mark Otto
<p class= "navbar-text" > Signed in as Mark Otto</p>
ການເຊື່ອມຕໍ່ທີ່ບໍ່ແມ່ນ nav
ສໍາລັບຄົນອື່ນໆທີ່ໃຊ້ລິ້ງມາດຕະຖານທີ່ບໍ່ຢູ່ໃນອົງປະກອບນໍາທາງ navbar ປົກກະຕິ, ໃຊ້ .navbar-link
class ເພື່ອເພີ່ມສີທີ່ເຫມາະສົມສໍາລັບຕົວເລືອກ 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>
Inverted navbar
ແກ້ໄຂລັກສະນະຂອງແຖບ 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 ສໍາລັບເວັບໄຊທ໌ຫຼື app ຂອງທ່ານດ້ວຍອົງປະກອບ pagination ຫຼາຍຫນ້າ, ຫຼື ທາງເລືອກ pager ທີ່ງ່າຍກວ່າ .
pagination ງ່າຍດາຍໄດ້ຮັບການດົນໃຈໂດຍ Rdio, ທີ່ຍິ່ງໃຫຍ່ສໍາລັບກິດແລະຜົນການຊອກຫາ. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </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" > » </span>
</a>
</li>
</ul>
</nav>
ສະຖານະທີ່ພິການ ແລະເຄື່ອນໄຫວ
ການເຊື່ອມຕໍ່ສາມາດປັບແຕ່ງໄດ້ສໍາລັບສະຖານະການທີ່ແຕກຕ່າງກັນ. ໃຊ້ .disabled
ສໍາລັບການເຊື່ອມຕໍ່ unclickable ແລະ .active
ຊີ້ບອກຫນ້າປະຈຸບັນ.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </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" > « </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>
ລິ້ງກ່ອນໜ້າ ແລະຕໍ່ໄປໄວສຳລັບການຈັດຕັ້ງປະຕິບັດການວາງໜ້າແບບງ່າຍໆດ້ວຍເຄື່ອງໝາຍຈຸດ ແລະຮູບແບບສີສັນ. ມັນດີສໍາລັບເວັບໄຊທ໌ງ່າຍໆເຊັ່ນ 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" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
ສະຖານະປິດການໃຊ້ງານທາງເລືອກ
ການເຊື່ອມໂຍງ Pager ຍັງໃຊ້ .disabled
ປະເພດຜົນປະໂຫຍດທົ່ວໄປຈາກ pagination.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
ຕົວຢ່າງ
ຕົວຢ່າງຫົວຂໍ້ New
ຕົວຢ່າງຫົວຂໍ້ New
ຕົວຢ່າງຫົວຂໍ້ New
ຕົວຢ່າງຫົວຂໍ້ New
ຕົວຢ່າງຫົວຂໍ້ New
ຕົວຢ່າງຫົວຂໍ້ 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 ແລະອື່ນໆອີກ.
<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
ປຸ່ມທາງເລືອກ ແລະປິດ.
×
ເຕືອນໄພ! ກວດເບິ່ງຕົວເອງດີກວ່າ, ເຈົ້າເບິ່ງບໍ່ດີເກີນໄປ.
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
ການເຊື່ອມຕໍ່ໃນການແຈ້ງເຕືອນ
ໃຊ້ .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
ຫ້ອງຮຽນອອກຈາກພາຍໃນແຖບຄວາມຄືບຫນ້າເພື່ອສະແດງອັດຕາສ່ວນທີ່ເຫັນໄດ້.
<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
ແຖບຄວາມຄືບຫນ້າ.
<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>
ທາງເລືອກໃນສະພາບການ
ແຖບຄວາມຄືບຫນ້າໃຊ້ບາງປຸ່ມດຽວກັນແລະຫ້ອງຮຽນເຕືອນສໍາລັບຮູບແບບທີ່ສອດຄ່ອງ.
ສຳເລັດແລ້ວ 40% (ຄວາມສຳເລັດ)
<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 ແລະຂ້າງລຸ່ມນີ້.
ສຳເລັດແລ້ວ 40% (ຄວາມສຳເລັດ)
<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
ເພື່ອວາງພວກມັນໄວ້.
ສຳເລັດແລ້ວ 35% (ຄວາມສຳເລັດ)
ສຳເລັດແລ້ວ 20% (ຄຳເຕືອນ)
ສໍາເລັດ 10% (ອັນຕະລາຍ)
<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, ແລະອື່ນໆ) ທີ່ມີຮູບພາບຈັດຮຽງຊ້າຍ ຫຼືຂວາພ້ອມກັບເນື້ອໃນຂໍ້ຄວາມ.
ສື່ເລີ່ມຕົ້ນສະແດງວັດຖຸມີເດຍ (ຮູບພາບ, ວິດີໂອ, ສຽງ) ໄປທາງຊ້າຍ ຫຼືຂວາຂອງບລັອກເນື້ອຫາ.
<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.
ຮູບພາບຫຼືສື່ມວນຊົນອື່ນໆສາມາດຈັດວາງເທິງ, ກາງ, ຫຼືລຸ່ມ. ຄ່າເລີ່ມຕົ້ນແມ່ນຈັດຮຽງດ້ານເທິງ.
<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>
ດ້ວຍເຄື່ອງໝາຍພິເສດເລັກນ້ອຍ, ທ່ານສາມາດໃຊ້ສື່ພາຍໃນລາຍຊື່ (ທີ່ເປັນປະໂຫຍດສຳລັບຫົວຂໍ້ຄຳເຫັນ ຫຼືລາຍການບົດຄວາມ).
<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>
ປ້າຍ
ເພີ່ມອົງປະກອບປ້າຍໃສ່ລາຍການກຸ່ມລາຍຊື່ໃດນຶ່ງ ແລະມັນຈະຖືກວາງໄວ້ທາງຂວາໂດຍອັດຕະໂນມັດ.
14 Cras justo odio
2 Dapibus ac facilisis ໃນ
1 Morbi 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>
). ບໍ່ຈໍາເປັນຕ້ອງມີພໍ່ແມ່ສ່ວນບຸກຄົນປະມານແຕ່ລະອົງປະກອບ.
<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
ຫ້ອງຮຽນມາດຕະຖານຢູ່ທີ່ນີ້.
Cras justo odio
Dapibus ac facilisis ໃນ
Morbi leo risus
Porta ac consectetur ac
vestibulum ຢູ່ eros
<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
ໃຫ້ເປັນສີເທົາໃຫ້ປະກົດວ່າປິດໃຊ້ງານ.
<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
<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 ພາຍໃນ, ເຖິງແມ່ນວ່າສໍາລັບກຸ່ມລາຍຊື່ທີ່ເຊື່ອມໂຍງເຊັ່ນຫນຶ່ງຂ້າງລຸ່ມນີ້.
<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>