ອົງປະກອບ
ຫຼາຍກວ່າອາຍແກັສອົງປະກອບທີ່ສາມາດນໍາມາໃຊ້ຄືນໄດ້ທີ່ສ້າງຂຶ້ນເພື່ອສະຫນອງຮູບສັນຍາລັກ, ເລື່ອນລົງ, ກຸ່ມການປ້ອນຂໍ້ມູນ, ການນໍາທາງ, ການແຈ້ງເຕືອນ, ແລະອື່ນໆອີກ.
ຫຼາຍກວ່າອາຍແກັສອົງປະກອບທີ່ສາມາດນໍາມາໃຊ້ຄືນໄດ້ທີ່ສ້າງຂຶ້ນເພື່ອສະຫນອງຮູບສັນຍາລັກ, ເລື່ອນລົງ, ກຸ່ມການປ້ອນຂໍ້ມູນ, ການນໍາທາງ, ການແຈ້ງເຕືອນ, ແລະອື່ນໆອີກ.
ລວມມີຫຼາຍກວ່າ 250 glyphs ໃນຮູບແບບຕົວອັກສອນຈາກຊຸດ Glyphicon Halflings. Glyphicons Halflings ປົກກະຕິແລ້ວບໍ່ມີໃຫ້ຟຣີ, ແຕ່ຜູ້ສ້າງຂອງພວກເຂົາໄດ້ເຮັດໃຫ້ພວກເຂົາສາມາດໃຊ້ໄດ້ສໍາລັບ Bootstrap ໂດຍບໍ່ເສຍຄ່າ. ເພື່ອເປັນການຂອບໃຈ, ພວກເຮົາພຽງແຕ່ຂໍໃຫ້ທ່ານລວມເອົາການເຊື່ອມຕໍ່ກັບຄືນໄປບ່ອນ Glyphicons ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້.
ສໍາລັບເຫດຜົນການປະຕິບັດ, ໄອຄອນທັງຫມົດຮຽກຮ້ອງໃຫ້ມີຊັ້ນພື້ນຖານແລະຊັ້ນໄອຄອນສ່ວນບຸກຄົນ. ເພື່ອໃຊ້, ໃຫ້ໃສ່ລະຫັດຕໍ່ໄປນີ້ຢູ່ບ່ອນໃດກໍໄດ້. ໃຫ້ແນ່ໃຈວ່າຈະປ່ອຍໃຫ້ຊ່ອງຫວ່າງລະຫວ່າງໄອຄອນແລະຂໍ້ຄວາມສໍາລັບການ padding ທີ່ເຫມາະສົມ.
ຫ້ອງຮຽນໄອຄອນບໍ່ສາມາດຖືກລວມໂດຍກົງກັບອົງປະກອບອື່ນໆ. ພວກມັນບໍ່ຄວນໃຊ້ພ້ອມກັບຫ້ອງຮຽນອື່ນໆໃນອົງປະກອບດຽວກັນ. ແທນທີ່ຈະ, ຕື່ມການຊ້ອນກັນ <span>
ແລະນໍາໃຊ້ຫ້ອງຮຽນໄອຄອນກັບ <span>
.
ຫ້ອງຮຽນໄອຄອນຄວນໃຊ້ສະເພາະກັບອົງປະກອບທີ່ບໍ່ມີເນື້ອໃນຂໍ້ຄວາມ ແລະບໍ່ມີອົງປະກອບຍ່ອຍ.
Bootstrap ສົມມຸດວ່າໄອຄອນໄຟລ໌ຕົວອັກສອນຈະຢູ່ໃນໄດເລກະ ../fonts/
ທໍລີ, ທຽບກັບໄຟລ໌ CSS ທີ່ຖືກລວບລວມ. ການເຄື່ອນຍ້າຍຫຼືປ່ຽນຊື່ໄຟລ໌ຕົວອັກສອນເຫຼົ່ານັ້ນຫມາຍເຖິງການປັບປຸງ CSS ໃນຫນຶ່ງໃນສາມວິທີ:
@icon-font-path
ແລະ/ຫຼື @icon-font-name
ຕົວແປໃນແຫຼ່ງໄຟລ໌ຫນ້ອຍ.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 ປຸ່ມຂອງພວກເຮົາ .
ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຫຼື 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, ທ່ານອາດຈະຕ້ອງການເອົາຫຼືປ່ຽນສີຂອບໃຫມ່.
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>
ອົງປະກອບເພື່ອໃຊ້ກຸ່ມປຸ່ມທີ່ຖືກຕ້ອງກັບ <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
ໃສ່ພໍ່ແມ່.
<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
.
<input>
s ເທົ່ານັ້ນຫຼີກເວັ້ນການນໍາໃຊ້ <select>
ອົງປະກອບຢູ່ທີ່ນີ້ຍ້ອນວ່າພວກມັນບໍ່ສາມາດຖືກຈັດຮູບແບບເຕັມຮູບແບບໃນຕົວທ່ອງເວັບ WebKit.
ຫຼີກເວັ້ນການນໍາໃຊ້ <textarea>
ອົງປະກອບຢູ່ທີ່ນີ້ຍ້ອນວ່າ rows
ຄຸນລັກສະນະຂອງພວກມັນຈະບໍ່ຖືກເຄົາລົບໃນບາງກໍລະນີ.
ເມື່ອນໍາໃຊ້ຄໍາແນະນໍາເຄື່ອງມືຫຼື 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>
ວາງກ່ອງໝາຍ ຫຼືຕົວເລືອກວິທະຍຸໃດນຶ່ງພາຍໃນ 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 ເພື່ອສະຫຼັບລະຫວ່າງແຕ່ລະຮູບແບບ.
ໃຫ້ສັງເກດວ່າ .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 ທີ່ຖືກຕ້ອງໃນປັດຈຸບັນແມ່ນບໍ່ສະຫນັບສະຫນູນ.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ສໍາລັບອົງປະກອບ nav (ແຖບຫຼືຢາ), ເພີ່ມ .disabled
ສໍາລັບ ການເຊື່ອມຕໍ່ສີຂີ້ເຖົ່າແລະບໍ່ມີຜົນກະທົບ hover .
<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 ທີ່ຖືກຕ້ອງໃນປັດຈຸບັນແມ່ນບໍ່ສະຫນັບສະຫນູນ.
<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-text
, ປົກກະຕິແລ້ວຢູ່ໃນ <p>
ໂຄດຄໍາສັ່ງສໍາລັບການນໍາພາທີ່ເຫມາະສົມແລະສີ.
<p class="navbar-text">Signed in as Mark Otto</p>
ສໍາລັບຄົນອື່ນໆທີ່ໃຊ້ລິ້ງມາດຕະຖານທີ່ບໍ່ຢູ່ໃນອົງປະກອບນໍາທາງ 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 ໄດ້ງ່າຍຂຶ້ນໃນທົ່ວຂະຫນາດອຸປະກອນ.
ຕື່ມ .navbar-fixed-top
ແລະລວມເອົາເນື້ອໃນແຖບແຖບ .container
ຫຼື .container-fluid
ໃສ່ກາງ ແລະແຖບ.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
ຕື່ມ .navbar-fixed-bottom
ແລະລວມເອົາເນື້ອໃນແຖບແຖບ .container
ຫຼື .container-fluid
ໃສ່ກາງ ແລະແຖບ.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ສ້າງແຖບ 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 ສໍາລັບເວັບໄຊທ໌ຫຼື 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>
ອົງປະກອບ 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">«</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>
<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
ຕົວເລືອກ.
ຮູບແບບໃນຕົວແມ່ນລວມສໍາລັບການວາງປ້າຍຢູ່ໃນລັດທີ່ເຄື່ອນໄຫວຢູ່ໃນການນໍາທາງຢາ.
<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 ປະເພດໃດກໍໄດ້ເຊັ່ນ: ຫົວຂໍ້, ຫຍໍ້ໜ້າ, ຫຼືປຸ່ມຕ່າງໆເຂົ້າໃນຮູບຫຍໍ້.
<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 ແຈ້ງເຕືອນ .
<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>
ໃຫ້ແນ່ໃຈວ່າໃຊ້ <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) ທີ່ບໍ່ອະນຸຍາດໃຫ້ 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>
ແຖບຄວາມຄືບຫນ້າໃຊ້ບາງປຸ່ມດຽວກັນແລະຫ້ອງຮຽນເຕືອນສໍາລັບຮູບແບບທີ່ສອດຄ່ອງ.
<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, ແລະອື່ນໆ) ທີ່ມີຮູບພາບຈັດຮຽງຊ້າຍ ຫຼືຂວາພ້ອມກັບເນື້ອໃນຂໍ້ຄວາມ.
ສື່ເລີ່ມຕົ້ນສະແດງວັດຖຸມີເດຍ (ຮູບພາບ, ວິດີໂອ, ສຽງ) ໄປທາງຊ້າຍ ຫຼືຂວາຂອງບລັອກເນື້ອຫາ.
<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.
<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 ຂອງທ່ານເອງຕາມຄວາມຕ້ອງການ.
<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>
ເພີ່ມອົງປະກອບປ້າຍໃສ່ລາຍການກຸ່ມລາຍຊື່ໃດນຶ່ງ ແລະມັນຈະຖືກວາງໄວ້ທາງຂວາໂດຍອັດຕະໂນມັດ.
<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
ຫ້ອງຮຽນມາດຕະຖານຢູ່ທີ່ນີ້.
<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
ລັດ.
<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 | ລາຣີ | ນົກ |
<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 | ລາຣີ | ນົກ |
<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.
<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>