ໄດ້ຮັບການຫຼຸດລົງໃນສ່ວນທີ່ສໍາຄັນຂອງໂຄງສ້າງພື້ນຖານຂອງ Bootstrap, ລວມທັງວິທີການຂອງພວກເຮົາໃນການພັດທະນາເວັບທີ່ດີກວ່າ, ໄວກວ່າ, ເຂັ້ມແຂງ.
ປະເພດເອກະສານ HTML5
Bootstrap ໃຊ້ອົງປະກອບ HTML ທີ່ແນ່ນອນແລະຄຸນສົມບັດ CSS ທີ່ຕ້ອງການໃຊ້ HTML5 doctype. ຮວມມັນຢູ່ໃນຕອນຕົ້ນຂອງໂຄງການທັງໝົດຂອງເຈົ້າ.
ສຳເນົາ
<!doctype html>
<html lang= "en" >
...
</html>
ມືຖືກ່ອນ
ດ້ວຍ Bootstrap 2, ພວກເຮົາໄດ້ເພີ່ມຮູບແບບທີ່ເປັນມິດກັບມືຖືທີ່ເປັນທາງເລືອກສໍາລັບລັກສະນະທີ່ສໍາຄັນຂອງກອບ. ດ້ວຍ Bootstrap 3, ພວກເຮົາໄດ້ຂຽນຄືນໂຄງການເພື່ອໃຫ້ເປັນມິດກັບມືຖືຕັ້ງແຕ່ເລີ່ມຕົ້ນ. ແທນທີ່ຈະເພີ່ມຮູບແບບມືຖືທີ່ເປັນທາງເລືອກ, ພວກມັນຖືກອົບເຂົ້າໄປໃນຫຼັກ. ໃນຄວາມເປັນຈິງ, Bootstrap ແມ່ນມືຖືທໍາອິດ . ຮູບແບບມືຖືທໍາອິດສາມາດພົບເຫັນໄດ້ທົ່ວຫ້ອງສະຫມຸດທັງຫມົດແທນທີ່ຈະຢູ່ໃນໄຟລ໌ແຍກຕ່າງຫາກ.
ເພື່ອຮັບປະກັນການສະແດງຜົນທີ່ຖືກຕ້ອງແລະການຊູມສໍາຜັດ, ເພີ່ມແທັກ meta viewport ໃສ່ <head>
.
ສຳເນົາ
<meta name= "viewport" content= "width=device-width, initial-scale=1" >
ທ່ານສາມາດປິດຄວາມສາມາດໃນການຊູມໃນອຸປະກອນມືຖືໂດຍການເພີ່ມໃສ່ user-scalable=no
ແທັກ meta viewport. ນີ້ຈະປິດການຊູມ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ສາມາດເລື່ອນໄດ້ເທົ່ານັ້ນ, ແລະສົ່ງຜົນໃຫ້ເວັບໄຊທ໌ຂອງທ່ານມີຄວາມຮູ້ສຶກຄືກັບຄໍາຮ້ອງສະຫມັກພື້ນເມືອງ. ໂດຍລວມແລ້ວ, ພວກເຮົາບໍ່ແນະນຳອັນນີ້ຢູ່ໃນທຸກເວັບໄຊ, ສະນັ້ນ ຈົ່ງລະມັດລະວັງ!
ສຳເນົາ
<meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
Typography ແລະການເຊື່ອມຕໍ່
Bootstrap ກໍານົດພື້ນຖານການສະແດງທົ່ວໂລກ, typography, ແລະຮູບແບບການເຊື່ອມຕໍ່. ໂດຍສະເພາະ, ພວກເຮົາ:
ຕັ້ງ background-color: #fff;
ຢູ່ເທິງbody
ໃຊ້ @font-family-base
, @font-size-base
, ແລະ @line-height-base
ຄຸນລັກສະນະເປັນພື້ນຖານການພິມຂອງພວກເຮົາ
ກໍານົດສີການເຊື່ອມໂຍງທົ່ວໂລກຜ່ານ @link-color
ແລະນໍາໃຊ້ການເຊື່ອມຕໍ່ underlines ພຽງແຕ່ໃສ່:hover
ຮູບແບບເຫຼົ່ານີ້ສາມາດພົບໄດ້ພາຍໃນ scaffolding.less
.
Normalize.css
ສໍາລັບການປັບປຸງການສະແດງຜົນຂ້າມຕົວທ່ອງເວັບ, ພວກເຮົາໃຊ້ Normalize.css , ໂຄງການໂດຍ Nicolas Gallagher ແລະ Jonathan Neal .
ບັນຈຸ
Bootstrap ຕ້ອງການອົງປະກອບທີ່ບັນຈຸເພື່ອຫໍ່ເນື້ອຫາເວັບໄຊທ໌ແລະສ້າງລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ທ່ານອາດຈະເລືອກຫນຶ່ງໃນສອງຖັງທີ່ຈະໃຊ້ໃນໂຄງການຂອງທ່ານ. ໃຫ້ສັງເກດວ່າ, ເນື່ອງຈາກ padding
ແລະຫຼາຍ, ທັງສອງຕູ້ຄອນເທນເນີແມ່ນ nestable.
ໃຊ້ .container
ສຳລັບບັນຈຸຄວາມກວ້າງຄົງທີ່ທີ່ຕອບສະໜອງໄດ້.
ສຳເນົາ
<div class= "container" >
...
</div>
ໃຊ້ .container-fluid
ສໍາລັບບັນຈຸຄວາມກວ້າງເຕັມ, ຂະຫຍາຍຄວາມກວ້າງທັງຫມົດຂອງຊ່ອງເບິ່ງຂອງທ່ານ.
ສຳເນົາ
<div class= "container-fluid" >
...
</div>
Bootstrap ປະກອບມີລະບົບຕາຂ່າຍນ້ໍາທໍາອິດທີ່ຕອບສະຫນອງ, ມືຖືທີ່ເຫມາະສົມທີ່ຈະຂະຫນາດເຖິງ 12 ຖັນຕາມຂະຫນາດອຸປະກອນຫຼື viewport ເພີ່ມຂຶ້ນ. ມັນປະກອບມີ ຊັ້ນຮຽນທີ່ກໍານົດໄວ້ກ່ອນ ສໍາລັບທາງເລືອກການຈັດວາງທີ່ງ່າຍ, ເຊັ່ນດຽວກັນກັບ mixins ທີ່ມີປະສິດທິພາບສໍາລັບການສ້າງຮູບແບບ semantic ຫຼາຍ .
ແນະນຳ
ລະບົບຕາຂ່າຍໄຟຟ້າຖືກນໍາໃຊ້ສໍາລັບການສ້າງຮູບແບບຫນ້າໂດຍຜ່ານຊຸດຂອງແຖວແລະຄໍລໍາທີ່ເກັບຮັກສາເນື້ອຫາຂອງທ່ານ. ນີ້ແມ່ນວິທີການລະບົບຕາຂ່າຍ Bootstrap ເຮັດວຽກ:
ແຖວຕ້ອງຖືກວາງໄວ້ພາຍໃນ .container
(ຄວາມກວ້າງຄົງທີ່) ຫຼື .container-fluid
(ເຕັມຄວາມກວ້າງ) ເພື່ອການຈັດຮຽງ ແລະ ແຜ່ນຢາງທີ່ເໝາະສົມ.
ໃຊ້ແຖວເພື່ອສ້າງກຸ່ມແນວນອນຂອງຖັນ.
ເນື້ອຫາຄວນຈະຖືກວາງໄວ້ພາຍໃນຖັນ, ແລະພຽງແຕ່ຖັນອາດຈະເປັນລູກແຖວທັນທີ.
ຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າເຊັ່ນ .row
ແລະ .col-xs-4
ມີໃຫ້ສຳລັບການສ້າງແຜນຜັງຕາໜ່າງຢ່າງວ່ອງໄວ. ປະສົມໜ້ອຍຍັງສາມາດຖືກໃຊ້ເພື່ອການຈັດລຽງແບບ semantic ຫຼາຍ.
ຖັນສ້າງ gutters (ຊ່ອງຫວ່າງລະຫວ່າງເນື້ອໃນຖັນ) ຜ່ານ padding
. padding ນັ້ນຖືກຊົດເຊີຍໃນແຖວສໍາລັບຖັນທໍາອິດແລະສຸດທ້າຍຜ່ານຂອບທາງລົບຢູ່ .row
s.
ຂອບທາງລົບແມ່ນວ່າເປັນຫຍັງຕົວຢ່າງຂ້າງລຸ່ມນີ້ແມ່ນ outdented. ມັນເປັນດັ່ງນັ້ນວ່າເນື້ອໃນໃນຖັນຕາຂ່າຍໄຟຟ້າແມ່ນ lined ຂຶ້ນກັບເນື້ອຫາທີ່ບໍ່ແມ່ນຕາຂ່າຍໄຟຟ້າ.
ຖັນຕາຂ່າຍຖືກສ້າງຂື້ນໂດຍການລະບຸຈໍານວນສິບສອງຖັນທີ່ມີທີ່ທ່ານຕ້ອງການຂະຫຍາຍ. ຕົວຢ່າງ, ສາມຖັນເທົ່າກັນຈະໃຊ້ສາມ .col-xs-4
.
ຖ້າຫຼາຍກວ່າ 12 ຖັນຖືກວາງໄວ້ພາຍໃນແຖວດຽວ, ແຕ່ລະກຸ່ມຂອງຖັນເພີ່ມເຕີມຈະ, ເປັນຫນ່ວຍດຽວ, ຫໍ່ໃສ່ແຖວໃຫມ່.
ຫ້ອງຮຽນຕາໜ່າງນຳໃຊ້ກັບອຸປະກອນທີ່ມີຄວາມກວ້າງໜ້າຈໍໃຫຍ່ກວ່າ ຫຼືເທົ່າກັບຂະໜາດຂອງຈຸດແບ່ງ, ແລະລົບລ້າງຊັ້ນຕາໜ່າງທີ່ກຳນົດເປົ້າໝາຍໃສ່ອຸປະກອນທີ່ນ້ອຍກວ່າ. ດັ່ງນັ້ນ, ເຊັ່ນ: ການນຳໃຊ້ .col-md-*
ຊັ້ນຮຽນໃດນຶ່ງໃສ່ອົງປະກອບໃດໜຶ່ງຈະບໍ່ພຽງແຕ່ສົ່ງຜົນກະທົບຕໍ່ການຈັດຮູບແບບຂອງມັນຢູ່ໃນອຸປະກອນຂະໜາດກາງເທົ່ານັ້ນ, ແຕ່ຍັງຢູ່ໃນອຸປະກອນຂະໜາດໃຫຍ່ ຖ້າ .col-lg-*
ຫ້ອງຮຽນບໍ່ຢູ່ນຳ.
ເບິ່ງຕົວຢ່າງສໍາລັບການນໍາໃຊ້ຫຼັກການເຫຼົ່ານີ້ກັບລະຫັດຂອງທ່ານ.
ພວກເຮົາໃຊ້ການສອບຖາມສື່ຕໍ່ໄປນີ້ໃນໄຟລ໌ Less ຂອງພວກເຮົາເພື່ອສ້າງຈຸດຢຸດທີ່ສໍາຄັນໃນລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ.
ສຳເນົາ
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media ( min-width : @ screen-sm-min ) { ... }
/* Medium devices (desktops, 992px and up) */
@media ( min-width : @ screen-md-min ) { ... }
/* Large devices (large desktops, 1200px and up) */
@media ( min-width : @ screen-lg-min ) { ... }
ພວກເຮົາຂະຫຍາຍການສອບຖາມສື່ເຫຼົ່ານີ້ເປັນບາງໂອກາດເພື່ອລວມເອົາ max-width
ການຈຳກັດ CSS ໃຫ້ກັບອຸປະກອນທີ່ແຄບກວ່າ.
ສຳເນົາ
@media ( max-width : @ screen-xs-max ) { ... }
@media ( min-width : @ screen-sm-min ) and ( max-width : @ screen-sm-max ) { ... }
@media ( min-width : @ screen-md-min ) and ( max-width : @ screen-md-max ) { ... }
@media ( min-width : @ screen-lg-min ) { ... }
ຕົວເລືອກຕາຕະລາງ
ເບິ່ງວ່າລະບົບຕາຂ່າຍ Bootstrap ເຮັດວຽກແນວໃດໃນທົ່ວອຸປະກອນຕ່າງໆດ້ວຍຕາຕະລາງທີ່ມີປະໂຫຍດ.
ອຸປະກອນຂະຫນາດນ້ອຍພິເສດ ໂທລະສັບ (<768px)
ອຸປະກອນຂະໜາດນ້ອຍ ແທັບເລັດ (≥768px)
ອຸປະກອນຂະໜາດກາງ Desktops (≥992px)
ອຸປະກອນຂະໜາດໃຫຍ່ Desktops (≥1200px)
ພຶດຕິກໍາຂອງຕາຂ່າຍໄຟຟ້າ
ອອກຕາມລວງນອນຕະຫຼອດເວລາ
ຫຍໍ້ລົງເພື່ອເລີ່ມຕົ້ນ, ລວງນອນຂ້າງເທິງຈຸດຢຸດ
ຄວາມກວ້າງຂອງບັນຈຸ
ບໍ່ມີ (ອັດຕະໂນມັດ)
750px
970px
1170px
ຄຳນຳໜ້າຫ້ອງຮຽນ
.col-xs-
.col-sm-
.col-md-
.col-lg-
# ຂອງຖັນ
12
ຄວາມກວ້າງຂອງຖັນ
ອັດຕະໂນມັດ
~62px
~81px
~97px
ຄວາມກວ້າງຂອງ Gutter
30px (15px ໃນແຕ່ລະດ້ານຂອງຖັນ)
ຮັງ
ແມ່ນແລ້ວ
ຊົດເຊີຍ
ແມ່ນແລ້ວ
ການສັ່ງຖັນ
ແມ່ນແລ້ວ
ຕົວຢ່າງ: stacked-to-horizontal
ໂດຍໃຊ້ຊຸດ .col-md-*
ຊັ້ນຮຽນຕາຂ່າຍໄຟຟ້າຊຸດດຽວ, ທ່ານສາມາດສ້າງລະບົບຕາຂ່າຍໄຟຟ້າຂັ້ນພື້ນຖານທີ່ເລີ່ມວາງຊ້ອນກັນຢູ່ໃນອຸປະກອນມືຖື ແລະອຸປະກອນແທັບເລັດ (ລະດັບຂະໜາດນ້ອຍຫານ້ອຍພິເສດ) ກ່ອນທີ່ຈະກາຍເປັນແນວນອນໃນອຸປະກອນ desktop (ຂະຫນາດກາງ). ວາງຖັນຕາໜ່າງໃສ່ໃນອັນໃດນຶ່ງ .row
.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
ສຳເນົາ
<div class= "row" >
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
<div class= "col-md-1" > .col-md-1</div>
</div>
<div class= "row" >
<div class= "col-md-8" > .col-md-8</div>
<div class= "col-md-4" > .col-md-4</div>
</div>
<div class= "row" >
<div class= "col-md-4" > .col-md-4</div>
<div class= "col-md-4" > .col-md-4</div>
<div class= "col-md-4" > .col-md-4</div>
</div>
<div class= "row" >
<div class= "col-md-6" > .col-md-6</div>
<div class= "col-md-6" > .col-md-6</div>
</div>
ຕົວຢ່າງ: ບັນຈຸນໍ້າ
ປ່ຽນຮູບແບບຕາໜ່າງທີ່ມີຄວາມກວ້າງຄົງທີ່ໃຫ້ເປັນໂຄງຮ່າງຄວາມກວ້າງເຕັມໂດຍການປ່ຽນດ້ານນອກສຸດຂອງທ່ານ .container
ເປັນ .container-fluid
.
ສຳເນົາ
<div class= "container-fluid" >
<div class= "row" >
...
</div>
</div>
ຕົວຢ່າງ: ມືຖື ແລະເດັສທັອບ
ບໍ່ຕ້ອງການຄໍລໍາຂອງທ່ານພຽງແຕ່ stack ໃນອຸປະກອນຂະຫນາດນ້ອຍ? ໃຊ້ຫ້ອງຮຽນຕາຕະລາງອຸປະກອນຂະຫນາດນ້ອຍ ແລະຂະຫນາດກາງເພີ່ມເຕີມໂດຍການເພີ່ມ .col-xs-*
.col-md-*
ໃສ່ຖັນຂອງທ່ານ. ເບິ່ງຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບຄວາມຄິດທີ່ດີກວ່າຂອງວິທີການເຮັດວຽກທັງຫມົດ.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
ສຳເນົາ
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class= "row" >
<div class= "col-xs-12 col-md-8" > .col-xs-12 .col-md-8</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class= "row" >
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class= "row" >
<div class= "col-xs-6" > .col-xs-6</div>
<div class= "col-xs-6" > .col-xs-6</div>
</div>
ຕົວຢ່າງ: ມືຖື, ແທັບເລັດ, ເດັສທັອບ
ສ້າງຂຶ້ນໃນຕົວຢ່າງທີ່ຜ່ານມາໂດຍການສ້າງໂຄງຮ່າງທີ່ມີການເຄື່ອນໄຫວ ແລະມີປະສິດທິພາບຫຼາຍຂຶ້ນດ້ວຍຫ້ອງຮຽນແທັບເລັດ .col-sm-*
.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
ສຳເນົາ
<div class= "row" >
<div class= "col-xs-12 col-sm-6 col-md-8" > .col-xs-12 .col-sm-6 .col-md-8</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
</div>
<div class= "row" >
<div class= "col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div>
<div class= "col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class= "clearfix visible-xs-block" ></div>
<div class= "col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4</div>
</div>
ຕົວຢ່າງ: ການຫໍ່ຖັນ
ຖ້າຫຼາຍກວ່າ 12 ຖັນຖືກວາງໄວ້ພາຍໃນແຖວດຽວ, ແຕ່ລະກຸ່ມຂອງຖັນເພີ່ມເຕີມຈະ, ເປັນຫນ່ວຍດຽວ, ຫໍ່ໃສ່ແຖວໃຫມ່.
.col-xs-9
.col-xs-4
ຕັ້ງແຕ່ 9 + 4 = 13 > 12, div ກວ້າງ 4 ຖັນນີ້ຖືກຫໍ່ໃສ່ແຖວໃໝ່ເປັນໜຶ່ງໜ່ວຍທີ່ຕິດກັນ.
.col-xs-6
ຖັນຕໍ່ມາສືບຕໍ່ໄປຕາມແຖວໃໝ່.
ສຳເນົາ
<div class= "row" >
<div class= "col-xs-9" > .col-xs-9</div>
<div class= "col-xs-4" > .col-xs-4<br> Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class= "col-xs-6" > .col-xs-6<br> Subsequent columns continue along the new line.</div>
</div>
ຣີເຊັດຖັນທີ່ຕອບສະໜອງ
ດ້ວຍ 4 ຊັ້ນຂອງຕາຂ່າຍໄຟຟ້າທີ່ເຈົ້າຕ້ອງປະເຊີນກັບບັນຫາທີ່, ໃນຈຸດຢຸດທີ່ແນ່ນອນ, ຖັນຂອງທ່ານບໍ່ຊັດເຈນຍ້ອນວ່າຫນຶ່ງສູງກ່ວາອີກ. ເພື່ອແກ້ໄຂນັ້ນ, ໃຫ້ໃຊ້ການປະສົມປະສານຂອງ a .clearfix
ແລະ ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ຕອບ ສະໜອງຂອງພວກເຮົາ .
.col-xs-6 .col-sm-3
ປັບຂະໜາດມຸມເບິ່ງຂອງທ່ານ ຫຼືກວດເບິ່ງມັນຢູ່ໃນໂທລະສັບຂອງທ່ານເປັນຕົວຢ່າງ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
ສຳເນົາ
<div class= "row" >
<div class= "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3</div>
<div class= "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class= "clearfix visible-xs-block" ></div>
<div class= "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3</div>
<div class= "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3</div>
</div>
ນອກເໜືອໄປຈາກການຕັດຖັນຢູ່ຈຸດຢຸດຕອບສະໜອງ, ທ່ານອາດຈະຕ້ອງ ຣີເຊັດການຊົດເຊີຍ, ການກົດດັນ ຫຼື ດຶງ . ເບິ່ງນີ້ໃນການປະຕິບັດໃນ ຕົວຢ່າງຕາຕະລາງ .
ສຳເນົາ
<div class= "row" >
<div class= "col-sm-5 col-md-6" > .col-sm-5 .col-md-6</div>
<div class= "col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" > .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class= "row" >
<div class= "col-sm-6 col-md-5 col-lg-6" > .col-sm-6 .col-md-5 .col-lg-6</div>
<div class= "col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" > .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
ເອົາທໍ່ນໍ້າອອກ
ເອົາ gutters ອອກຈາກແຖວແລະມັນເປັນຖັນກັບ .row-no-gutters
ຫ້ອງຮຽນ.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
ສຳເນົາ
<div class= "row row-no-gutters" >
<div class= "col-xs-12 col-md-8" > .col-xs-12 .col-md-8</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
</div>
<div class= "row row-no-gutters" >
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
<div class= "col-xs-6 col-md-4" > .col-xs-6 .col-md-4</div>
</div>
<div class= "row row-no-gutters" >
<div class= "col-xs-6" > .col-xs-6</div>
<div class= "col-xs-6" > .col-xs-6</div>
</div>
ການຊົດເຊີຍຖັນ
ຍ້າຍຖັນໄປທາງຂວາໂດຍໃຊ້ .col-md-offset-*
ຊັ້ນຮຽນ. ຫ້ອງຮຽນເຫຼົ່ານີ້ເພີ່ມຂອບຊ້າຍຂອງຖັນໂດຍ *
ຖັນ. ຕົວຢ່າງ, .col-md-offset-4
ຍ້າຍ .col-md-4
ຫຼາຍກວ່າສີ່ຖັນ.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
ສຳເນົາ
<div class= "row" >
<div class= "col-md-4" > .col-md-4</div>
<div class= "col-md-4 col-md-offset-4" > .col-md-4 .col-md-offset-4</div>
</div>
<div class= "row" >
<div class= "col-md-3 col-md-offset-3" > .col-md-3 .col-md-offset-3</div>
<div class= "col-md-3 col-md-offset-3" > .col-md-3 .col-md-offset-3</div>
</div>
<div class= "row" >
<div class= "col-md-6 col-md-offset-3" > .col-md-6 .col-md-offset-3</div>
</div>
ນອກນັ້ນທ່ານຍັງສາມາດ override offsets ຈາກຊັ້ນຕາຂ່າຍໄຟຟ້າຕ່ໍາກັບ .col-*-offset-0
ຫ້ອງຮຽນ.
ສຳເນົາ
<div class= "row" >
<div class= "col-xs-6 col-sm-4" >
</div>
<div class= "col-xs-6 col-sm-4" >
</div>
<div class= "col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0" >
</div>
</div>
ຖັນຮັງ
ເພື່ອວາງເນື້ອຫາຂອງທ່ານດ້ວຍຕາຂ່າຍເລີ່ມຕົ້ນ, ໃຫ້ເພີ່ມຖັນໃໝ່ .row
ແລະຊຸດຂອງ .col-sm-*
ຖັນພາຍໃນຖັນທີ່ມີຢູ່ແລ້ວ .col-sm-*
. ແຖວທີ່ຊ້ອນກັນຄວນປະກອບມີຊຸດຂອງຖັນທີ່ເພີ່ມສູງສຸດ 12 ຫຼືໜ້ອຍກວ່ານັ້ນ (ມັນບໍ່ຈຳເປັນທີ່ທ່ານໃຊ້ທັງໝົດ 12 ຖັນ).
ລະດັບ 1: .col-sm-9
ລະດັບ 2: .col-xs-8 .col-sm-6
ລະດັບ 2: .col-xs-4 .col-sm-6
ສຳເນົາ
<div class= "row" >
<div class= "col-sm-9" >
Level 1: .col-sm-9
<div class= "row" >
<div class= "col-xs-8 col-sm-6" >
Level 2: .col-xs-8 .col-sm-6
</div>
<div class= "col-xs-4 col-sm-6" >
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
ການສັ່ງຖັນ
ປ່ຽນລຳດັບຂອງຖັນຕາໜ່າງທີ່ສ້າງຂຶ້ນໃນຕົວຂອງພວກເຮົາໄດ້ຢ່າງງ່າຍດາຍດ້ວຍ ຫ້ອງຮຽນ .col-md-push-*
ແລະ .col-md-pull-*
ຕົວແກ້ໄຂ.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
ສຳເນົາ
<div class= "row" >
<div class= "col-md-9 col-md-push-3" > .col-md-9 .col-md-push-3</div>
<div class= "col-md-3 col-md-pull-9" > .col-md-3 .col-md-pull-9</div>
</div>
ຫນ້ອຍ mixins ແລະຕົວແປ
ນອກເໜືອໄປຈາກ ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າ ທີ່ສ້າງໄວ້ລ່ວງໜ້າ ແລ້ວສຳລັບການຈັດວາງໄວ, Bootstrap ລວມມີຕົວແປໜ້ອຍລົງ ແລະເຄື່ອງປະສົມສຳລັບການສ້າງຮູບແບບທີ່ລຽບງ່າຍ, ມີຄວາມໝາຍໄວຂອງທ່ານເອງ.
ຕົວແປ
ຕົວແປກຳນົດຈຳນວນຖັນ, ຄວາມກວ້າງຂອງທໍ່ນ້ຳ, ແລະຈຸດສອບຖາມສື່ທີ່ຈະເລີ່ມຖັນລອຍ. ພວກເຮົາໃຊ້ສິ່ງເຫຼົ່ານີ້ເພື່ອສ້າງຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນເອກະສານຂ້າງເທິງ, ເຊັ່ນດຽວກັນກັບເຄື່ອງປະສົມແບບກຳນົດເອງທີ່ລະບຸໄວ້ຂ້າງລຸ່ມນີ້.
ສຳເນົາ
@grid-columns : 12 ;
@grid-gutter-width : 30px ;
@grid-float-breakpoint : 768px ;
ມິກຊິນ
Mixins ຖືກໃຊ້ຮ່ວມກັບຕົວແປຕາຕະລາງເພື່ອສ້າງ CSS semantic ສໍາລັບຖັນຕາຂ່າຍໄຟຟ້າສ່ວນບຸກຄົນ.
ສຳເນົາ
// Creates a wrapper for a series of columns
. make-row (@ gutter : @ grid-gutter-width ) {
// Then clear the floated columns
.clearfix () ;
@media ( min-width : @ screen-sm-min ) {
margin-left : ( @ gutter / -2 );
margin-right : ( @ gutter / -2 );
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left : ( @ gutter / -2 );
margin-right : ( @ gutter / -2 );
}
}
// Generate the extra small columns
.make-xs-column (@ columns ; @gutter : @ grid-gutter-width ) {
position : relative ;
// Prevent columns from collapsing when empty
min-height : 1px ;
// Inner gutter via padding
padding-left : ( @ gutter / 2 );
padding-right : ( @ gutter / 2 );
// Calculate width based on number of columns available
@media ( min-width : @ grid-float-breakpoint ) {
float : left ;
width : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the small columns
.make-sm-column (@ columns ; @gutter : @ grid-gutter-width ) {
position : relative ;
// Prevent columns from collapsing when empty
min-height : 1px ;
// Inner gutter via padding
padding-left : ( @ gutter / 2 );
padding-right : ( @ gutter / 2 );
// Calculate width based on number of columns available
@media ( min-width : @ screen-sm-min ) {
float : left ;
width : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the small column offsets
.make-sm-column-offset (@ columns ) {
@media ( min-width : @ screen-sm-min ) {
margin-left : percentage (( @ columns / @ grid-columns ));
}
}
.make-sm-column-push (@ columns ) {
@media ( min-width : @ screen-sm-min ) {
left : percentage (( @ columns / @ grid-columns ));
}
}
.make-sm-column-pull (@ columns ) {
@media ( min-width : @ screen-sm-min ) {
right : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the medium columns
.make-md-column (@ columns ; @gutter : @ grid-gutter-width ) {
position : relative ;
// Prevent columns from collapsing when empty
min-height : 1px ;
// Inner gutter via padding
padding-left : ( @ gutter / 2 );
padding-right : ( @ gutter / 2 );
// Calculate width based on number of columns available
@media ( min-width : @ screen-md-min ) {
float : left ;
width : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the medium column offsets
.make-md-column-offset (@ columns ) {
@media ( min-width : @ screen-md-min ) {
margin-left : percentage (( @ columns / @ grid-columns ));
}
}
.make-md-column-push (@ columns ) {
@media ( min-width : @ screen-md-min ) {
left : percentage (( @ columns / @ grid-columns ));
}
}
.make-md-column-pull (@ columns ) {
@media ( min-width : @ screen-md-min ) {
right : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the large columns
.make-lg-column (@ columns ; @gutter : @ grid-gutter-width ) {
position : relative ;
// Prevent columns from collapsing when empty
min-height : 1px ;
// Inner gutter via padding
padding-left : ( @ gutter / 2 );
padding-right : ( @ gutter / 2 );
// Calculate width based on number of columns available
@media ( min-width : @ screen-lg-min ) {
float : left ;
width : percentage (( @ columns / @ grid-columns ));
}
}
// Generate the large column offsets
.make-lg-column-offset (@ columns ) {
@media ( min-width : @ screen-lg-min ) {
margin-left : percentage (( @ columns / @ grid-columns ));
}
}
.make-lg-column-push (@ columns ) {
@media ( min-width : @ screen-lg-min ) {
left : percentage (( @ columns / @ grid-columns ));
}
}
.make-lg-column-pull (@ columns ) {
@media ( min-width : @ screen-lg-min ) {
right : percentage (( @ columns / @ grid-columns ));
}
}
ຕົວຢ່າງການນໍາໃຊ້
ທ່ານສາມາດດັດແປງຕົວແປໃຫ້ກັບຄ່າທີ່ກໍາຫນົດເອງຂອງທ່ານເອງ, ຫຼືພຽງແຕ່ໃຊ້ mixins ກັບຄ່າເລີ່ມຕົ້ນຂອງພວກມັນ. ນີ້ແມ່ນຕົວຢ່າງຂອງການໃຊ້ການຕັ້ງຄ່າເລີ່ມຕົ້ນເພື່ອສ້າງຮູບແບບສອງຖັນທີ່ມີຊ່ອງຫວ່າງລະຫວ່າງ.
ສຳເນົາ
.wrapper {
.make-row () ;
}
.content-main {
.make-lg-column ( 8 ) ;
}
.content-secondary {
.make-lg-column ( 3 ) ;
.make-lg-column-offset ( 1 ) ;
}
ສຳເນົາ
<div class= "wrapper" >
<div class= "content-main" > ...</div>
<div class= "content-secondary" > ...</div>
</div>
ຫົວຂໍ້
ຫົວຂໍ້ HTML ທັງຫມົດ, <h1>
ຜ່ານ <h6>
, ແມ່ນມີຢູ່. .h1
ໂດຍຜ່ານ .h6
ຫ້ອງຮຽນຍັງມີຢູ່, ສໍາລັບເວລາທີ່ທ່ານຕ້ອງການທີ່ຈະກົງກັບຮູບແບບຕົວອັກສອນຂອງຫົວຂໍ້ໃດຫນຶ່ງແຕ່ຍັງຕ້ອງການໃຫ້ຂໍ້ຄວາມຂອງທ່ານສະແດງຢູ່ໃນແຖວ.
h1. ຫົວຂໍ້ Bootstrap
ຂະຫນາດ 36px
h2. ຫົວຂໍ້ Bootstrap
ຂະຫນາດ 30px
h3. ຫົວຂໍ້ Bootstrap
ຂະຫນາດ 24px
h4. ຫົວຂໍ້ Bootstrap
Semiold 18px
h5. ຫົວຂໍ້ Bootstrap
Semiold 14px
h6. ຫົວຂໍ້ Bootstrap
Semiold 12px
ສຳເນົາ
<h1> h1. Bootstrap heading</h1>
<h2> h2. Bootstrap heading</h2>
<h3> h3. Bootstrap heading</h3>
<h4> h4. Bootstrap heading</h4>
<h5> h5. Bootstrap heading</h5>
<h6> h6. Bootstrap heading</h6>
ສ້າງຂໍ້ຄວາມທີສອງທີ່ອ່ອນກວ່າໃນຫົວຂໍ້ໃດໆທີ່ມີ <small>
ແທັກທົ່ວໄປຫຼື .small
ຊັ້ນ.
h1. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
h2. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
h3. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
h4. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
h5. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
h6. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ
ສຳເນົາ
<h1> h1. Bootstrap heading <small> Secondary text</small></h1>
<h2> h2. Bootstrap heading <small> Secondary text</small></h2>
<h3> h3. Bootstrap heading <small> Secondary text</small></h3>
<h4> h4. Bootstrap heading <small> Secondary text</small></h4>
<h5> h5. Bootstrap heading <small> Secondary text</small></h5>
<h6> h6. Bootstrap heading <small> Secondary text</small></h6>
ສຳເນົາຮ່າງກາຍ
ຄ່າເລີ່ມຕົ້ນທົ່ວໂລກ ຂອງ Bootstrap font-size
ແມ່ນ 14px , ມີ 1.428 . ນີ້ຖືກນໍາໃຊ້ກັບ ວັກແລະທຸກວັກ. ນອກຈາກນັ້ນ, (ວັກ) ໄດ້ຮັບຂອບລຸ່ມຂອງເຄິ່ງຫນຶ່ງຂອງເສັ້ນຄວາມສູງຂອງພວກມັນ (10px ຕາມຄ່າເລີ່ມຕົ້ນ).line-height
<body>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
ສຳເນົາ
<p> ...</p>
ສໍາເນົາຮ່າງກາຍນໍາ
ເຮັດໃຫ້ວັກໂດດເດັ່ນໂດຍການເພີ່ມ .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ມັນບໍ່ແມ່ນ commodo luctus.
ສຳເນົາ
<p class= "lead" > ...</p>
ສ້າງດ້ວຍຫນ້ອຍ
ຂະໜາດຕົວພິມແມ່ນອີງໃສ່ສອງຕົວແປ Less ໃນ variables.less : @font-size-base
ແລະ @line-height-base
. ອັນທໍາອິດແມ່ນຂະຫນາດຕົວອັກສອນພື້ນຖານທີ່ໃຊ້ຕະຫຼອດແລະທີສອງແມ່ນເສັ້ນພື້ນຖານ - ຄວາມສູງ. ພວກເຮົາໃຊ້ຕົວແປເຫຼົ່ານັ້ນ ແລະບາງເລກຄະນິດສາດທີ່ງ່າຍດາຍເພື່ອສ້າງຂອບ, paddings, ແລະ line-heights ຂອງທຸກປະເພດຂອງພວກເຮົາ ແລະອື່ນໆອີກ. ປັບແຕ່ງພວກມັນແລະ Bootstrap ປັບຕົວ.
ອົງປະກອບຂໍ້ຄວາມໃນແຖວ
ຂໍ້ຄວາມທີ່ໝາຍໄວ້
ສຳລັບການເນັ້ນໃສ່ຂໍ້ຄວາມເນື່ອງຈາກຄວາມກ່ຽວຂ້ອງຂອງມັນຢູ່ໃນສະພາບການອື່ນ, ໃຫ້ໃຊ້ <mark>
ແທັກ.
ທ່ານສາມາດນໍາໃຊ້ແທັກເຄື່ອງຫມາຍເພື່ອຈຸດເດັ່ນ ຂໍ້ຄວາມ.
ສຳເນົາ
You can use the mark tag to <mark> highlight</mark> text.
ລຶບຂໍ້ຄວາມແລ້ວ
ສໍາລັບການຊີ້ບອກ blocks ຂອງຂໍ້ຄວາມທີ່ໄດ້ຖືກລຶບໄປໃຊ້ <del>
ໂຄດຄໍາສັ່ງ.
ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນຂໍ້ຄວາມທີ່ຖືກລົບ.
ສຳເນົາ
<del> This line of text is meant to be treated as deleted text.</del>
ຂໍ້ຄວາມຕີຜ່ານ
ສໍາລັບການຊີ້ບອກບລັອກຂອງຂໍ້ຄວາມທີ່ບໍ່ກ່ຽວຂ້ອງ, ໃຊ້ <s>
ແທັກ.
ຂໍ້ຄວາມເສັ້ນນີ້ຖືກຖືວ່າເປັນສິ່ງທີ່ບໍ່ຖືກຕ້ອງອີກຕໍ່ໄປ.
ສຳເນົາ
<s> This line of text is meant to be treated as no longer accurate.</s>
ແຊກຂໍ້ຄວາມ
ສໍາລັບການຊີ້ບອກການເພີ່ມໃສ່ເອກະສານໃຊ້ <ins>
ແທັກ.
ແຖວຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະຖືກປະຕິບັດເປັນການເພີ່ມເຕີມຂອງເອກະສານ.
ສຳເນົາ
<ins> This line of text is meant to be treated as an addition to the document.</ins>
ຂີດກ້ອງຂໍ້ຄວາມ
ເພື່ອຂີດກ້ອງຂໍ້ຄວາມໃຫ້ໃຊ້ <u>
ແທັກ.
ແຖວຂອງຂໍ້ຄວາມນີ້ຈະສະແດງຕາມທີ່ຂຽນໄວ້
ສຳເນົາ
<u> This line of text will render as underlined</u>
ໃຊ້ແທໍກເນັ້ນໜັກເລີ່ມຕົ້ນຂອງ HTML ດ້ວຍຮູບແບບທີ່ມີນ້ຳໜັກເບົາ.
ຂໍ້ຄວາມຂະຫນາດນ້ອຍ
ສໍາລັບການຍົກເລີກການເນັ້ນຫນັກໃສ່ຂໍ້ຄວາມໃນແຖວຫຼືຕັນ, ໃຊ້ <small>
ແທັກເພື່ອກໍານົດຂໍ້ຄວາມຢູ່ທີ່ 85% ຂະຫນາດຂອງພໍ່ແມ່. ອົງປະກອບຫົວຂໍ້ໄດ້ຮັບຂອງຕົນເອງ font-size
ສໍາລັບອົງປະກອບທີ່ຊ້ອນກັນ <small>
.
ເຈົ້າອາດຈະໃຊ້ອົງປະກອບ inline .small
ແທນອັນໃດກໍ <small>
ໄດ້.
ເສັ້ນຂອງຂໍ້ຄວາມນີ້ແມ່ນຫມາຍເຖິງການພິມດີ.
ສຳເນົາ
<small> This line of text is meant to be treated as fine print.</small>
ກ້າຫານ
ສໍາລັບການເນັ້ນຫນັກໃສ່ຂໍ້ຄວາມສັ້ນໆທີ່ມີນ້ໍາຫນັກຕົວອັກສອນທີ່ຫນັກກວ່າ.
ຫຍໍ້ຂອງຂໍ້ຄວາມຕໍ່ໄປນີ້ຖືກສະ ແດງເປັນຕົວໜັງສືໜາ .
ສຳເນົາ
<strong> rendered as bold text</strong>
ໂຕອຽງ
ສໍາລັບການເນັ້ນຫຍໍ້ຫນ້າຂອງຂໍ້ຄວາມທີ່ມີຕົວອຽງ.
ຫຍໍ້ຂອງຂໍ້ຄວາມຕໍ່ໄປນີ້ຖືກສະ ແດງເປັນຂໍ້ຄວາມຕົວອຽງ .
ສຳເນົາ
<em> rendered as italicized text</em>
ອົງປະກອບສຳຮອງ
ຮູ້ສຶກວ່າບໍ່ເສຍຄ່າເພື່ອໃຊ້ <b>
ແລະ <i>
ໃນ HTML5. <b>
ແມ່ນຫມາຍເຖິງການເນັ້ນຄໍາສັບຫຼືປະໂຫຍກໂດຍບໍ່ມີການສະແດງຄວາມສໍາຄັນເພີ່ມເຕີມໃນຂະນະທີ່ <i>
ສ່ວນໃຫຍ່ແມ່ນສໍາລັບສຽງ, ຄໍາສັບດ້ານວິຊາການ, ແລະອື່ນໆ.
ຫ້ອງຮຽນຈັດຮຽງ
ການຈັດຮຽງຂໍ້ຄວາມຄືນໃໝ່ໄດ້ຢ່າງງ່າຍດາຍກັບອົງປະກອບດ້ວຍຫ້ອງຮຽນການຈັດຮຽງຂໍ້ຄວາມ.
ຂໍ້ຄວາມຈັດຮຽງຊ້າຍ.
ຂໍ້ຄວາມຈັດຮຽງກາງ.
ຂໍ້ຄວາມຈັດຮຽງຂວາ.
ຂໍ້ຄວາມທີ່ຖືກຕ້ອງ.
ບໍ່ມີຂໍ້ຄວາມຫໍ່.
ສຳເນົາ
<p class= "text-left" > Left aligned text.</p>
<p class= "text-center" > Center aligned text.</p>
<p class= "text-right" > Right aligned text.</p>
<p class= "text-justify" > Justified text.</p>
<p class= "text-nowrap" > No wrap text.</p>
ປ່ຽນຂໍ້ຄວາມໃນອົງປະກອບທີ່ມີຫ້ອງຮຽນຕົວພິມໃຫຍ່ຂອງຂໍ້ຄວາມ.
ໂຕພິມນ້ອຍ.
ໂຕພິມໃຫຍ່.
ໂຕພິມໃຫຍ່.
ສຳເນົາ
<p class= "text-lowercase" > Lowercased text.</p>
<p class= "text-uppercase" > Uppercased text.</p>
<p class= "text-capitalize" > Capitalized text.</p>
ຕົວຫຍໍ້
ການປະຕິບັດແບບສະໄຕລ໌ຂອງອົງປະກອບຂອງ HTML <abbr>
ສໍາລັບຕົວຫຍໍ້ແລະຕົວຫຍໍ້ເພື່ອສະແດງສະບັບທີ່ຂະຫຍາຍຢູ່ໃນ hover. ຕົວຫຍໍ້ທີ່ມີ title
ຄຸນລັກສະນະມີຂອບລຸ່ມຈຸດອ່ອນ ແລະຕົວກະພິບຊ່ວຍຢູ່ເທິງເຄື່ອງເລື່ອນ, ໃຫ້ບໍລິບົດເພີ່ມເຕີມກ່ຽວກັບການ hover ແລະໃຫ້ຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ.
ຕົວຫຍໍ້ພື້ນຖານ
ຕົວຫຍໍ້ຂອງຄຸນລັກສະນະຂອງຄໍາສັບແມ່ນ attr .
ສຳເນົາ
<abbr title= "attribute" > attr</abbr>
ລັດທິເລີ່ມຕົ້ນ
ຕື່ມ .initialism
ໃສ່ຕົວຫຍໍ້ສໍາລັບຂະຫນາດຕົວອັກສອນທີ່ນ້ອຍກວ່າເລັກນ້ອຍ.
HTML ແມ່ນສິ່ງທີ່ດີທີ່ສຸດນັບຕັ້ງແຕ່ເຂົ້າຈີ່.
ສຳເນົາ
<abbr title= "HyperText Markup Language" class= "initialism" > HTML</abbr>
ທີ່ຢູ່
ນໍາສະເຫນີຂໍ້ມູນຕິດຕໍ່ສໍາລັບບັນພະບຸລຸດທີ່ໃກ້ທີ່ສຸດຫຼືອົງການຈັດຕັ້ງທັງຫມົດຂອງການເຮັດວຽກ. ຮັກສາການຈັດຮູບແບບໂດຍການສິ້ນສຸດທຸກແຖວດ້ວຍ <br>
.
Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103 P: (123) 456-7890
ຊື່ເຕັມ [email protected]
ສຳເນົາ
<address>
<strong> Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title= "Phone" > P:</abbr> (123) 456-7890
</address>
<address>
<strong> Full Name</strong><br>
<a href= "mailto:#" > [email protected] </a>
</address>
Blockquotes
ສໍາລັບການອ້າງອີງຕັນຂອງເນື້ອຫາຈາກແຫຼ່ງອື່ນພາຍໃນເອກະສານຂອງທ່ານ.
ຂໍ້ຄວາມບລັອກເລີ່ມຕົ້ນ
ຫໍ່ ໃສ່ HTML <blockquote>
ໃດໆ ທີ່ເປັນຄໍາເວົ້າ. ສໍາລັບວົງຢືມກົງ, ພວກເຮົາແນະນໍາ a .<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ສຳເນົາ
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
ຕົວເລືອກ blockquote
ການປ່ຽນແປງຮູບແບບ ແລະເນື້ອຫາສຳລັບການປ່ຽນແປງແບບງ່າຍໆໃນມາດຕະຖານ <blockquote>
.
ການຕັ້ງຊື່ແຫຼ່ງ
ເພີ່ມ a <footer>
ສໍາລັບການກໍານົດແຫຼ່ງ. ຫໍ່ຊື່ຂອງແຫຼ່ງທີ່ເຮັດວຽກຢູ່ໃນ <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່
ແຫຼ່ງ
ສຳເນົາ
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> Someone famous in <cite title= "Source Title" > Source Title</cite></footer>
</blockquote>
ຈໍສະແດງຜົນສະຫຼັບ
ຕື່ມການ .blockquote-reverse
ສໍາລັບ blockquote ທີ່ມີເນື້ອໃນການຈັດຕໍາແຫນ່ງຂວາ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ບາງຄົນທີ່ມີຊື່ສຽງໃນຊື່
ແຫຼ່ງ
ສຳເນົາ
<blockquote class= "blockquote-reverse" >
...
</blockquote>
ລາຍການ
ບໍ່ມີຄໍາສັ່ງ
ບັນຊີລາຍຊື່ຂອງລາຍການທີ່ຄໍາສັ່ງບໍ່ ສໍາ ຄັນຢ່າງຊັດເຈນ.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ໃນ pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat ຢູ່
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
ສຳເນົາ
<ul>
<li> ...</li>
</ul>
ສັ່ງແລ້ວ
ບັນຊີລາຍຊື່ຂອງລາຍການທີ່ຄໍາສັ່ງ ບໍ່ ສໍາຄັນຢ່າງຊັດເຈນ.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ໃນ pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
ສຳເນົາ
<ol>
<li> ...</li>
</ol>
ບໍ່ມີຮູບແບບ
ເອົາຄ່າເລີ່ມຕົ້ນ list-style
ແລະຂອບຊ້າຍໃນລາຍການລາຍການ (ເດັກນ້ອຍທັນທີເທົ່ານັ້ນ). ອັນນີ້ໃຊ້ໄດ້ກັບລາຍການລາຍຊື່ເດັກນ້ອຍທັນທີ , ຊຶ່ງໝາຍຄວາມວ່າເຈົ້າຈະຕ້ອງເພີ່ມຊັ້ນຮຽນສຳລັບລາຍຊື່ທີ່ຕິດຢູ່ນຳ.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis ໃນ pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat ຢູ່
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
ສຳເນົາ
<ul class= "list-unstyled" >
<li> ...</li>
</ul>
ໃນແຖວ
ວາງລາຍການລາຍຊື່ທັງໝົດຢູ່ໃນແຖວດຽວ display: inline-block;
ແລະບາງແຜ່ນບາງໆ.
Lorem ipsum
Phasellus iaculis
Nulla volutpat
ສຳເນົາ
<ul class= "list-inline" >
<li> ...</li>
</ul>
ລາຍລະອຽດ
ບັນຊີລາຍຊື່ຂອງຂໍ້ກໍານົດທີ່ມີຄໍາອະທິບາຍທີ່ກ່ຽວຂ້ອງຂອງພວກເຂົາ.
ລາຍລະອຽດ
ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
ສຳເນົາ
<dl>
<dt> ...</dt>
<dd> ...</dd>
</dl>
ລາຍລະອຽດແນວນອນ
ເຮັດໃຫ້ຂໍ້ກໍານົດແລະຄໍາອະທິບາຍຢູ່ໃນ <dl>
ແຖວຂ້າງຄຽງ. ເລີ່ມຕົ້ນຈາກ stacked ເຊັ່ນ <dl>
s ເລີ່ມຕົ້ນ, ແຕ່ເມື່ອ navbar ຂະຫຍາຍ, ດັ່ງນັ້ນເຮັດສິ່ງເຫຼົ່ານີ້.
ລາຍລະອຽດ
ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
ສຳເນົາ
<dl class= "dl-horizontal" >
<dt> ...</dt>
<dd> ...</dd>
</dl>
ຕັດອັດຕະໂນມັດ
ລາຍການລາຍລະອຽດແນວນອນຈະຕັດຄໍາສັບທີ່ຍາວເກີນໄປທີ່ຈະເຫມາະໃນຖັນເບື້ອງຊ້າຍດ້ວຍ text-overflow
. ໃນ viewports ແຄບ, ພວກເຂົາຈະປ່ຽນເປັນຮູບແບບ stacked ເລີ່ມຕົ້ນ.
ໃນແຖວ
ຫໍ່ຕົວຫຍໍ້ຂອງລະຫັດໃນແຖວດ້ວຍ <code>
.
ຕົວຢ່າງ,
<section>
ຄວນຖືກຫໍ່ເປັນແຖວ.
ສຳເນົາ
For example, <code> < section> </code> should be wrapped as inline.
ໃຊ້ຕົວ <kbd>
ຊີ້ບອກການປ້ອນຂໍ້ມູນທີ່ຖືກປ້ອນຜ່ານແປ້ນພິມ.
ເພື່ອສະຫຼັບໄດເລກະທໍລີ, ພິມ
cd ຕາມດ້ວຍຊື່ຂອງໄດເລກະທໍລີ.
ເພື່ອແກ້ໄຂການຕັ້ງຄ່າ, ກົດ
ctrl + ,
ສຳເນົາ
To switch directories, type <kbd> cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd> ctrl</kbd> + <kbd> ,</kbd></kbd>
ຕັນພື້ນຖານ
ໃຊ້ <pre>
ສໍາລັບລະຫັດຫຼາຍເສັ້ນ. ໃຫ້ແນ່ໃຈວ່າຈະຫນີວົງເລັບມຸມໃດໆໃນລະຫັດສໍາລັບການສະແດງຜົນທີ່ເຫມາະສົມ.
<p>ຕົວຢ່າງຂໍ້ຄວາມທີ່ນີ້...</p>
ສຳເນົາ
<pre> < p> Sample text here...< /p> </pre>
ເຈົ້າສາມາດເລືອກເພີ່ມ .pre-scrollable
ຊັ້ນຮຽນໄດ້, ເຊິ່ງຈະຕັ້ງຄວາມສູງສູງສຸດຂອງ 350px ແລະໃຫ້ແຖບເລື່ອນແກນ y.
ຕົວແປ
ສໍາລັບການຊີ້ບອກຕົວແປໃຫ້ໃຊ້ <var>
ແທັກ.
ສຳເນົາ
<var> y</var> = <var> m</var><var> x</var> + <var> b</var>
ຜົນຜະລິດຕົວຢ່າງ
ສໍາລັບການຊີ້ບອກ blocks ຜົນຜະລິດຕົວຢ່າງຈາກໂຄງການການນໍາໃຊ້ <samp>
ໂຄດຄໍາສັ່ງ.
ຂໍ້ຄວາມນີ້ແມ່ນຫມາຍຄວາມວ່າຈະໄດ້ຮັບການປະຕິບັດເປັນຕົວຢ່າງຜົນຜະລິດຈາກໂຄງການຄອມພິວເຕີ.
ສຳເນົາ
<samp> This text is meant to be treated as sample output from a computer program.</samp>
ຕົວຢ່າງພື້ນຖານ
ສໍາລັບຄໍເຕົ້າໄຂ່ທີ່ພື້ນຖານ - padding ແສງສະຫວ່າງແລະພຽງແຕ່ແບ່ງອອກຕາມລວງນອນ - ເພີ່ມຊັ້ນພື້ນຖານ .table
ກັບໃດໆ <table>
. ມັນອາດຈະເບິ່ງຄືວ່າຊ້ໍາຊ້ອນ, ແຕ່ເນື່ອງຈາກການນໍາໃຊ້ຢ່າງກວ້າງຂວາງຂອງຕາຕະລາງສໍາລັບ plugins ອື່ນໆເຊັ່ນ: ປະຕິທິນແລະການເລືອກວັນທີ, ພວກເຮົາໄດ້ເລືອກທີ່ຈະແຍກຮູບແບບຕາຕະລາງທີ່ກໍາຫນົດເອງຂອງພວກເຮົາ.
ຄຳບັນຍາຍຕາຕະລາງທາງເລືອກ.
#
ຊື່ແທ້
ນາມສະກຸນ
ຊື່ຜູ້ໃຊ້
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
ລາຣີ
ນົກ
@twitter
ສຳເນົາ
<table class= "table" >
...
</table>
ແຖວເສັ້ນດ່າງ
ໃຊ້ .table-striped
ເພື່ອເພີ່ມເສັ້ນລາຍມ້າລາຍໃສ່ແຖວຕາຕະລາງໃດໆກໍຕາມພາຍໃນ <tbody>
.
ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ
ຕາຕະລາງທີ່ມີເສັ້ນດ່າງຖືກຈັດຮູບແບບຜ່ານ :nth-child
ຕົວເລືອກ CSS, ເຊິ່ງບໍ່ມີຢູ່ໃນ Internet Explorer 8.
#
ຊື່ແທ້
ນາມສະກຸນ
ຊື່ຜູ້ໃຊ້
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
ລາຣີ
ນົກ
@twitter
ສຳເນົາ
<table class= "table table-striped" >
...
</table>
ຕາຕະລາງທີ່ມີຊາຍແດນຕິດ
ເພີ່ມ .table-bordered
ສໍາລັບຂອບໃນທຸກດ້ານຂອງຕາຕະລາງແລະຕາລາງ.
#
ຊື່ແທ້
ນາມສະກຸນ
ຊື່ຜູ້ໃຊ້
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
ລາຣີ
ນົກ
@twitter
ສຳເນົາ
<table class= "table table-bordered" >
...
</table>
ເລື່ອນແຖວ
ເພີ່ມ .table-hover
ເພື່ອເປີດໃຊ້ສະຖານະ hover ໃນແຖວຕາຕະລາງພາຍໃນ <tbody>
.
#
ຊື່ແທ້
ນາມສະກຸນ
ຊື່ຜູ້ໃຊ້
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
ລາຣີ
ນົກ
@twitter
ສຳເນົາ
<table class= "table table-hover" >
...
</table>
ຕາຕະລາງ condensed
ເພີ່ມ .table-condensed
ເພື່ອເຮັດໃຫ້ຕາຕະລາງມີຄວາມຫນາແຫນ້ນຫຼາຍໂດຍການຕັດຊ່ອງຫວ່າງຂອງຈຸລັງເປັນເຄິ່ງຫນຶ່ງ.
#
ຊື່ແທ້
ນາມສະກຸນ
ຊື່ຜູ້ໃຊ້
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
<table class= "table table-condensed" >
...
</table>
ຫ້ອງຮຽນຕາມບໍລິບົດ
ໃຊ້ຫ້ອງຮຽນບໍລິບົດເພື່ອສີແຖວຕາຕະລາງຫຼືແຕ່ລະຕາລາງ.
ຫ້ອງຮຽນ
ລາຍລະອຽດ
.active
ນຳໃຊ້ສີເລື່ອນໃສ່ແຖວ ຫຼື ຕາລາງໃດໜຶ່ງ
.success
ຊີ້ໃຫ້ເຫັນເຖິງການປະຕິບັດທີ່ປະສົບຜົນສໍາເລັດຫຼືໃນທາງບວກ
.info
ຊີ້ບອກເຖິງການປ່ຽນແປງ ຫຼືການກະທຳທີ່ເປັນກາງ
.warning
ຊີ້ໃຫ້ເຫັນເຖິງການເຕືອນໄພທີ່ອາດຈະຕ້ອງການຄວາມສົນໃຈ
.danger
ຊີ້ບອກເຖິງການກະທຳທີ່ເປັນອັນຕະລາຍ ຫຼືອາດເປັນໄປໃນທາງລົບ
#
ຫົວຂໍ້ຖັນ
ຫົວຂໍ້ຖັນ
ຫົວຂໍ້ຖັນ
1
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
2
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
3
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
4
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
5
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
6
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
7
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
8
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
9
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ເນື້ອໃນຖັນ
ສຳເນົາ
<!-- On rows -->
<tr class= "active" > ...</tr>
<tr class= "success" > ...</tr>
<tr class= "warning" > ...</tr>
<tr class= "danger" > ...</tr>
<tr class= "info" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "active" > ...</td>
<td class= "success" > ...</td>
<td class= "warning" > ...</td>
<td class= "danger" > ...</td>
<td class= "info" > ...</td>
</tr>
ບົ່ງບອກຄວາມໝາຍກັບ��ທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ການໃຊ້ສີເພື່ອເພີ່ມຄວາມໝາຍໃສ່ແຖວຕາຕາລາງ ຫຼືແຕ່ລະເຊລໃຫ້ສະເພາະຕົວຊີ້ບອກພາບເທົ່ານັ້ນ, ເຊິ່ງຈະບໍ່ຖືກຖ່າຍທອດໃຫ້ຜູ້ໃຊ້ເທັກໂນໂລຍີຊ່ວຍເຫຼືອ – ເຊັ່ນເຄື່ອງອ່ານໜ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ຂໍ້ຄວາມທີ່ເຫັນໄດ້ໃນແຖວຕາຕະລາງທີ່ກ່ຽວຂ້ອງ), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-only
ຊັ້ນ.
ຕາຕະລາງຕອບສະຫນອງ
ສ້າງຕາຕະລາງທີ່ຕອບສະໜອງໂດຍການຫໍ່ອັນໃດ .table
ນຶ່ງ .table-responsive
ເພື່ອເຮັດໃຫ້ພວກມັນເລື່ອນຕາມແນວນອນໃນອຸປະກອນຂະໜາດນ້ອຍ (ຕ່ຳກວ່າ 768px). ເມື່ອເບິ່ງສິ່ງທີ່ໃຫຍ່ກວ່າ 768px ກວ້າງ, ທ່ານຈະບໍ່ເຫັນຄວາມແຕກຕ່າງໃດໆໃນຕາຕະລາງເຫຼົ່ານີ້.
ຕັດ/ຕັດແນວຕັ້ງ
ຕາຕະລາງການຕອບສະ ໜອງ ໃຊ້ overflow-y: hidden
, ເຊິ່ງປິດເນື້ອຫາໃດໆທີ່ເກີນຂອບລຸ່ມຫຼືເທິງຂອງຕາຕະລາງ. ໂດຍສະເພາະ, ນີ້ສາມາດ clip off ເມນູເລື່ອນລົງແລະ widget ພາກສ່ວນທີສາມອື່ນໆ.
Firefox ແລະ fieldsets
Firefox ມີຄໍເຕົ້າໄຂ່ທີ່ຊຸດຂໍ້ມູນທີ່ງຸ່ມງ່າມບາງຢ່າງທີ່ກ່ຽວຂ້ອງກັບ width
ການແຊກແຊງກັບຕາຕະລາງທີ່ຕອບສະຫນອງ. ນີ້ບໍ່ສາມາດຖືກລົບລ້າງໄດ້ໂດຍບໍ່ມີການ hack ສະເພາະ Firefox ທີ່ພວກເຮົາ ບໍ່ໄດ້ ສະຫນອງໃນ Bootstrap:
ສຳເນົາ
@-moz-document url-prefix () {
fieldset { display : table-cell ; }
}
ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ, ອ່ານ ຄໍາຕອບ Stack Overflow ນີ້ .
#
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
1
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
2
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
3
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
#
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
ຫົວຂໍ້ຕາຕະລາງ
1
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
2
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
3
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ຕາລາງ
ສຳເນົາ
<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>
ການຄວບຄຸມແບບຟອມສ່ວນບຸກຄົນຈະໄດ້ຮັບຮູບແບບທົ່ວໂລກບາງຢ່າງໂດຍອັດຕະໂນມັດ. ຂໍ້ຄວາມ <input>
, <textarea>
, ແລະ <select>
ອົງປະກອບທັງໝົດທີ່ມີ .form-control
ແມ່ນຕັ້ງເປັນ width: 100%;
ຄ່າເລີ່ມຕົ້ນ. ຫໍ່ປ້າຍກຳກັບ ແລະການຄວບຄຸມໃສ່ .form-group
ເພື່ອໃຫ້ໄລຍະຫ່າງທີ່ເໝາະສົມ.
ສຳເນົາ
<form>
<div class= "form-group" >
<label for= "exampleInputEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleInputEmail1" placeholder= "Email" >
</div>
<div class= "form-group" >
<label for= "exampleInputPassword1" > Password</label>
<input type= "password" class= "form-control" id= "exampleInputPassword1" placeholder= "Password" >
</div>
<div class= "form-group" >
<label for= "exampleInputFile" > File input</label>
<input type= "file" id= "exampleInputFile" >
<p class= "help-block" > Example block-level help text here.</p>
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Check me out
</label>
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
ຕື່ມ .form-inline
ໃສ່ແບບຟອມຂອງທ່ານ (ທີ່ບໍ່ຈໍາເປັນຕ້ອງເປັນ a <form>
) ສໍາລັບການຄວບຄຸມທາງຊ້າຍແລະ inline-block. ອັນນີ້ໃຊ້ກັບແບບຟອມພາຍໃນຊ່ອງເບິ່ງທີ່ມີຄວາມກວ້າງຢ່າງໜ້ອຍ 768px ເທົ່ານັ້ນ.
ສຳເນົາ
<form class= "form-inline" >
<div class= "form-group" >
<label for= "exampleInputName2" > Name</label>
<input type= "text" class= "form-control" id= "exampleInputName2" placeholder= "Jane Doe" >
</div>
<div class= "form-group" >
<label for= "exampleInputEmail2" > Email</label>
<input type= "email" class= "form-control" id= "exampleInputEmail2" placeholder= "[email protected] " >
</div>
<button type= "submit" class= "btn btn-default" > Send invitation</button>
</form>
ສຳເນົາ
<form class= "form-inline" >
<div class= "form-group" >
<label class= "sr-only" for= "exampleInputEmail3" > Email address</label>
<input type= "email" class= "form-control" id= "exampleInputEmail3" placeholder= "Email" >
</div>
<div class= "form-group" >
<label class= "sr-only" for= "exampleInputPassword3" > Password</label>
<input type= "password" class= "form-control" id= "exampleInputPassword3" placeholder= "Password" >
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Remember me
</label>
</div>
<button type= "submit" class= "btn btn-default" > Sign in</button>
</form>
ສຳເນົາ
<form class= "form-inline" >
<div class= "form-group" >
<label class= "sr-only" for= "exampleInputAmount" > Amount (in dollars)</label>
<div class= "input-group" >
<div class= "input-group-addon" > $</div>
<input type= "text" class= "form-control" id= "exampleInputAmount" placeholder= "Amount" >
<div class= "input-group-addon" > .00</div>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Transfer cash</button>
</form>
ໃຊ້ຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າຂອງ Bootstrap ເພື່ອຈັດວາງປ້າຍກຳກັບ ແລະກຸ່ມຂອງການຄວບຄຸມແບບຟອມໃນຮູບແບບແນວນອນໂດຍການເພີ່ມ .form-horizontal
ໃສ່ແບບຟອມ (ເຊິ່ງບໍ່ຈຳເປັນຕ້ອງເປັນ <form>
). ການເຮັດແນວນັ້ນປ່ຽນ .form-group
s ໃຫ້ປະຕິບັດຕົວເປັນແຖວຕາຂ່າຍໄຟຟ້າ, ສະນັ້ນບໍ່ຈໍາເປັນຕ້ອງມີ .row
.
ສຳເນົາ
<form class= "form-horizontal" >
<div class= "form-group" >
<label for= "inputEmail3" class= "col-sm-2 control-label" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control" id= "inputEmail3" placeholder= "Email" >
</div>
</div>
<div class= "form-group" >
<label for= "inputPassword3" class= "col-sm-2 control-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword3" placeholder= "Password" >
</div>
</div>
<div class= "form-group" >
<div class= "col-sm-offset-2 col-sm-10" >
<div class= "checkbox" >
<label>
<input type= "checkbox" > Remember me
</label>
</div>
</div>
</div>
<div class= "form-group" >
<div class= "col-sm-offset-2 col-sm-10" >
<button type= "submit" class= "btn btn-default" > Sign in</button>
</div>
</div>
</form>
ຕົວຢ່າງຂອງການຄວບຄຸມແບບຟອມມາດຕະຖານທີ່ສະຫນັບສະຫນູນໃນຮູບແບບແບບຟອມຕົວຢ່າງ.
ການຄວບຄຸມແບບຟອມທົ່ວໄປທີ່ສຸດ, ຊ່ອງຂໍ້ມູນໃສ່ຂໍ້ຄວາມ. ລວມມີການຮອງຮັບ HTML5 ທັງໝົດ: text
, password
, datetime
, , datetime-local
, date
, month
, time
, , week
, number
, email
, , url
, search
, tel
, ແລະ color
.
ສຳເນົາ
<input type= "text" class= "form-control" placeholder= "Text input" >
Textarea
ການຄວບຄຸມແບບຟອມທີ່ຮອງຮັບຂໍ້ຄວາມຫຼາຍແຖວ. ປ່ຽນ rows
ຄຸນສົມບັດຕາມຄວາມຈໍາເປັນ.
ສຳເນົາ
<textarea class= "form-control" rows= "3" ></textarea>
ກ່ອງກວດ ແລະວິທະຍຸ
checkboxes ແມ່ນສໍາລັບການເລືອກຫນຶ່ງຫຼືຫຼາຍທາງເລືອກໃນບັນຊີລາຍຊື່, ໃນຂະນະທີ່ວິທະຍຸແມ່ນສໍາລັບການເລືອກທາງເລືອກຫນຶ່ງຈາກຈໍານວນຫຼາຍ.
ກ່ອງໝາຍຕິກ ແລະວິທະຍຸທີ່ຖືກປິດການນຳໃຊ້ແມ່ນຮອງຮັບ, ແຕ່ເພື່ອໃຫ້ຕົວກະພິບ "ບໍ່ອະນຸຍາດ" ຢູ່ເທິງຕົວຊີ້ເທິງຂອງພໍ່ແມ່ <label>
, ເຈົ້າຈະຕ້ອງເພີ່ມ .disabled
ຊັ້ນເຂົ້າໃສ່ເຄື່ອງແມ່ .radio
, .radio-inline
, .checkbox
, ຫຼື .checkbox-inline
.
ຄ່າເລີ່ມຕົ້ນ (ວາງຊ້ອນກັນ)
ສຳເນົາ
<div class= "checkbox" >
<label>
<input type= "checkbox" value= "" >
Option one is this and that— be sure to include why it's great
</label>
</div>
<div class= "checkbox disabled" >
<label>
<input type= "checkbox" value= "" disabled >
Option two is disabled
</label>
</div>
<div class= "radio" >
<label>
<input type= "radio" name= "optionsRadios" id= "optionsRadios1" value= "option1" checked >
Option one is this and that— be sure to include why it's great
</label>
</div>
<div class= "radio" >
<label>
<input type= "radio" name= "optionsRadios" id= "optionsRadios2" value= "option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class= "radio disabled" >
<label>
<input type= "radio" name= "optionsRadios" id= "optionsRadios3" value= "option3" disabled >
Option three is disabled
</label>
</div>
ກ່ອງໝາຍໃນແຖວ ແລະວິທະຍຸ
ໃຊ້ .checkbox-inline
ຫຼື .radio-inline
ຫ້ອງຮຽນຢູ່ໃນຊຸດຂອງ checkboxes ຫຼືວິທະຍຸສໍາລັບການຄວບຄຸມທີ່ປາກົດຢູ່ໃນແຖວດຽວກັນ.
1
2
3
1
2
3
ສຳເນົາ
<label class= "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox1" value= "option1" > 1
</label>
<label class= "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox2" value= "option2" > 2
</label>
<label class= "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox3" value= "option3" > 3
</label>
<label class= "radio-inline" >
<input type= "radio" name= "inlineRadioOptions" id= "inlineRadio1" value= "option1" > 1
</label>
<label class= "radio-inline" >
<input type= "radio" name= "inlineRadioOptions" id= "inlineRadio2" value= "option2" > 2
</label>
<label class= "radio-inline" >
<input type= "radio" name= "inlineRadioOptions" id= "inlineRadio3" value= "option3" > 3
</label>
ກ່ອງໝາຍ ແລະວິທະຍຸທີ່ບໍ່ມີຂໍ້ຄວາມປ້າຍກຳກັບ
ຖ້າທ່ານບໍ່ມີຂໍ້ຄວາມພາຍໃນ <label>
, ການປ້ອນຂໍ້ມູນຖືກຈັດໃສ່ຕາມທີ່ເຈົ້າຄາດຫວັງ. ໃນປັດຈຸບັນເຮັດວຽກພຽງແຕ່ຢູ່ໃນກ່ອງກາເຄື່ອງຫມາຍທີ່ບໍ່ແມ່ນຢູ່ໃນແຖວແລະວິທະຍຸ. ຈື່ໄວ້ວ່າຍັງໃຫ້ບາງຮູບແບບຂອງປ້າຍກຳກັບສຳລັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ (ຕົວຢ່າງເຊັ່ນການໃຊ້ aria-label
).
ສຳເນົາ
<div class= "checkbox" >
<label>
<input type= "checkbox" id= "blankCheckbox" value= "option1" aria-label= "..." >
</label>
</div>
<div class= "radio" >
<label>
<input type= "radio" name= "blankRadio" id= "blankRadio1" value= "option1" aria-label= "..." >
</label>
</div>
ເລືອກ
ກະລຸນາຮັບຊາບວ່າຫຼາຍເມນູທີ່ເລືອກແບບພື້ນເມືອງ—ຄືໃນ Safari ແລະ Chrome—ມີມຸມມົນທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້ຜ່ານ border-radius
ຄຸນສົມບັດ.
1 2 3 4 5
ສຳເນົາ
<select class= "form-control" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
ສໍາລັບ <select>
ການຄວບຄຸມທີ່ມີ multiple
ຄຸນລັກສະນະ, ຫຼາຍທາງເລືອກແມ່ນສະແດງໂດຍຄ່າເລີ່ມຕົ້ນ.
1 2 3 4 5
ສຳເນົາ
<select multiple class= "form-control" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
ເມື່ອທ່ານຕ້ອງການວາງຂໍ້ຄວາມທໍາມະດາໃສ່ປ້າຍແບບຟອມພາຍໃນແບບຟອມ, ໃຫ້ໃຊ້ .form-control-static
ຊັ້ນໃນ <p>
.
ສຳເນົາ
<form class= "form-horizontal" >
<div class= "form-group" >
<label class= "col-sm-2 control-label" > Email</label>
<div class= "col-sm-10" >
<p class= "form-control-static" > [email protected] </p>
</div>
</div>
<div class= "form-group" >
<label for= "inputPassword" class= "col-sm-2 control-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword" placeholder= "Password" >
</div>
</div>
</form>
ສຳເນົາ
<form class= "form-inline" >
<div class= "form-group" >
<label class= "sr-only" > Email</label>
<p class= "form-control-static" > [email protected] </p>
</div>
<div class= "form-group" >
<label for= "inputPassword2" class= "sr-only" > Password</label>
<input type= "password" class= "form-control" id= "inputPassword2" placeholder= "Password" >
</div>
<button type= "submit" class= "btn btn-default" > Confirm identity</button>
</form>
ພວກເຮົາເອົາ outline
ຮູບແບບມາດຕະຖານໃນການຄວບຄຸມບາງຮູບແບບອອກແລະນໍາໃຊ້ box-shadow
ສະຖານທີ່ຂອງມັນສໍາລັບ :focus
.
:focus
ສະຖານະ ຕົວຢ່າງ
ການປ້ອນຂໍ້ມູນຕົວຢ່າງຂ້າງເທິງໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ກຳນົດເອງໃນເອກະສານຂອງພວກເຮົາເພື່ອສະແດງສະ :focus
ຖານະໃນ .form-control
.
ເພີ່ມ disabled
ຄຸນສົມບັດ boolean ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການໂຕ້ຕອບຂອງຜູ້ໃຊ້. ວັດສະດຸປ້ອນເຂົ້າທີ່ຖືກປິດການນຳໃຊ້ຈະອ່ອນລົງ ແລະເພີ່ມ not-allowed
ຕົວກະພິບ.
ສຳເນົາ
<input class= "form-control" id= "disabledInput" type= "text" placeholder= "Disabled input here..." disabled >
ເພີ່ມ disabled
ຄຸນສົມບັດໃສ່ a <fieldset>
ເພື່ອປິດການຄວບຄຸມທັງໝົດພາຍໃນໃນ <fieldset>
ເວລາດຽວກັນ.
Caveat ກ່ຽວກັບການທໍາງານຂອງການເຊື່ອມຕໍ່ຂອງ<a>
ໂດຍຄ່າເລີ່ມຕົ້ນ, ຕົວທ່ອງເວັບຈະປະຕິບັດການຄວບຄຸມຮູບແບບພື້ນເມືອງທັງຫມົດ ( <input>
, <select>
ແລະ <button>
ອົງປະກອບ) ພາຍໃນ <fieldset disabled>
ປິດການໃຊ້ງານ, ປ້ອງກັນການໂຕ້ຕອບຂອງແປ້ນພິມແລະຫນູກັບພວກມັນ. ຢ່າງໃດກໍຕາມ, ຖ້າແບບຟອມຂອງທ່ານປະກອບມີ <a ... class="btn btn-*">
ອົງປະກອບ, ເຫຼົ່ານີ້ພຽງແຕ່ຈະໄດ້ຮັບຮູບແບບ pointer-events: none
. ດັ່ງທີ່ບັນທຶກໄວ້ໃນພາກກ່ຽວກັບ ສະຖານະປິດການໃຊ້ງານສໍາລັບປຸ່ມ (ແລະໂດຍສະເພາະໃນພາກຍ່ອຍສໍາລັບອົງປະກອບສະມໍ), ຄຸນສົມບັດ CSS ນີ້ຍັງບໍ່ທັນໄດ້ມາດຕະຖານແລະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມທີ່ໃນ Opera 18 ແລະຂ້າງລຸ່ມນີ້, ຫຼືໃນ Internet Explorer 11, ແລະໄດ້ຮັບໄຊຊະນະ. 'ຫ້າມບໍ່ໃຫ້ຜູ້ໃຊ້ແປ້ນພິມສາມາດສຸມໃສ່ຫຼືກະຕຸ້ນການເຊື່ອມຕໍ່ເຫຼົ່ານີ້. ດັ່ງນັ້ນເພື່ອໃຫ້ປອດໄພ, ໃຊ້ JavaScript ແບບກໍານົດເອງເພື່ອປິດການເຊື່ອມຕໍ່ດັ່ງກ່າວ.
ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ
ໃນຂະນະທີ່ Bootstrap ຈະນໍາໃຊ້ຮູບແບບເຫຼົ່ານີ້ໃນທຸກຕົວທ່ອງເວັບ, Internet Explorer 11 ແລະຂ້າງລຸ່ມນີ້ບໍ່ໄດ້ສະຫນັບສະຫນູນຢ່າງເຕັມທີ່ disabled
ຄຸນລັກສະນະໃນ <fieldset>
. ໃຊ້ JavaScript ແບບກຳນົດເອງເພື່ອປິດການນຳໃຊ້ຊ່ອງຂໍ້ມູນໃນໂປຣແກຣມທ່ອງເວັບເຫຼົ່ານີ້.
ສຳເນົາ
<form>
<fieldset disabled >
<div class= "form-group" >
<label for= "disabledTextInput" > Disabled input</label>
<input type= "text" id= "disabledTextInput" class= "form-control" placeholder= "Disabled input" >
</div>
<div class= "form-group" >
<label for= "disabledSelect" > Disabled select menu</label>
<select id= "disabledSelect" class= "form-control" >
<option> Disabled select</option>
</select>
</div>
<div class= "checkbox" >
<label>
<input type= "checkbox" > Can't check this
</label>
</div>
<button type= "submit" class= "btn btn-primary" > Submit</button>
</fieldset>
</form>
ເພີ່ມ readonly
ຄຸນສົມບັດ boolean ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການດັດແກ້ຄ່າຂອງວັດສະດຸປ້ອນ. ການປ້ອນຂໍ້ມູນແບບອ່ານຢ່າງດຽວປະກົດວ່າອ່ອນກວ່າ (ຄືກັນກັບວັດສະດຸປ້ອນທີ່ຖືກປິດໃຊ້ງານ), ແຕ່ຮັກສາຕົວກະພິບມາດຕະຖານໄວ້.
ສຳເນົາ
<input class= "form-control" type= "text" placeholder= "Readonly input here…" readonly >
ຂໍ້ຄວາມຊ່ວຍເຫຼືອ
ບລັອກຂໍ້ຄວາມລະດັບການຊ່ວຍເຫຼືອສໍາລັບການຄວບຄຸມແບບຟອມ.
ການເຊື່ອມໂຍງຂໍ້ຄວາມຊ່ວຍເຫຼືອກັບການຄວບຄຸມແບບຟອມ
ຂໍ້ຄວາມຊ່ວຍເຫຼືອຄວນມີຄວາມກ່ຽວຂ້ອງຢ່າງຊັດເຈນກັບການຄວບຄຸມແບບຟອມທີ່ມັນກ່ຽວຂ້ອງກັບການໃຊ້ aria-describedby
ຄຸນສົມບັດ. ນີ້ຈະຮັບປະກັນວ່າເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ຈະປະກາດຂໍ້ຄວາມການຊ່ວຍເຫຼືອນີ້ເມື່ອຜູ້ໃຊ້ສຸມໃສ່ຫຼືເຂົ້າໄປໃນການຄວບຄຸມ.
ສຳເນົາ
<label for= "inputHelpBlock" > Input with help text</label>
<input type= "text" id= "inputHelpBlock" class= "form-control" aria-describedby= "helpBlock" >
...
<span id= "helpBlock" class= "help-block" > A block of help text that breaks onto a new line and may extend beyond one line.</span>
Bootstrap ປະກອບມີຮູບແບບການກວດສອບສໍາລັບຄວາມຜິດພາດ, ການເຕືອນໄພ, ແລະສະຖານະຄວາມສໍາເລັດໃນການຄວບຄຸມແບບຟອມ. ເພື່ອໃຊ້, ເພີ່ມ .has-warning
, .has-error
, ຫຼື .has-success
ອົງປະກອບຫຼັກ. ໃດໆ .control-label
, .form-control
, ແລະ .help-block
ພາຍໃນອົງປະກອບນັ້ນຈະໄດ້ຮັບຮູບແບບການກວດສອບ.
ສຳເນົາ
<div class= "form-group has-success" >
<label class= "control-label" for= "inputSuccess1" > Input with success</label>
<input type= "text" class= "form-control" id= "inputSuccess1" aria-describedby= "helpBlock2" >
<span id= "helpBlock2" class= "help-block" > A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class= "form-group has-warning" >
<label class= "control-label" for= "inputWarning1" > Input with warning</label>
<input type= "text" class= "form-control" id= "inputWarning1" >
</div>
<div class= "form-group has-error" >
<label class= "control-label" for= "inputError1" > Input with error</label>
<input type= "text" class= "form-control" id= "inputError1" >
</div>
<div class= "has-success" >
<div class= "checkbox" >
<label>
<input type= "checkbox" id= "checkboxSuccess" value= "option1" >
Checkbox with success
</label>
</div>
</div>
<div class= "has-warning" >
<div class= "checkbox" >
<label>
<input type= "checkbox" id= "checkboxWarning" value= "option1" >
Checkbox with warning
</label>
</div>
</div>
<div class= "has-error" >
<div class= "checkbox" >
<label>
<input type= "checkbox" id= "checkboxError" value= "option1" >
Checkbox with error
</label>
</div>
</div>
ມີໄອຄອນທາງເລືອກ
ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມໄອຄອນຄໍາຄິດເຫັນທາງເລືອກທີ່ມີການເພີ່ມ .has-feedback
ແລະໄອຄອນທີ່ຖືກຕ້ອງ.
ໄອຄອນການຕິຊົມໃຊ້ໄດ້ກັບ <input class="form-control">
ອົງປະກອບຂໍ້ຄວາມເທົ່ານັ້ນ.
ໄອຄອນ, ປ້າຍກຳກັບ ແລະກຸ່ມການປ້ອນຂໍ້ມູນ
ການຈັດຕໍາແຫນ່ງຄູ່ມືຂອງໄອຄອນຄໍາຄິດເຫັນແມ່ນຈໍາເປັນສໍາລັບການປ້ອນຂໍ້ມູນທີ່ບໍ່ມີປ້າຍຊື່ແລະສໍາລັບ ກຸ່ມການປ້ອນຂໍ້ມູນທີ່ ມີສ່ວນເສີມຢູ່ເບື້ອງຂວາ. ທ່ານໄດ້ຮັບການຊຸກຍູ້ຢ່າງແຂງແຮງໃນການສະຫນອງປ້າຍກໍາກັບສໍາລັບການປ້ອນຂໍ້ມູນທັງຫມົດສໍາລັບເຫດຜົນການເຂົ້າເຖິງ. ຖ້າທ່ານຕ້ອງການປ້ອງກັນປ້າຍຊື່ຈາກການສະແດງ, ເຊື່ອງພວກມັນດ້ວຍ .sr-only
ຊັ້ນຮຽນ. ຖ້າທ່ານຕ້ອງເຮັດໂດຍບໍ່ມີປ້າຍຊື່, ໃຫ້ປັບ top
ຄ່າຂອງໄອຄອນຄໍາຄິດເຫັນ. ສໍາລັບກຸ່ມການປ້ອນຂໍ້ມູນ, ປັບ right
ຄ່າເປັນຄ່າ pixels ລວງທີ່ເຫມາະສົມໂດຍອີງຕາມຄວາມກວ້າງຂອງ addon ຂອງທ່ານ.
ການບົ່ງບອກຄວາມໝາຍຂອງໄອຄອນຕໍ່ກັບເຕັກໂນໂລຊີຊ່ວຍເຫຼືອ
ເພື່ອຮັບປະກັນວ່າເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ບົ່ງບອກຄວາມຫມາຍຂອງໄອຄອນຢ່າງຖືກຕ້ອງ, ຂໍ້ຄວາມທີ່ເຊື່ອງໄວ້ເພີ່ມເຕີມຄວນຈະຖືກລວມເຂົ້າກັບ .sr-only
ຊັ້ນຮຽນແລະກ່ຽວຂ້ອງຢ່າງຊັດເຈນກັບການຄວບຄຸມແບບຟອມທີ່ກ່ຽວຂ້ອງກັບການນໍາໃຊ້ aria-describedby
. ອີກທາງເລືອກ, ໃຫ້ແນ່ໃຈວ່າຄວາມຫມາຍ (ຕົວຢ່າງ, ຄວາມຈິງທີ່ວ່າມີການເຕືອນໄພສໍາລັບຊ່ອງໃສ່ຂໍ້ຄວາມສະເພາະ) ຖືກຖ່າຍທອດໃນຮູບແບບອື່ນໆ, ເຊັ່ນ: ການປ່ຽນແປງຂໍ້ຄວາມຂອງຕົວຈິງທີ່ <label>
ກ່ຽວຂ້ອງກັບການຄວບຄຸມແບບຟອມ.
ເຖິງແມ່ນວ່າຕົວຢ່າງຕໍ່ໄປນີ້ໄດ້ກ່າວເຖິງສະຖານະການທີ່ຖືກຕ້ອງຂອງການຄວບຄຸມແບບຟອມຂອງພວກເຂົາໃນຕົວ <label>
ຫນັງສືຂອງມັນເອງ, ເຕັກນິກຂ້າງເທິງ (ການນໍາໃຊ້ .sr-only
ຂໍ້ຄວາມແລະ aria-describedby
) ໄດ້ຖືກລວມເຂົ້າເພື່ອຈຸດປະສົງຕົວຢ່າງ.
ສຳເນົາ
<div class= "form-group has-success has-feedback" >
<label class= "control-label" for= "inputSuccess2" > Input with success</label>
<input type= "text" class= "form-control" id= "inputSuccess2" aria-describedby= "inputSuccess2Status" >
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputSuccess2Status" class= "sr-only" > (success)</span>
</div>
<div class= "form-group has-warning has-feedback" >
<label class= "control-label" for= "inputWarning2" > Input with warning</label>
<input type= "text" class= "form-control" id= "inputWarning2" aria-describedby= "inputWarning2Status" >
<span class= "glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputWarning2Status" class= "sr-only" > (warning)</span>
</div>
<div class= "form-group has-error has-feedback" >
<label class= "control-label" for= "inputError2" > Input with error</label>
<input type= "text" class= "form-control" id= "inputError2" aria-describedby= "inputError2Status" >
<span class= "glyphicon glyphicon-remove form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputError2Status" class= "sr-only" > (error)</span>
</div>
<div class= "form-group has-success has-feedback" >
<label class= "control-label" for= "inputGroupSuccess1" > Input group with success</label>
<div class= "input-group" >
<span class= "input-group-addon" > @</span>
<input type= "text" class= "form-control" id= "inputGroupSuccess1" aria-describedby= "inputGroupSuccess1Status" >
</div>
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputGroupSuccess1Status" class= "sr-only" > (success)</span>
</div>
ໄອຄອນທາງເລືອກໃນຮູບແບບແນວນອນແລະໃນແຖວ
ສຳເນົາ
<form class= "form-horizontal" >
<div class= "form-group has-success has-feedback" >
<label class= "control-label col-sm-3" for= "inputSuccess3" > Input with success</label>
<div class= "col-sm-9" >
<input type= "text" class= "form-control" id= "inputSuccess3" aria-describedby= "inputSuccess3Status" >
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputSuccess3Status" class= "sr-only" > (success)</span>
</div>
</div>
<div class= "form-group has-success has-feedback" >
<label class= "control-label col-sm-3" for= "inputGroupSuccess2" > Input group with success</label>
<div class= "col-sm-9" >
<div class= "input-group" >
<span class= "input-group-addon" > @</span>
<input type= "text" class= "form-control" id= "inputGroupSuccess2" aria-describedby= "inputGroupSuccess2Status" >
</div>
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputGroupSuccess2Status" class= "sr-only" > (success)</span>
</div>
</div>
</form>
ສຳເນົາ
<form class= "form-inline" >
<div class= "form-group has-success has-feedback" >
<label class= "control-label" for= "inputSuccess4" > Input with success</label>
<input type= "text" class= "form-control" id= "inputSuccess4" aria-describedby= "inputSuccess4Status" >
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputSuccess4Status" class= "sr-only" > (success)</span>
</div>
</form>
<form class= "form-inline" >
<div class= "form-group has-success has-feedback" >
<label class= "control-label" for= "inputGroupSuccess3" > Input group with success</label>
<div class= "input-group" >
<span class= "input-group-addon" > @</span>
<input type= "text" class= "form-control" id= "inputGroupSuccess3" aria-describedby= "inputGroupSuccess3Status" >
</div>
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputGroupSuccess3Status" class= "sr-only" > (success)</span>
</div>
</form>
.sr-only
ໄອຄອນທາງເລືອກທີ່ມີ ປ້າຍຊື່ ທີ່ເຊື່ອງໄວ້
ຖ້າທ່ານໃຊ້ .sr-only
ຫ້ອງຮຽນເພື່ອຊ່ອນຕົວຄວບຄຸມແບບຟອມ <label>
(ແທນທີ່ຈະໃຊ້ຕົວເລືອກການຕິດສະຫຼາກອື່ນໆ, ເຊັ່ນ: aria-label
ຄຸນລັກສະນະ), Bootstrap ຈະປັບຕໍາແຫນ່ງຂອງໄອຄອນໂດຍອັດຕະໂນມັດເມື່ອມັນຖືກເພີ່ມ.
ສຳເນົາ
<div class= "form-group has-success has-feedback" >
<label class= "control-label sr-only" for= "inputSuccess5" > Hidden label</label>
<input type= "text" class= "form-control" id= "inputSuccess5" aria-describedby= "inputSuccess5Status" >
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputSuccess5Status" class= "sr-only" > (success)</span>
</div>
<div class= "form-group has-success has-feedback" >
<label class= "control-label sr-only" for= "inputGroupSuccess4" > Input group with success</label>
<div class= "input-group" >
<span class= "input-group-addon" > @</span>
<input type= "text" class= "form-control" id= "inputGroupSuccess4" aria-describedby= "inputGroupSuccess4Status" >
</div>
<span class= "glyphicon glyphicon-ok form-control-feedback" aria-hidden= "true" ></span>
<span id= "inputGroupSuccess4Status" class= "sr-only" > (success)</span>
</div>
ກໍານົດຄວາມສູງໂດຍໃຊ້ຊັ້ນຮຽນເຊັ່ນ .input-lg
, ແລະກໍານົດຄວາມກວ້າງໂດຍໃຊ້ຊັ້ນແຖວຕາຕະລາງເຊັ່ນ .col-lg-*
.
ຂະໜາດຄວາມສູງ
ສ້າງຕົວຄວບຄຸມແບບຟອມທີ່ສູງກວ່າ ຫຼືສັ້ນກວ່າທີ່ກົງກັບຂະໜາດປຸ່ມ.
ສຳເນົາ
<input class= "form-control input-lg" type= "text" placeholder= ".input-lg" >
<input class= "form-control" type= "text" placeholder= "Default input" >
<input class= "form-control input-sm" type= "text" placeholder= ".input-sm" >
<select class= "form-control input-lg" > ...</select>
<select class= "form-control" > ...</select>
<select class= "form-control input-sm" > ...</select>
ຂະໜາດກຸ່ມແບບຟອມແນວນອນ
ປ້າຍຂະໜາດຢ່າງວ່ອງໄວ ແລະການຄວບຄຸມແບບຟອມພາຍໃນ .form-horizontal
ໂດຍການເພີ່ມ .form-group-lg
ຫຼື .form-group-sm
.
ສຳເນົາ
<form class= "form-horizontal" >
<div class= "form-group form-group-lg" >
<label class= "col-sm-2 control-label" for= "formGroupInputLarge" > Large label</label>
<div class= "col-sm-10" >
<input class= "form-control" type= "text" id= "formGroupInputLarge" placeholder= "Large input" >
</div>
</div>
<div class= "form-group form-group-sm" >
<label class= "col-sm-2 control-label" for= "formGroupInputSmall" > Small label</label>
<div class= "col-sm-10" >
<input class= "form-control" type= "text" id= "formGroupInputSmall" placeholder= "Small input" >
</div>
</div>
</form>
ຂະໜາດຖັນ
ຫໍ່ວັດສະດຸປ້ອນຢູ່ໃນຖັນຕາຂ່າຍໄຟຟ້າ, ຫຼືອົງປະກອບຫຼັກທີ່ກໍານົດເອງ, ເພື່ອບັງຄັບໃຊ້ຄວາມກວ້າງທີ່ຕ້ອງການໄດ້ຢ່າງງ່າຍດາຍ.
ສຳເນົາ
<div class= "row" >
<div class= "col-xs-2" >
<input type= "text" class= "form-control" placeholder= ".col-xs-2" >
</div>
<div class= "col-xs-3" >
<input type= "text" class= "form-control" placeholder= ".col-xs-3" >
</div>
<div class= "col-xs-4" >
<input type= "text" class= "form-control" placeholder= ".col-xs-4" >
</div>
</div>
ໃຊ້ຫ້ອງຮຽນປຸ່ມໃນ <a>
, <button>
, ຫຼື <input>
ອົງປະກອບ.
ເຊື່ອມຕໍ່
ປຸ່ມ
ສຳເນົາ
<a class= "btn btn-default" href= "#" role= "button" > Link</a>
<button class= "btn btn-default" type= "submit" > Button</button>
<input class= "btn btn-default" type= "button" value= "Input" >
<input class= "btn btn-default" type= "submit" value= "Submit" >
ການນຳໃຊ້ສະເພາະບໍລິບົດ
ໃນຂະນະທີ່ຫ້ອງຮຽນປຸ່ມສາມາດຖືກນໍາໃຊ້ໃນ <a>
ແລະ <button>
ອົງປະກອບ, ພຽງແຕ່ <button>
ອົງປະກອບທີ່ໄດ້ຮັບການສະຫນັບສະຫນູນພາຍໃນອົງປະກອບ nav ແລະ navbar ຂອງພວກເຮົາ.
ໃຊ້ຫ້ອງຮຽນປຸ່ມໃດນຶ່ງທີ່ມີຢູ່ເພື່ອສ້າງປຸ່ມສະໄຕລ໌ຢ່າງວ່ອງໄວ.
ຄ່າເລີ່ມຕົ້ນ
ປະຖົມ
ຄວາມສໍາເລັດ
ຂໍ້ມູນ
ຄຳເຕືອນ
ອັນຕະລາຍ
ເຊື່ອມຕໍ່
ສຳເນົາ
<!-- Standard button -->
<button type= "button" class= "btn btn-default" > Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type= "button" class= "btn btn-primary" > Primary</button>
<!-- Indicates a successful or positive action -->
<button type= "button" class= "btn btn-success" > Success</button>
<!-- Contextual button for informational alert messages -->
<button type= "button" class= "btn btn-info" > Info</button>
<!-- Indicates caution should be taken with this action -->
<button type= "button" class= "btn btn-warning" > Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type= "button" class= "btn btn-danger" > Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type= "button" class= "btn btn-link" > Link</button>
ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ເພີ່ມ .btn-lg
, .btn-sm
, ຫຼື .btn-xs
ສໍາລັບຂະຫນາດເພີ່ມເຕີມ.
ປຸ່ມໃຫຍ່ ປຸ່ມໃຫຍ່
ປຸ່ມເລີ່ມຕົ້ນ ປຸ່ມເລີ່ມຕົ້ນ
ປຸ່ມນ້ອຍໆ ປຸ່ມນ້ອຍໆ
ປຸ່ມຂະຫນາດນ້ອຍພິເສດ ປຸ່ມຂະຫນາດນ້ອຍພິເສດ
ສຳເນົາ
<p>
<button type= "button" class= "btn btn-primary btn-lg" > Large button</button>
<button type= "button" class= "btn btn-default btn-lg" > Large button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary" > Default button</button>
<button type= "button" class= "btn btn-default" > Default button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary btn-sm" > Small button</button>
<button type= "button" class= "btn btn-default btn-sm" > Small button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary btn-xs" > Extra small button</button>
<button type= "button" class= "btn btn-default btn-xs" > Extra small button</button>
</p>
ສ້າງປຸ່ມລະດັບບລັອກ—ເຊິ່ງຂະຫຍາຍຄວາມກວ້າງເຕັມຂອງພໍ່ແມ່—ໂດຍການເພີ່ມ .btn-block
.
ກົດປຸ່ມລະດັບ
ກົດປຸ່ມລະດັບ
ສຳເນົາ
<button type= "button" class= "btn btn-primary btn-lg btn-block" > Block level button</button>
<button type= "button" class= "btn btn-default btn-lg btn-block" > Block level button</button>
ປຸ່ມຕ່າງໆຈະປາກົດຖືກກົດ (ມີພື້ນຫຼັງສີເຂັ້ມກວ່າ, ຂອບສີເຂັ້ມກວ່າ, ແລະເງົາໃສ່) ເມື່ອເປີດໃຊ້ງານ. ສໍາລັບ <button>
ອົງປະກອບ, ນີ້ແມ່ນເຮັດຜ່ານ :active
. ສໍາລັບ <a>
ອົງປະກອບ, ມັນເຮັດດ້ວຍ .active
. ຢ່າງໃດກໍຕາມ, ທ່ານອາດຈະໃຊ້ .active
ໃນ <button>
s (ແລະປະກອບມີ aria-pressed="true"
ຄຸນລັກສະນະ) ຖ້າທ່ານຈໍາເປັນຕ້ອງເຮັດຊ້ໍາສະຖານະການທີ່ໃຊ້ວຽກເປັນໂປຼແກຼມ.
ບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ :active
ເພາະວ່າມັນເປັນ pseudo-class, ແຕ່ຖ້າຫາກວ່າທ່ານຈໍາເປັນຕ້ອງບັງຄັບຮູບລັກສະນະດຽວກັນ, ສືບຕໍ່ເດີນຫນ້າແລະການເພີ່ມ .active
.
ປຸ່ມຫຼັກ ປຸ່ມ
ສຳເນົາ
<button type= "button" class= "btn btn-primary btn-lg active" > Primary button</button>
<button type= "button" class= "btn btn-default btn-lg active" > Button</button>
ອົງປະກອບສະມໍ
ເພີ່ມ .active
ຫ້ອງຮຽນໃສ່ <a>
ປຸ່ມຕ່າງໆ.
ລິ້ງຫຼັກ ເຊື່ອມຕໍ່
ສຳເນົາ
<a href= "#" class= "btn btn-primary btn-lg active" role= "button" > Primary link</a>
<a href= "#" class= "btn btn-default btn-lg active" role= "button" > Link</a>
ເຮັດໃຫ້ປຸ່ມເບິ່ງບໍ່ສາມາດຄລິກໄດ້ໂດຍການລົບໃຫ້ເຂົາເຈົ້າກັບຄືນໄປບ່ອນກັບ opacity
.
ເພີ່ມ disabled
ຄຸນສົມບັດໃສ່ <button>
ປຸ່ມຕ່າງໆ.
ປຸ່ມຫຼັກ ປຸ່ມ
ສຳເນົາ
<button type= "button" class= "btn btn-lg btn-primary" disabled= "disabled" > Primary button</button>
<button type= "button" class= "btn btn-default btn-lg" disabled= "disabled" > Button</button>
ອົງປະກອບສະມໍ
ເພີ່ມ .disabled
ຫ້ອງຮຽນໃສ່ <a>
ປຸ່ມຕ່າງໆ.
ລິ້ງຫຼັກ ເຊື່ອມຕໍ່
ສຳເນົາ
<a href= "#" class= "btn btn-primary btn-lg disabled" role= "button" > Primary link</a>
<a href= "#" class= "btn btn-default btn-lg disabled" role= "button" > Link</a>
ພວກເຮົາໃຊ້ .disabled
ເປັນຫ້ອງຮຽນທີ່ເປັນປະໂຫຍດຢູ່ທີ່ນີ້, ຄ້າຍຄືກັນກັບ .active
ຫ້ອງຮຽນທົ່ວໄປ, ດັ່ງນັ້ນບໍ່ຈໍາເປັນຕ້ອງມີຄໍານໍາຫນ້າ.
ຮູບພາບທີ່ຕອບສະຫນອງ
ຮູບພາບຕ່າງໆໃນ Bootstrap 3 ສາມາດຖືກເຮັດໃຫ້ຕອບສະຫນອງໄດ້ໂດຍການເພີ່ມ .img-responsive
ຊັ້ນຮຽນ. ນີ້ໃຊ້ max-width: 100%;
, height: auto;
ແລະ display: block;
ຮູບພາບເພື່ອໃຫ້ມັນປັບຂະຫນາດໄດ້ດີກັບອົງປະກອບຫຼັກ.
ເພື່ອຈັດວາງຮູບພາບທີ່ໃຊ້ .img-responsive
ຊັ້ນ, ໃຫ້ໃຊ້ .center-block
ແທນ .text-center
. ເບິ່ງພາກວິຊາຜູ້ຊ່ວຍ ສຳລັບລາຍລະອຽດເພີ່ມເຕີມກ່ຽວກັບ .center-block
ການນຳໃຊ້.
ຮູບພາບ SVG ແລະ IE 8-10
ໃນ Internet Explorer 8-10, ຮູບພາບ SVG ທີ່ມີ .img-responsive
ຂະໜາດບໍ່ສົມສ່ວນ. ເພື່ອແກ້ໄຂນີ້, ເພີ່ມ width: 100% \9;
ບ່ອນທີ່ຈໍາເປັນ. Bootstrap ບໍ່ໄດ້ໃຊ້ມັນອັດຕະໂນມັດຍ້ອນວ່າມັນເຮັດໃຫ້ເກີດຄວາມສັບສົນກັບຮູບແບບຮູບພາບອື່ນໆ.
ສຳເນົາ
<img src= "..." class= "img-responsive" alt= "Responsive image" >
ຮູບຮ່າງຮູບພາບ
ເພີ່ມຫ້ອງຮຽນໃສ່ <img>
ອົງປະກອບເພື່ອຈັດຮູບແບບຮູບພາບໄດ້ຢ່າງງ່າຍດາຍໃນໂຄງການໃດນຶ່ງ.
ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ
ຈົ່ງຈື່ໄວ້ວ່າ Internet Explorer 8 ຂາດການສະຫນັບສະຫນູນສໍາລັບມຸມມົນ.
ສຳເນົາ
<img src= "..." alt= "..." class= "img-rounded" >
<img src= "..." alt= "..." class= "img-circle" >
<img src= "..." alt= "..." class= "img-thumbnail" >
ສີຕາມບໍລິບົດ
ບົ່ງບອກຄວາມໝາຍຜ່ານສີດ້ວຍມືຂອງຫ້ອງຮຽນປະໂຫຍດທີ່ເນັ້ນໃສ່. ສິ່ງເຫຼົ່ານີ້ອາດຈະຖືກນຳໃຊ້ກັບລິ້ງຄ໌ ແລະຈະມືດລົງໃນບ່ອນເລື່ອນ ຄືກັນກັບຮູບແບບລິ້ງເລີ່ມຕົ້ນຂອງພວກເຮົາ.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
ສຳເນົາ
<p class= "text-muted" > ...</p>
<p class= "text-primary" > ...</p>
<p class= "text-success" > ...</p>
<p class= "text-info" > ...</p>
<p class= "text-warning" > ...</p>
<p class= "text-danger" > ...</p>
ການຈັດການກັບສະເພາະ
ບາງຄັ້ງຫ້ອງຮຽນເນັ້ນໜັກບໍ່ສາມາດນຳໃຊ້ໄດ້ ເນື່ອງຈາກຄວາມສະເພາະຂອງຕົວເລືອກອື່ນ. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ການແກ້ໄຂທີ່ພຽງພໍແມ່ນການຫໍ່ຂໍ້ຄວາມຂອງທ່ານໃນ <span>
ຫ້ອງຮຽນ.
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ສີຂອງບໍລິບົດແມ່ນໃຊ້ພຽງແຕ່ເພື່ອເສີມຄວາມຄວາມຫມາຍທີ່ມີຢູ່ໃນຂໍ້ຄວາມ / ເຄື່ອງໝາຍ), ຫຼືຖືກລວມເຂົ້າໂດຍຜ່ານວິທີທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-only
ຊັ້ນ . .
ຄວາມເປັນມາຂອງບໍລິບົດ
ຄ້າຍຄືກັນກັບຊັ້ນສີຂອງຂໍ້ຄວາມຕາມບໍລິບົດ, ຕັ້ງຄ່າພື້ນຫຼັງຂອງອົງປະກອບໃດໜຶ່ງໃຫ້ກັບຫ້ອງຮຽນບໍລິບົດໄດ້ຢ່າງງ່າຍດາຍ. ອົງປະກອບ Anchor ຈະເຮັດຊ້ໍາເມື່ອ hover, ຄືກັນກັບຫ້ອງຮຽນຂໍ້ຄວາມ.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
ສຳເນົາ
<p class= "bg-primary" > ...</p>
<p class= "bg-success" > ...</p>
<p class= "bg-info" > ...</p>
<p class= "bg-warning" > ...</p>
<p class= "bg-danger" > ...</p>
ການຈັດການກັບສະເພາະ
ບາງຄັ້ງຫ້ອງຮຽນພື້ນຫຼັງຂອງບໍລິບົດບໍ່ສາມາດຖືກນຳໃຊ້ໄດ້ເນື່ອງຈາກຄວາມສະເພາະຂອງຕົວເລືອກອື່ນ. ໃນບາງກໍລະນີ, ການແກ້ໄຂທີ່ພຽງພໍແມ່ນເພື່ອຫໍ່ເນື້ອໃນຂອງອົງປະກອບຂອງທ່ານຢູ່ໃນ <div>
ຫ້ອງຮຽນ.
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ເຊັ່ນດຽວກັບ ສີ ຕາມບໍລິບົດ, ຮັບປະກັນວ່າຄວາມໝາຍໃດໆກໍຕາມທີ່ຖ່າຍທອດຜ່ານສີແມ່ນຍັງຖືກຖ່າຍທອດໃນຮູບແບບທີ່ບໍ່ແມ່ນການນຳສະເໜີຢ່າງບໍລິສຸດ.
ປິດໄອຄອນ
ໃຊ້ໄອຄອນປິດທົ່ວໄປສໍາລັບການປິດເນື້ອຫາເຊັ່ນ: modals ແລະການແຈ້ງເຕືອນ.
ສຳເນົາ
<button type= "button" class= "close" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
ການດູແລ
ໃຊ້ carets ເພື່ອຊີ້ບອກເຖິງຫນ້າທີ່ເລື່ອນລົງແລະທິດທາງ. ໃຫ້ສັງເກດວ່າ cart ເລີ່ມຕົ້ນຈະ reverse ອັດຕະໂນມັດໃນ ເມນູເລື່ອນ ລົງ .
ສຳເນົາ
<span class= "caret" ></span>
ລອຍໄວ
ເລື່ອນອົງປະກອບໄປທາງຊ້າຍ ຫຼືຂວາດ້ວຍຊັ້ນຮຽນ. !important
ຖືກລວມເຂົ້າເພື່ອຫຼີກເວັ້ນບັນຫາສະເພາະ. ຫ້ອງຮຽນຍັງສາມາດຖືກນໍາໃຊ້ເປັນ mixins.
ສຳເນົາ
<div class= "pull-left" > ...</div>
<div class= "pull-right" > ...</div>
ສຳເນົາ
// Classes
.pull-left {
float : left ! important ;
}
.pull-right {
float : right ! important ;
}
// Usage as mixins
.element {
.pull-left () ;
}
.another-element {
.pull-right () ;
}
ບໍ່ແມ່ນສໍາລັບການນໍາໃຊ້ໃນ navbars
ເພື່ອຈັດຮຽງອົງປະກອບໃນ navbars ກັບຫ້ອງຮຽນຜົນປະໂຫຍດ, ໃຊ້ .navbar-left
ຫຼື .navbar-right
ແທນ. ເບິ່ງເອກະສານ navbar ສໍາລັບລາຍລະອຽດ.
ຕັນເນື້ອໃນສູນກາງ
ກໍານົດອົງປະກອບເປັນ display: block
ແລະສູນກາງຜ່ານ margin
. ສາມາດໃຊ້ໄດ້ເປັນ mixin ແລະຫ້ອງຮຽນ.
ສຳເນົາ
<div class= "center-block" > ...</div>
ສຳເນົາ
// Class
.center-block {
display : block ;
margin-left : auto ;
margin-right : auto ;
}
// Usage as a mixin
.element {
.center-block () ;
}
ແກ້ໄຂ
float
ລຶບລ້າງ s ໄດ້ ຢ່າງງ່າຍດາຍ ໂດຍການເພີ່ມ .clearfix
ໃສ່ອົງປະກອບຫຼັກ . ໃຊ້ການລຶບ ລ້າງຈຸນລະພາກ ເປັນທີ່ນິຍົມໂດຍ Nicolas Gallagher. ຍັງສາມາດຖືກນໍາໃຊ້ເປັນ mixin ໄດ້.
ສຳເນົາ
<!-- Usage as a class -->
<div class= "clearfix" > ...</div>
ສຳເນົາ
// Mixin itself
.clearfix () {
& :before ,
& :after {
content : " " ;
display : table ;
}
& :after {
clear : both ;
}
}
// Usage as a mixin
.element {
.clearfix () ;
}
ສະແດງ ແລະເຊື່ອງເນື້ອຫາ
ບັງຄັບໃຫ້ອົງປະກອບໃດໜຶ່ງຖືກສະແດງ ຫຼືຖືກເຊື່ອງໄວ້ ( ລວມທັງສຳລັບຕົວອ່ານໜ້າຈໍ ) ດ້ວຍການໃຊ້ .show
ແລະ .hidden
ຫ້ອງຮຽນ. ຫ້ອງຮຽນເຫຼົ່ານີ້ໃຊ້ !important
ເພື່ອຫຼີກເວັ້ນການຂັດແຍ້ງສະເພາະ, ຄືກັນກັບ ການເລື່ອນໄວ . ພວກມັນມີພຽງແຕ່ສໍາລັບການປິດລະດັບຕັນ. ພວກເຂົາເຈົ້າຍັງສາມາດຖືກນໍາໃຊ້ເປັນ mixins.
.hide
ສາມາດໃຊ້ໄດ້, ແຕ່ມັນບໍ່ໄດ້ມີຜົນຕໍ່ຕົວອ່ານໜ້າຈໍສະເໝີໄປ ແລະຖືກ ຍົກ ເລີກ ເປັນ v3.0.1. ໃຊ້ .hidden
ຫຼື .sr-only
ແທນ.
ຍິ່ງໄປກວ່ານັ້ນ, .invisible
ສາມາດໃຊ້ເພື່ອສະຫຼັບພຽງແຕ່ການເບິ່ງເຫັນຂອງອົງປະກອບ, ຊຶ່ງຫມາຍຄວາມວ່າມັນ display
ບໍ່ໄດ້ຖືກດັດແກ້ແລະອົງປະກອບຍັງສາມາດສົ່ງຜົນກະທົບຕໍ່ການໄຫຼເຂົ້າຂອງເອກະສານ.
ສຳເນົາ
<div class= "show" > ...</div>
<div class= "hidden" > ...</div>
ສຳເນົາ
// Classes
.show {
display : block ! important ;
}
.hidden {
display : none ! important ;
}
.invisible {
visibility : hidden ;
}
// Usage as mixins
.element {
.show () ;
}
.another-element {
.hidden () ;
}
ຕົວອ່ານໜ້າຈໍ ແລະເນື້ອຫາການນຳທາງແປ້ນພິມ
ເຊື່ອງອົງປະກອບໃສ່ອຸປະກອນທັງໝົດ ຍົກເວັ້ນຕົວອ່ານໜ້າຈໍ ທີ່ມີ .sr-only
. ສົມທົບ .sr-only
ກັບ .sr-only-focusable
ເພື່ອສະແດງອົງປະກອບອີກເທື່ອຫນຶ່ງເມື່ອມັນສຸມໃສ່ (ເຊັ່ນ: ໂດຍຜູ້ໃຊ້ແປ້ນພິມເທົ່ານັ້ນ). ມີຄວາມຈໍາເປັນສໍາລັບ ການປະຕິບັດຕາມການປະຕິບັດທີ່ດີທີ່ສຸດກ່ຽວກັບການເຂົ້າເຖິງ . ຍັງສາມາດຖືກນໍາໃຊ້ເປັນ mixins.
ສຳເນົາ
<a class= "sr-only sr-only-focusable" href= "#content" > Skip to main content</a>
ສຳເນົາ
// Usage as a mixin
.skip-navigation {
.sr-only () ;
.sr-only-focusable () ;
}
ການທົດແທນຮູບພາບ
ໃຊ້ .text-hide
class ຫຼື mixin ເພື່ອຊ່ວຍແທນທີ່ເນື້ອຫາຂໍ້ຄວາມຂອງອົງປະກອບທີ່ມີຮູບພາບພື້ນຫລັງ.
ສຳເນົາ
<h1 class= "text-hide" > Custom heading</h1>
ສຳເນົາ
// Usage as a mixin
.heading {
.text-hide () ;
}
ສໍາລັບການພັດທະນາທີ່ເປັນມິດກັບມືຖືໄດ້ໄວຂຶ້ນ, ໃຫ້ໃຊ້ຫ້ອງຮຽນປະໂຫຍດເຫຼົ່ານີ້ເພື່ອສະແດງ ແລະເຊື່ອງເນື້ອຫາໂດຍອຸປະກອນຜ່ານທາງສື່. ລວມໄປເຖິງແມ່ນຫ້ອງຮຽນທີ່ເປັນປະໂຫຍດສໍາລັບການສະຫຼັບເນື້ອໃນໃນເວລາທີ່ພິມ.
ພະຍາຍາມໃຊ້ເຫຼົ່ານີ້ບົນພື້ນຖານທີ່ຈໍາກັດແລະຫຼີກເວັ້ນການສ້າງສະບັບທີ່ແຕກຕ່າງກັນທັງຫມົດຂອງເວັບໄຊທ໌ດຽວກັນ. ແທນທີ່ຈະ, ໃຊ້ພວກມັນເພື່ອເສີມການນໍາສະເຫນີຂອງແຕ່ລະອຸປະກອນ.
ຫ້ອງຮຽນທີ່ມີຢູ່
ໃຊ້ແບບດ່ຽວ ຫຼືປະສົມປະສານຂອງຊັ້ນຮຽນທີ່ມີຢູ່ສໍາລັບການສະຫຼັບເນື້ອຫາໃນທົ່ວຈຸດເບຣກພອດ.
ອຸປະກອນຂະຫນາດນ້ອຍພິເສດໂທລະສັບ (<768px)
ອຸປະກອນຂະຫນາດນ້ອຍແທັບເລັດ (≥768px)
ອຸປະກອນຂະຫນາດກາງເດັສທັອບ (≥992px)
ອຸປະກອນຂະຫນາດໃຫຍ່ເດັສທັອບ (≥1200px)
.visible-xs-*
ເຫັນໄດ້
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
.visible-sm-*
ເຊື່ອງໄວ້
ເຫັນໄດ້
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
.visible-md-*
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
ເຫັນໄດ້
ເຊື່ອງໄວ້
.visible-lg-*
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
ເຊື່ອງໄວ້
ເຫັນໄດ້
.hidden-xs
ເຊື່ອງໄວ້
ເຫັນໄດ້
ເຫັນໄດ້
ເຫັນໄດ້
.hidden-sm
ເຫັນໄດ້
ເຊື່ອງໄວ້
ເຫັນໄດ້
ເຫັນໄດ້
.hidden-md
ເຫັນໄດ້
ເຫັນໄດ້
ເຊື່ອງໄວ້
ເຫັນໄດ້
.hidden-lg
ເຫັນໄດ້
ເຫັນໄດ້
ເຫັນໄດ້
ເຊື່ອງໄວ້
ໃນຖານະເປັນ v3.2.0, .visible-*-*
ຫ້ອງຮຽນສໍາລັບແຕ່ລະ breakpoint ມາໃນສາມຕົວແປ, ຫນຶ່ງສໍາລັບແຕ່ລະ CSS display
ມູນຄ່າຊັບສິນທີ່ລະບຸໄວ້ຂ້າງລຸ່ມນີ້.
ກຸ່ມຂອງຫ້ອງຮຽນ
CSSdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
ດັ່ງນັ້ນ, ສໍາ xs
ລັບຕົວຢ່າງ, ສໍາລັບຫນ້າຈໍ ຂະຫນາດນ້ອຍພິເສດ, .visible-*-*
ຫ້ອງຮຽນທີ່ມີຢູ່ແມ່ນ: .visible-xs-block
, .visible-xs-inline
, ແລະ .visible-xs-inline-block
.
ຫ້ອງຮຽນ .visible-xs
, .visible-sm
, .visible-md
, ແລະ .visible-lg
ຍັງມີຢູ່, ແຕ່ຖືກ ປະຕິເສດເປັນ v3.2.0 . ພວກມັນແມ່ນປະມານເທົ່າກັບ .visible-*-block
, ຍົກເວັ້ນກໍລະນີພິເສດເພີ່ມເຕີມສໍາລັບ <table>
ອົງປະກອບທີ່ກ່ຽວຂ້ອງກັບການສະຫຼັບ.
ຫ້ອງຮຽນພິມ
ຄ້າຍຄືກັນກັບຫ້ອງຮຽນຕອບສະຫນອງປົກກະຕິ, ໃຊ້ສິ່ງເຫຼົ່ານີ້ເພື່ອສະຫຼັບເນື້ອຫາສໍາລັບການພິມ.
ຫ້ອງຮຽນ
ຕົວທ່ອງເວັບ
ພິມ
.visible-print-block
.visible-print-inline
.visible-print-inline-block
ເຊື່ອງໄວ້
ເຫັນໄດ້
.hidden-print
ເຫັນໄດ້
ເຊື່ອງໄວ້
ຊັ້ນຮຽນ .visible-print
ຍັງມີຢູ່ແຕ່ຖືກ ຍົກ ເລີກ ເປັນ v3.2.0. ມັນແມ່ນປະມານເທົ່າກັບ .visible-print-block
, ຍົກເວັ້ນກໍລະນີພິເສດເພີ່ມເຕີມສໍາລັບ <table>
ອົງປະກອບທີ່ກ່ຽວຂ້ອງ.
ກໍລະນີທົດສອບ
ປັບຂະໜາດບຣາວເຊີຂອງທ່ານ ຫຼື ໂຫຼດໃນອຸປະກອນຕ່າງໆເພື່ອທົດສອບຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ຕອບສະໜອງໄດ້.
ເຫັນໄດ້ໃນ...
ເຄື່ອງໝາຍຖືກ ສີຂຽວຊີ້ບອກອົງປະກອບ ທີ່ເຫັນໄດ້ ໃນຊ່ອງເບິ່ງປັດຈຸບັນຂອງທ່ານ.
ຂະຫນາດນ້ອຍພິເສດ
✔ສາມາດເຫັນໄດ້ໃນ x-small
ຂະຫນາດນ້ອຍ
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດນ້ອຍ
ຂະຫນາດກາງ
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດກາງ
ຂະຫນາດໃຫຍ່
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດໃຫຍ່
ພິເສດຂະຫນາດນ້ອຍແລະຂະຫນາດນ້ອຍ
✔ສາມາດເຫັນໄດ້ໃນ x- ນ້ອຍແລະຂະຫນາດນ້ອຍ
ຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່
ພິເສດຂະໜາດນ້ອຍ ແລະ ກາງ
✔ສາມາດເຫັນໄດ້ໃນ x-ນ້ອຍ ແລະຂະຫນາດກາງ
ຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
ພິເສດຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
✔ສາມາດເຫັນໄດ້ໃນ x-ນ້ອຍ ແລະ ໃຫຍ່
ຂະຫນາດນ້ອຍແລະຂະຫນາດກາງ
✔ສາມາດເຫັນໄດ້ໃນຂະຫນາດນ້ອຍແລະຂະຫນາດກາງ
ເຊື່ອງຢູ່...
ທີ່ນີ້, ເຄື່ອງໝາຍຖືກສີຂຽວຍັງຊີ້ບອກວ່າອົງປະກອບ ຖືກເຊື່ອງໄວ້ ຢູ່ໃນຊ່ອງເບິ່ງປັດຈຸບັນຂອງທ່ານ.
ຂະຫນາດນ້ອຍພິເສດ
✔ເຊື່ອງໄວ້ໃນ x-small
ຂະຫນາດນ້ອຍ
✔ເຊື່ອງໄວ້ໃນຂະຫນາດນ້ອຍ
ຂະຫນາດກາງ
✔ເຊື່ອງໄວ້ໃນຂະຫນາດກາງ
ຂະຫນາດໃຫຍ່
✔ເຊື່ອງໄວ້ໃນຂະຫນາດໃຫຍ່
ພິເສດຂະຫນາດນ້ອຍແລະຂະຫນາດນ້ອຍ
✔ເຊື່ອງໄວ້ໃນ x ຂະຫນາດນ້ອຍແລະຂະຫນາດນ້ອຍ
ຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່
✔ເຊື່ອງໄວ້ໃນຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່
ພິເສດຂະໜາດນ້ອຍ ແລະ ກາງ
✔ເຊື່ອງໄວ້ໃນ x-ຂະຫນາດນ້ອຍແລະຂະຫນາດກາງ
ຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
✔ເຊື່ອງໄວ້ໃນຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
ພິເສດຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
✔ເຊື່ອງໄວ້ໃນ x ຂະຫນາດນ້ອຍແລະຂະຫນາດໃຫຍ່
ຂະຫນາດນ້ອຍແລະຂະຫນາດກາງ
✔ເຊື່ອງໄວ້ໃນຂະຫນາດນ້ອຍແລະຂະຫນາດກາງ
CSS ຂອງ Bootstrap ຖືກສ້າງຂຶ້ນໃນ Less, preprocessor ທີ່ມີຫນ້າທີ່ເພີ່ມເຕີມເຊັ່ນຕົວແປ, mixins, ແລະຫນ້າທີ່ສໍາລັບການລວບລວມ CSS. ຜູ້ທີ່ຊອກຫາການນໍາໃຊ້ແຫຼ່ງໄຟລ໌ຫນ້ອຍແທນທີ່ຈະເປັນໄຟລ໌ CSS ທີ່ລວບລວມຂອງພວກເຮົາສາມາດເຮັດໃຫ້ການນໍາໃຊ້ຕົວແປຈໍານວນຫລາຍແລະ mixins ທີ່ພວກເຮົາໃຊ້ໃນທົ່ວກອບ.
ຕົວແປຂອງ Grid ແລະ mixins ແມ່ນກວມເອົາ ພາຍໃນພາກລະບົບ Grid .
ການລວບລວມ Bootstrap
Bootstrap ສາມາດໄດ້ຮັບການນໍາໃຊ້ຢ່າງຫນ້ອຍສອງວິທີການ: ມີ CSS ລວບລວມຫຼືມີແຫຼ່ງໄຟລ໌ຫນ້ອຍ. ເພື່ອລວບລວມໄຟລ໌ຫນ້ອຍ, ໃຫ້ປຶກສາພາກສ່ວນເລີ່ມຕົ້ນ ສໍາລັບວິທີການຕັ້ງຄ່າສະພາບແວດລ້ອມການພັດທະນາຂອງທ່ານເພື່ອດໍາເນີນການຄໍາສັ່ງທີ່ຈໍາເປັນ.
ເຄື່ອງມືການລວບລວມພາກສ່ວນທີສາມອາດຈະເຮັດວຽກກັບ Bootstrap, ແຕ່ພວກເຂົາບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຈາກທີມງານຫຼັກຂອງພວກເຮົາ.
ຕົວແປ
ຕົວແປໄດ້ຖືກນໍາໃຊ້ໃນທົ່ວໂຄງການທັງຫມົດເປັນວິທີການສູນກາງແລະແບ່ງປັນຄ່າທີ່ໃຊ້ທົ່ວໄປເຊັ່ນ: ສີ, ໄລຍະຫ່າງ, ຫຼື stacks ຕົວອັກສອນ. ສໍາລັບລາຍລະອຽດຄົບຖ້ວນ, ກະລຸນາເບິ່ງ Customizer .
ສີ
ໄດ້ຢ່າງງ່າຍດາຍເຮັດໃຫ້ການນໍາໃຊ້ຂອງສອງສີ: ສີຂີ້ເຖົ່າແລະ semantic. ສີແກມສີຂີ້ເຖົ່າໃຫ້ການເຂົ້າເຖິງສີດຳທີ່ໃຊ້ທົ່ວໄປໄດ້ໄວ ໃນຂະນະທີ່ຄວາມໝາຍລວມເຖິງສີຕ່າງໆທີ່ຖືກມອບໝາຍໃຫ້ກັບຄ່າບໍລິບົດທີ່ມີຄວາມໝາຍ.
ສຳເນົາ
@gray-darker : lighten ( #000 , 13 .5 % ) ; // #222
@gray-dark : lighten ( #000 , 20 % ) ; // #333
@gray : lighten ( #000 , 33 .5 % ) ; // #555
@gray-light : lighten ( #000 , 46 .7 % ) ; // #777
@gray-lighter : lighten ( #000 , 93 .5 % ) ; // #eee
ສຳເນົາ
@brand-primary : darken ( #428bca , 6 .5 % ) ; // #337ab7
@brand-success : #5cb85c ;
@brand-info : #5bc0de ;
@brand-warning : #f0ad4e ;
@brand-danger : #d9534f ;
ໃຊ້ຕົວແປສີໃດນຶ່ງເຫຼົ່ານີ້ຕາມທີ່ພວກມັນເປັນ ຫຼືມອບໝາຍຄືນໃຫ້ກັບຕົວແປທີ່ມີຄວາມຫມາຍຫຼາຍສຳລັບໂຄງການຂອງທ່ານ.
ສຳເນົາ
// Use as-is
.masthead {
background-color : @ brand-primary ;
}
// Reassigned variables in Less
@alert-message-background : @ brand-info ;
.alert {
background-color : @ alert-message-background ;
}
Scaffolding
ມືຂອງຕົວແປສໍາລັບການປັບແຕ່ງອົງປະກອບທີ່ສໍາຄັນຂອງໂຄງກະດູກຂອງເວັບໄຊທ໌ຂອງທ່ານຢ່າງໄວວາ.
ສຳເນົາ
// Scaffolding
@body-bg : #fff ;
@text-color : @ black-50 ;
ລິ້ງຄ໌
ຈັດຮູບແບບລິ້ງຂອງເຈົ້າໄດ້ຢ່າງງ່າຍດາຍດ້ວຍສີທີ່ຖືກຕ້ອງດ້ວຍຄ່າດຽວເທົ່ານັ້ນ.
ສຳເນົາ
// Variables
@link-color : @ brand-primary ;
@link-hover-color : darken (@ link-color , 15 % ) ;
// Usage
a {
color : @ link-color ;
text-decoration : none ;
& :hover {
color : @ link-hover-color ;
text-decoration : underline ;
}
}
ໃຫ້ສັງເກດວ່າການ @link-hover-color
ນໍາໃຊ້ຟັງຊັນ, ເຄື່ອງມືທີ່ຫນ້າຫວາດສຽວອື່ນຈາກ Less, ເພື່ອສ້າງສີ hover ທີ່ຖືກຕ້ອງໂດຍອັດຕະໂນມັດ. ທ່ານສາມາດນໍາໃຊ້ darken
, lighten
, saturate
, ແລະ desaturate
.
ຕົວພິມ
ຕັ້ງຄ່າຕົວພິມ, ຂະໜາດຕົວໜັງສື, ນຳໜ້າ, ແລະອື່ນໆອີກໄດ້ຢ່າງງ່າຍດາຍດ້ວຍຕົວແປທີ່ໄວໜ້ອຍໜຶ່��. Bootstrap ເຮັດໃຫ້ການນໍາໃຊ້ເຫຼົ່ານີ້ເຊັ່ນດຽວກັນເພື່ອໃຫ້ mixins typographic ງ່າຍ.
ສຳເນົາ
@font-family-sans-serif : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
@font-family-serif : Georgia , "Times New Roman" , Times , serif ;
@font-family-monospace : Menlo , Monaco , Consolas , "Courier New" , monospace ;
@font-family-base : @ font-family-sans-serif ;
@font-size-base : 14px ;
@font-size-large : ceil ((@ font-size-base * 1 .25 )) ; // ~18px
@font-size-small : ceil ((@ font-size-base * 0 .85 )) ; // ~12px
@font-size-h1 : floor ((@ font-size-base * 2 .6 )) ; // ~36px
@font-size-h2 : floor ((@ font-size-base * 2 .15 )) ; // ~30px
@font-size-h3 : ceil ((@ font-size-base * 1 .7 )) ; // ~24px
@font-size-h4 : ceil ((@ font-size-base * 1 .25 )) ; // ~18px
@font-size-h5 : @ font-size-base ;
@font-size-h6 : ceil ((@ font-size-base * 0 .85 )) ; // ~12px
@line-height-base : 1 .428571429 ; // 20/14
@line-height-computed : floor ((@ font-size-base * @ line-height-base )) ; // ~20px
@headings-font-family : inherit ;
@headings-font-weight : 500 ;
@headings-line-height : 1 .1 ;
@headings-color : inherit ;
ໄອຄອນ
ສອງຕົວແປດ່ວນສໍາລັບການປັບແຕ່ງສະຖານທີ່ແລະຊື່ໄຟລ໌ຂອງໄອຄອນຂອງທ່ານ.
ສຳເນົາ
@icon-font-path : "../fonts/" ;
@icon-font-name : "glyphicons-halflings-regular" ;
ອົງປະກອບ
ອົງປະກອບໃນທົ່ວ Bootstrap ໃຊ້ບາງຕົວແປເລີ່ມຕົ້ນສໍາລັບການກໍານົດຄ່າທົ່ວໄປ. ນີ້ແມ່ນສິ່ງທີ່ໃຊ້ຫຼາຍທີ່ສຸດ.
ສຳເນົາ
@padding-base-vertical : 6px ;
@padding-base-horizontal : 12px ;
@padding-large-vertical : 10px ;
@padding-large-horizontal : 16px ;
@padding-small-vertical : 5px ;
@padding-small-horizontal : 10px ;
@padding-xs-vertical : 1px ;
@padding-xs-horizontal : 5px ;
@line-height-large : 1 .33 ;
@line-height-small : 1 .5 ;
@border-radius-base : 4px ;
@border-radius-large : 6px ;
@border-radius-small : 3px ;
@component-active-color : #fff ;
@component-active-bg : @ brand-primary ;
@caret-width-base : 4px ;
@caret-width-large : 5px ;
ຜູ້ຂາຍປະສົມ
ຜູ້ຂາຍ mixins ແມ່ນ mixins ເພື່ອຊ່ວຍສະຫນັບສະຫນູນຫຼາຍຕົວທ່ອງເວັບໂດຍການລວມເອົາຄໍານໍາຫນ້າຂອງຜູ້ຂາຍທີ່ກ່ຽວຂ້ອງທັງຫມົດໃນ CSS ທີ່ລວບລວມຂອງທ່ານ.
ຂະໜາດກ່ອງ
ຣີເຊັດຕົວແບບກ່ອງຂອງອົງປະກອບຂອງທ່ານດ້ວຍ mixin ດຽວ. ສໍາລັບສະພາບການ, ເບິ່ງ ບົດຄວາມທີ່ເປັນປະໂຫຍດນີ້ຈາກ Mozilla .
mixin ຖືກ ປະຕິເສດ ເປັນ v3.2.0, ດ້ວຍການແນະນຳ Autoprefixer. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, Bootstrap ຈະສືບຕໍ່ໃຊ້ mixin ພາຍໃນຈົນກ່ວາ Bootstrap v4.
ສຳເນົາ
.box-sizing (@ box-model ) {
-webkit-box-sizing : @ box-model ; // Safari <= 5
-moz-box-sizing : @ box-model ; // Firefox <= 19
box-sizing : @ box-model ;
}
ມຸມມົນ
ມື້ນີ້ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດສະຫນັບສະຫນູນ border-radius
ຄຸນສົມບັດທີ່ບໍ່ແມ່ນ prefixed. ດັ່ງນັ້ນ, ບໍ່ມີ .border-radius()
mixin, ແຕ່ Bootstrap ປະກອບມີທາງລັດສໍາລັບການຮອບສອງມຸມຢ່າງໄວວາໃນດ້ານສະເພາະຂອງວັດຖຸ.
ສຳເນົາ
.border-top-radius (@ radius ) {
border-top-right-radius : @ radius ;
border-top-left-radius : @ radius ;
}
.border-right-radius (@ radius ) {
border-bottom-right-radius : @ radius ;
border-top-right-radius : @ radius ;
}
.border-bottom-radius (@ radius ) {
border-bottom-right-radius : @ radius ;
border-bottom-left-radius : @ radius ;
}
.border-left-radius (@ radius ) {
border-bottom-left-radius : @ radius ;
border-top-left-radius : @ radius ;
}
ກ່ອງ (ວາງ) ເງົາ
ຖ້າຜູ້ຊົມເປົ້າຫມາຍຂອງທ່ານກໍາລັງໃຊ້ຕົວທ່ອງເວັບແລະອຸປະກອນຫລ້າສຸດແລະດີທີ່ສຸດ, ໃຫ້ແນ່ໃຈວ່າພຽງແຕ່ໃຊ້ box-shadow
ຄຸນສົມບັດຂອງມັນເອງ. ຖ້າທ່ານຕ້ອງການການຮອງຮັບອຸປະກອນ Android ເກົ່າ (pre-v4) ແລະ iOS (pre-iOS 5), ໃຫ້ໃຊ້ mixin ທີ່ບໍ່ຮອງຮັບ ເພື່ອເລືອກ -webkit
ຄໍານໍາຫນ້າທີ່ຕ້ອງການ.
mixin ຖືກ ປະຕິເສດ ເປັນ v3.1.0, ເນື່ອງຈາກ Bootstrap ບໍ່ໄດ້ສະຫນັບສະຫນູນຢ່າງເປັນທາງການຂອງແພລະຕະຟອມທີ່ລ້າສະໄຫມທີ່ບໍ່ສະຫນັບສະຫນູນຊັບສິນມາດຕະຖານ. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, Bootstrap ຈະສືບຕໍ່ໃຊ້ mixin ພາຍໃນຈົນກ່ວາ Bootstrap v4.
ໃຫ້ແນ່ໃຈວ່າໃຊ້ rgba()
ສີໃນເງົາຂອງກ່ອງຂອງເຈົ້າເພື່ອໃຫ້ພວກມັນຜະສົມຜະສານກັບພື້ນຫລັງໄດ້ຢ່າງລຽບງ່າຍທີ່ສຸດ.
ສຳເນົາ
. box-shadow (@ shadow : 0 1px 3px rgba ( 0 , 0 , 0 ,. 25 )) {
-webkit-box-shadow : @ shadow ; // iOS <4.3 & Android <4.1
box-shadow : @ shadow ;
}
ການຫັນປ່ຽນ
ປະສົມຫຼາຍເພື່ອຄວາມຍືດຫຍຸ່ນ. ກໍານົດຂໍ້ມູນການປ່ຽນແປງທັງຫມົດດ້ວຍອັນດຽວ, ຫຼືກໍານົດການຊັກຊ້າແລະໄລຍະເວລາແຍກຕ່າງຫາກຕາມຄວາມຕ້ອງການ.
ມິກຊິນຖືກ ປະຕິເສດ ເປັນ v3.2.0, ດ້ວຍການແນະນຳ Autoprefixer. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, Bootstrap ຈະສືບຕໍ່ໃຊ້ mixins ພາຍໃນຈົນກ່ວາ Bootstrap v4.
ສຳເນົາ
.transition (@ transition ) {
-webkit-transition : @ transition ;
transition : @ transition ;
}
.transition-property (@ transition-property ) {
-webkit-transition-property : @ transition-property ;
transition-property : @ transition-property ;
}
.transition-delay (@ transition-delay ) {
-webkit-transition-delay : @ transition-delay ;
transition-delay : @ transition-delay ;
}
.transition-duration (@ transition-duration ) {
-webkit-transition-duration : @ transition-duration ;
transition-duration : @ transition-duration ;
}
.transition-timing-function (@ timing-function ) {
-webkit-transition-timing-function : @ timing-function ;
transition-timing-function : @ timing-function ;
}
.transition-transform (@ transition ) {
-webkit-transition : - webkit-transform @ transition ;
-moz-transition : - moz-transform @ transition ;
-o-transition : - o-transform @ transition ;
transition : transform @ transition ;
}
ໝຸນ, ປັບຂະໜາດ, ແປ (ຍ້າຍ), ຫຼື ເລື່ອນວັດຖຸໃດນຶ່ງ.
ມິກຊິນຖືກ ປະຕິເສດ ເປັນ v3.2.0, ດ້ວຍການແນະນຳ Autoprefixer. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, Bootstrap ຈະສືບຕໍ່ໃຊ້ mixins ພາຍໃນຈົນກ່ວາ Bootstrap v4.
ສຳເນົາ
.rotate (@ degrees ) {
-webkit-transform : rotate ( @ degrees );
-ms-transform : rotate ( @ degrees ); // IE9 only
transform : rotate ( @ degrees );
}
.scale (@ ratio ; @ratio-y ... ) {
-webkit-transform : scale ( @ ratio , @ ratio-y );
-ms-transform : scale ( @ ratio , @ ratio-y ); // IE9 only
transform : scale ( @ ratio , @ ratio-y );
}
.translate (@ x ; @y ) {
-webkit-transform : translate ( @ x , @ y );
-ms-transform : translate ( @ x , @ y ); // IE9 only
transform : translate ( @ x , @ y );
}
.skew (@ x ; @y ) {
-webkit-transform : skew ( @ x , @ y );
-ms-transform : skewX ( @ x ) skewY ( @ y ); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform : skew ( @ x , @ y );
}
.translate3d (@ x ; @y ; @z ) {
-webkit-transform : translate3d ( @ x , @ y , @ z );
transform : translate3d ( @ x , @ y , @ z );
}
.rotateX (@ degrees ) {
-webkit-transform : rotateX ( @ degrees );
-ms-transform : rotateX ( @ degrees ); // IE9 only
transform : rotateX ( @ degrees );
}
.rotateY (@ degrees ) {
-webkit-transform : rotateY ( @ degrees );
-ms-transform : rotateY ( @ degrees ); // IE9 only
transform : rotateY ( @ degrees );
}
.perspective (@ perspective ) {
-webkit-perspective : @ perspective ;
-moz-perspective : @ perspective ;
perspective : @ perspective ;
}
.perspective-origin (@ perspective ) {
-webkit-perspective-origin : @ perspective ;
-moz-perspective-origin : @ perspective ;
perspective-origin : @ perspective ;
}
.transform-origin (@ origin ) {
-webkit-transform-origin : @ origin ;
-moz-transform-origin : @ origin ;
-ms-transform-origin : @ origin ; // IE9 only
transform-origin : @ origin ;
}
ພາບເຄື່ອນໄຫວ
mixin ດຽວສໍາລັບການນໍາໃຊ້ທັງຫມົດຂອງຄຸນສົມບັດການເຄື່ອນໄຫວຂອງ CSS3 ໃນການປະກາດຫນຶ່ງແລະ mixin ອື່ນໆສໍາລັບຄຸນສົມບັດສ່ວນບຸກຄົນ.
ມິກຊິນຖືກ ປະຕິເສດ ເປັນ v3.2.0, ດ້ວຍການແນະນຳ Autoprefixer. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, Bootstrap ຈະສືບຕໍ່ໃຊ້ mixins ພາຍໃນຈົນກ່ວາ Bootstrap v4.
ສຳເນົາ
.animation (@ animation ) {
-webkit-animation : @ animation ;
animation : @ animation ;
}
.animation-name (@ name ) {
-webkit-animation-name : @ name ;
animation-name : @ name ;
}
.animation-duration (@ duration ) {
-webkit-animation-duration : @ duration ;
animation-duration : @ duration ;
}
.animation-timing-function (@ timing-function ) {
-webkit-animation-timing-function : @ timing-function ;
animation-timing-function : @ timing-function ;
}
.animation-delay (@ delay ) {
-webkit-animation-delay : @ delay ;
animation-delay : @ delay ;
}
.animation-iteration-count (@ iteration-count ) {
-webkit-animation-iteration-count : @ iteration-count ;
animation-iteration-count : @ iteration-count ;
}
.animation-direction (@ direction ) {
-webkit-animation-direction : @ direction ;
animation-direction : @ direction ;
}
ຄວາມມືດ
ຕັ້ງຄ່າຄວາມໂປ່ງແສງສໍາລັບທຸກຕົວທ່ອງເວັບ ແລະສະຫນອງທາງເລືອກ filter
ສໍາລັບ IE8.
ສຳເນົາ
.opacity (@ opacity ) {
opacity : @ opacity ;
// IE8 filter
@opacity-ie : (@ opacity * 100 ) ;
filter : ~ "alpha(opacity=@{opacity-ie})" ;
}
ຂໍ້ຄວາມຕົວຍຶດ
ໃຫ້ບໍລິບົດສໍາລັບການຄວບຄຸມແບບຟອມພາຍໃນແຕ່ລະຊ່ອງຂໍ້ມູນ.
ສຳເນົາ
. placeholder (@ color : @ input-color-placeholder ) {
& : :- moz-placeholder { color : @ color ; } // Firefox
& : - ms-input-placeholder { color : @ color ; } // Internet Explorer 10+
& : :- webkit-input-placeholder { color : @ color ; } // Safari and Chrome
}
ຖັນ
ສ້າງຖັນຜ່ານ CSS ພາຍໃນອົງປະກອບດຽວ.
ສຳເນົາ
.content-columns (@ width ; @count ; @gap ) {
-webkit-column-width : @ width ;
-moz-column-width : @ width ;
column-width : @ width ;
-webkit-column-count : @ count ;
-moz-column-count : @ count ;
column-count : @ count ;
-webkit-column-gap : @ gap ;
-moz-column-gap : @ gap ;
column-gap : @ gap ;
}
ຊັ້ນສີ
ປ່ຽນສີສອງສີໃຫ້ເປັນສີພື້ນຫຼັງໄດ້ຢ່າງງ່າຍດາຍ. ໄດ້ຮັບການກ້າວຫນ້າທາງດ້ານຫຼາຍກວ່າເກົ່າແລະກໍານົດທິດທາງ, ໃຊ້ສາມສີ, ຫຼືໃຊ້ gradient radial. ດ້ວຍ mixin ດຽວ, ທ່ານຈະໄດ້ຮັບ syntaxs ທີ່ມີ prefixed ທັງຫມົດທີ່ທ່ານຕ້ອງການ.
ສຳເນົາ
#gradient > .vertical ( #333 ; #000 ) ;
#gradient > .horizontal ( #333 ; #000 ) ;
#gradient > .radial ( #333 ; #000 ) ;
ນອກນັ້ນທ່ານຍັງສາມາດກໍານົດມຸມຂອງສອງສີມາດຕະຖານ, gradient ເສັ້ນ:
ສຳເນົາ
#gradient > .directional ( #333 ; #000 ; 45deg ) ;
ຖ້າທ່ານຕ້ອງການ gradient ແບບ barber-stripe, ນັ້ນກໍ່ງ່າຍຄືກັນ. ພຽງແຕ່ລະບຸສີດຽວ ແລ້ວພວກເຮົາຈະທາເສັ້ນດ່າງສີຂາວໂປ່ງໃສ.
ສຳເນົາ
#gradient > .striped ( #333 ; 45deg ) ;
ຂຶ້ນຕົ້ນ ແລະໃຊ້ສາມສີແທນ. ກໍານົດສີທໍາອິດ, ສີທີສອງ, ສີຢຸດສີທີສອງ (ຄ່າສ່ວນຮ້ອຍເຊັ່ນ: 25%), ແລະສີທີສາມກັບ mixins ເຫຼົ່ານີ້:
ສຳເນົາ
#gradient > .vertical-three-colors ( #777 ; #333 ; 25 % ; #000 ) ;
#gradient > .horizontal-three-colors ( #777 ; #333 ; 25 % ; #000 ) ;
ລະວັງ! ຖ້າເຈົ້າຕ້ອງການເອົາ gradient ອອກ, ໃຫ້ແນ່ໃຈວ່າເອົາ IE ສະເພາະໃດໆທີ່ filter
ເຈົ້າອາດຈະເພີ່ມ. ທ່ານສາມາດເຮັດໄດ້ໂດຍການໃຊ້ .reset-filter()
mixin ຄຽງຄູ່ background-image: none;
.
ການປະສົມຜົນປະໂຫຍດ
Utility mixins ແມ່ນ mixins ທີ່ສົມທົບຄຸນສົມບ��ດ CSS ທີ່ບໍ່ກ່ຽວຂ້ອງກັນເພື່ອບັນລຸເປົ້າຫມາຍຫຼືວຽກງານສະເພາະ.
ແກ້ໄຂ
ລືມຕື່ມ class="clearfix"
ໃສ່ອົງປະກອບໃດນຶ່ງ ແລະແທນທີ່ຄວນຕື່ມ .clearfix()
mixin ຕາມຄວາມເໝາະສົມ. ໃຊ້ micro clearfix ຈາກ Nicolas Gallagher .
ສຳເນົາ
// Mixin
.clearfix () {
& :before ,
& :after {
content : " " ;
display : table ;
}
& :after {
clear : both ;
}
}
// Usage
.container {
.clearfix () ;
}
ການວາງກາງແນວນອນ
ເອົາອົງປະກອບໃດນຶ່ງຢູ່ໃນຈຸດກາງຂອງພໍ່ແມ່ຂອງມັນ. ຕ້ອງ ການ width
ຫຼື max-width
ກໍານົດ.
ສຳເນົາ
// Mixin
.center-block () {
display : block ;
margin-left : auto ;
margin-right : auto ;
}
// Usage
.container {
width : 940px ;
.center-block () ;
}
ຕົວຊ່ວຍປັບຂະໜາດ
ລະບຸຂະໜາດຂອງວັດຖຸໄດ້ງ່າຍຂຶ້ນ.
ສຳເນົາ
// Mixins
.size (@ width ; @height ) {
width : @ width ;
height : @ height ;
}
.square (@ size ) {
.size (@ size ; @size ) ;
}
// Usage
.image { .size ( 400px ; 300px ) ; }
.avatar { .square ( 48px ) ; }
ພື້ນທີ່ຂໍ້ຄວາມທີ່ສາມາດປັບຂະໜາດໄດ້
ຕັ້ງຄ່າຕົວເລືອກການປັບຂະໜາດໄດ້ຢ່າງງ່າຍດາຍສຳລັບພື້ນທີ່ຂໍ້ຄວາມ, ຫຼືອົງປະກອບອື່ນໆ. ຄ່າເລີ່ມຕົ້ນຂອງພຶດຕິກໍາຂອງຕົວທ່ອງເວັບປົກກະຕິ ( both
).
ສຳເນົາ
. resizable (@ direction : both ) {
// Options: horizontal, vertical, both
resize : @ direction ;
// Safari fix
overflow : auto ;
}
ກຳລັງຕັດຂໍ້ຄວາມ
ຕັດຂໍ້ຄວາມໄດ້ຢ່າງງ່າຍດາຍດ້ວຍຮູບຮີດ້ວຍ mixin ດຽວ. ຮຽກຮ້ອງໃຫ້ມີອົງປະກອບເປັນ block
ຫຼື inline-block
ລະດັບ.
ສຳເນົາ
// Mixin
.text-overflow () {
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
}
// Usage
.branch-name {
display : inline-block ;
max-width : 200px ;
.text-overflow () ;
}
ຮູບພາບ Retina
ລະບຸສອງເສັ້ນທາງຮູບພາບ ແລະຂະໜາດຮູບ @1x, ແລະ Bootstrap ຈະສະໜອງການສອບຖາມສື່ @2x. ຖ້າທ່ານມີຮູບພາບຈໍານວນຫຼາຍເພື່ອຮັບໃຊ້, ພິຈາລະນາຂຽນ CSS ຮູບພາບ retina ຂອງທ່ານດ້ວຍຕົນເອງໃນການສອບຖາມສື່ດຽວ.
ສຳເນົາ
.img-retina (@ file-1x ; @file-2x ; @width-1x ; @height-1x ) {
background-image : url("@{file-1x}") ;
@media
only screen and ( - webkit-min-device-pixel-ratio : 2 ) ,
only screen and ( min--moz-device-pixel-ratio : 2 ) ,
only screen and ( - o-min-device-pixel-ratio : 2 / 1 ) ,
only screen and ( min-device-pixel-ratio : 2 ) ,
only screen and ( min-resolution : 192dpi ) ,
only screen and ( min-resolution : 2dppx ) {
background-image : url("@{file-2x}") ;
background-size : @ width-1x @ height-1x ;
}
}
// Usage
.jumbotron {
.img-retina ( "/img/bg-1x.png" , "/img/bg-2x.png" , 100px , 100px ) ;
}
ໃນຂະນະທີ່ Bootstrap ຖືກສ້າງຂຶ້ນໃນ Less, ມັນຍັງມີ ພອດ Sass ຢ່າງເປັນທາງການ . ພວກເຮົາຮັກສາມັນຢູ່ໃນບ່ອນເກັບມ້ຽນ GitHub ແຍກຕ່າງຫາກແລະຈັດການການປັບປຸງດ້ວຍສະຄິບແປງ.
ມີຫຍັງແດ່
ເນື່ອງຈາກພອດ Sass ມີ repo ແຍກຕ່າງຫາກແລະໃຫ້ບໍລິການຜູ້ຊົມທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ, ເນື້ອໃນຂອງໂຄງການແຕກຕ່າງກັນຢ່າງຫຼວງຫຼາຍຈາກໂຄງການ Bootstrap ຕົ້ນຕໍ. ນີ້ຮັບປະກັນວ່າພອດ Sass ແມ່ນເຂົ້າກັນໄດ້ກັບລະບົບ Sass ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້.
ເສັ້ນທາງ
ລາຍລະອຽດ
lib/
ລະຫັດແກ້ວປະເສີດ Ruby (ການຕັ້ງຄ່າ Sass, Rails ແລະ Compass ປະສົມປະສານ)
tasks/
ຕົວປ່ຽນສະຄຣິບ (ປ່ຽນຕົວໜັງສືໜ້ອຍລົງເປັນ Sass)
test/
ການທົດສອບການລວບລວມ
templates/
ຊຸດເຂັມທິດ manifest
vendor/assets/
ໄຟລ໌ Sass, JavaScript, ແລະ font
Rakefile
ວຽກງານພາຍໃນ, ເຊັ່ນ: rake ແລະແປງ
ເຂົ້າ ໄປເບິ່ງ ບ່ອນເກັບມ້ຽນ GitHub ຂອງພອດ Sass ເພື່ອເບິ່ງໄຟລ໌ເຫຼົ່ານີ້ຢູ່ໃນການປະຕິບັດ.
ການຕິດຕັ້ງ
ສໍາລັບຂໍ້ມູນກ່ຽວກັບວິທີຕິດຕັ້ງ ແລະໃຊ້ Bootstrap ສໍາລັບ Sass, ໃຫ້ປຶກສາກັບ GitHub repository readme . ມັນເປັນແຫຼ່ງທີ່ທັນສະໄຫມທີ່ສຸດແລະປະກອບມີຂໍ້ມູນສໍາລັບການນໍາໃຊ້ກັບໂຄງການ Rails, Compass, ແລະມາດຕະຖານ Sass.
Bootstrap ສໍາລັບ Sass