ໄດ້ຮັບການຫຼຸດລົງໃນສ່ວນທີ່ສໍາຄັນຂອງໂຄງສ້າງພື້ນຖານຂອງ 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 ນັ້ນຖືກຊົດເຊີຍໃນແຖວສໍາລັບຖັນທໍາອິດແລະສຸດທ້າຍຜ່ານຂອບທາງລົບຢູ່ .rows.
ຂອບທາງລົບແມ່ນວ່າເປັນຫຍັງຕົວຢ່າງຂ້າງລຸ່ມນີ້ແມ່ນ 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-8

.col-md-4

.col-md-6

<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

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

<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 &gt; 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

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

ການຊົດເຊີຍຖັນ

ຍ້າຍຖັນໄປທາງຂວາໂດຍໃຊ້ .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-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>&lt;section&gt;</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>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ເຈົ້າສາມາດເລືອກເພີ່ມ .pre-scrollableຊັ້ນຮຽນໄດ້, ເຊິ່ງຈະຕັ້ງຄວາມສູງສູງສຸດຂອງ 350px ແລະໃຫ້ແຖບເລື່ອນແກນ y.

ຕົວແປ

ສໍາລັບການຊີ້ບອກຕົວແປໃຫ້ໃຊ້<var> ແທັກ.

y = m x + b

<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 ເທົ່ານັ້ນ.

ອາດຕ້ອງການຄວາມກວ້າງແບບກຳນົດເອງ

ການປ້ອນຂໍ້ມູນ ແລະການເລືອກໄດ້ width: 100%;ນຳໃຊ້ຕາມຄ່າເລີ່ມຕົ້ນໃນ Bootstrap. ພາຍໃນຮູບແບບ inline, ພວກເຮົາຕັ້ງມັນຄືນໃໝ່ເພື່ອ width: auto;ໃຫ້ການຄວບຄຸມຫຼາຍອັນສາມາດຢູ່ໃນແຖວດຽວກັນ. ອີງຕາມການຈັດວາງຂອງທ່ານ, ຄວາມກວ້າງແບບກຳນົດເອງເພີ່ມເຕີມອາດຈະຕ້ອງການ.

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

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

<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-groups ໃຫ້ປະຕິບັດຕົວເປັນແຖວຕາຂ່າຍໄຟຟ້າ, ສະນັ້ນບໍ່ຈໍາເປັນຕ້ອງມີ .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.

ຕ້ອງການການປະກາດປະເພດ

ວັດສະດຸປ້ອນຈະຖືກຈັດຮູບແບບເຕັມຮູບແບບເທົ່ານັ້ນຖ້າພວກ typeມັນຖືກປະກາດຢ່າງຖືກຕ້ອງ.

<input type="text" class="form-control" placeholder="Text input">

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

ເພື່ອເພີ່ມຂໍ້ຄວາມ ຫຼືປຸ່ມທີ່ປະສົມປະສານກ່ອນ ແລະ/ຫຼືຫຼັງຈາກຂໍ້ຄວາມໃດໜຶ່ງ <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&mdash;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&mdash;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 ຫຼືວິທະຍຸສໍາລັບການຄວບຄຸມທີ່ປາກົດຢູ່ໃນແຖວດຽວກັນ.

<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ຄຸນສົມບັດ.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ສໍາລັບ <select>ການຄວບຄຸມທີ່ມີ multipleຄຸນລັກສະນະ, ຫຼາຍທາງເລືອກແມ່ນສະແດງໂດຍຄ່າເລີ່ມຕົ້ນ.

<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 class="sr-only" 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ພາຍໃນອົງປະກອບນັ້ນຈະໄດ້ຮັບຮູບແບບການກວດສອບ.

ຖ່າຍທອດສະຖານະການກວດສອບໃຫ້ກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ ແລະຜູ້ໃຊ້ຕາບອດສີ

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

ຮັບປະກັນວ່າມີການສະໜອງຕົວຊີ້ບອກທາງເລືອກຂອງລັດ. ຕົວຢ່າງເຊັ່ນ, ທ່ານສາມາດປະກອບມີຄໍາແນະນໍາກ່ຽວກັບສະຖານະໃນຂໍ້ຄວາມຂອງຕົວຄວບຄຸມແບບຟອມ <label>ຕົວມັນເອງ (ເຊັ່ນດຽວກັບຕົວຢ່າງຂອງລະຫັດຕໍ່ໄປນີ້), ປະກອບມີ Glyphicon (ມີຂໍ້ຄວາມທາງເລືອກທີ່ເຫມາະສົມໂດຍໃຊ້ .sr-onlyຊັ້ນ - ເບິ່ງ ຕົວຢ່າງ Glyphicon ), ຫຼືໂດຍການສະຫນອງ. ບລັອກ ຂໍ້ຄວາມຊ່ວຍເຫຼືອ ເພີ່ມເຕີມ . ໂດຍສະເພາະສໍາລັບເທກໂນໂລຍີການຊ່ວຍເຫຼືອ, ການຄວບຄຸມແບບຟອມທີ່ບໍ່ຖືກຕ້ອງຍັງສາມາດຖືກມອບຫມາຍ aria-invalid="true"ຄຸນລັກສະນະ.

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

ປ້ອນຂໍ້ມູນພ້ອມຄຳເຕືອນ

ການປ້ອນຂໍ້ມູນຜິດພາດ

checkbox ກັບຜົນສໍາເລັດ

ກ່ອງກາເຄື່ອງຫມາຍທີ່ມີຄໍາເຕືອນ

checkbox ມີຂໍ້ຜິດພາດ

<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 ຂອງພວກເຮົາ.

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

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

ການສະແດງຜົນຂ້າມບຣາວເຊີ

ເປັນການປະຕິບັດທີ່ດີທີ່ສຸດ, ພວກເຮົາຂໍແນະນໍາໃຫ້ໃຊ້ <button>ອົງປະກອບທຸກຄັ້ງທີ່ເປັນໄປໄດ້ ເພື່ອຮັບປະກັນການສະແດງຜົນຂ້າມຕົວທ່ອງເວັບທີ່ກົງກັນ.

ໃນບັນດາສິ່ງອື່ນໆ, ມີ bug ໃນ Firefox <30 ທີ່ປ້ອງກັນພວກເຮົາຈາກການຕັ້ງຄ່າ line-heightປຸ່ມ <input>-based, ເຮັດໃຫ້ພວກມັນບໍ່ກົງກັບຄວາມສູງຂອງປຸ່ມອື່ນໆໃນ Firefox.

ທາງເລືອກ

ໃຊ້ຫ້ອງຮຽນປຸ່ມໃດກໍໄດ້ທີ່ມີຢູ່ເພື່ອສ້າງປຸ່ມສະໄຕລ໌ຢ່າງວ່ອງໄວ.

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

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

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

ຂະໜາດ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ເພີ່ມ .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ຄຸນລັກສະນະເປັນ <button>, Internet Explorer 9 ແລະຂ້າງລຸ່ມນີ້ຈະເຮັດໃຫ້ຂໍ້ຄວາມສີຂີ້ເຖົ່າທີ່ມີເງົາຕົວອັກສອນທີ່ບໍ່ດີທີ່ພວກເຮົາບໍ່ສາມາດແກ້ໄຂໄດ້.

ອົງປະກອບສະມໍ

ເພີ່ມ .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ຫ້ອງຮຽນທົ່ວໄປ, ດັ່ງນັ້ນບໍ່ຈໍາເປັນຕ້ອງມີຄໍານໍາຫນ້າ.

ຄໍາເຕືອນກ່ຽວກັບຫນ້າທີ່ເຊື່ອມຕໍ່

ຫ້ອງຮຽນນີ້ໃຊ້ pointer-events: noneເພື່ອພະຍາຍາມປິດການທໍາງານຂອງການເຊື່ອມຕໍ່ຂອງ <a>s, ແຕ່ວ່າຄຸນສົມບັດ CSS ຍັງບໍ່ທັນໄດ້ມາດຕະຖານແລະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໃນ Opera 18 ແລະຂ້າງລຸ່ມນີ້, ຫຼືໃນ Internet Explorer 11. ນອກຈາກນັ້ນ, ເຖິງແມ່ນວ່າໃນຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນ pointer-events: none, keyboard. ການນໍາທາງຍັງບໍ່ໄດ້ຮັບຜົນກະທົບ, ຊຶ່ງຫມາຍຄວາມວ່າຜູ້ໃຊ້ແປ້ນພິມທີ່ເບິ່ງເຫັນແລະຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອຈະຍັງສາມາດເປີດໃຊ້ການເຊື່ອມຕໍ່ເຫຼົ່ານີ້ໄດ້. ດັ່ງນັ້ນເພື່ອໃຫ້ປອດໄພ, ໃຊ້ JavaScript ແບບກໍານົດເອງເພື່ອປິດການເຊື່ອມຕໍ່ດັ່ງກ່າວ.

ຮູບພາບທີ່ຕອບສະຫນອງ

ຮູບພາບຕ່າງໆໃນ 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">&times;</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();
}

ຕັນເນື້ອໃນສູນກາງ

ກໍານົດອົງປະກອບເປັນ 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-hideclass ຫຼື 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ມູນຄ່າຊັບສິນທີ່ລະບຸໄວ້ຂ້າງລຸ່ມນີ້.

ກຸ່ມຂອງຫ້ອງຮຽນ	CSS`display`
`.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;
}

ການຫັນປ່ຽນ

ໝຸນ, ປັບຂະໜາດ, ແປ (ຍ້າຍ), ຫຼື ເລື່ອນວັດຖຸໃດນຶ່ງ.

.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 ອື່ນໆສໍາລັບຄຸນສົມບັດສ່ວນບຸກຄົນ.

.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

CSS

ພາບລວມ

ປະເພດເອກະສານ HTML5

ມືຖືກ່ອນ

Typography ແລະການເຊື່ອມຕໍ່

Normalize.css

ບັນຈຸ

ລະບົບຕາຂ່າຍ

ແນະນຳ

ຄໍາຖາມສື່ມວນຊົນ

ຕົວເລືອກຕາຕະລາງ

ຕົວຢ່າງ: stacked-to-horizontal

ຕົວຢ່າງ: ບັນຈຸນໍ້າ

ຕົວຢ່າງ: ມືຖື ແລະເດັສທັອບ

ຕົວຢ່າງ: ມືຖື, ແທັບເລັດ, ເດັສທັອບ

ຕົວຢ່າງ: ການຫໍ່ຖັນ

ຣີເຊັດຖັນທີ່ຕອບສະໜອງ

ການຊົດເຊີຍຖັນ

ຖັນຮັງ

ການສັ່ງຖັນ

ຫນ້ອຍ mixins ແລະຕົວແປ

ຕົວແປ

ມິກຊິນ

ຕົວຢ່າງການນໍາໃຊ້

ຕົວພິມ

ຫົວຂໍ້

h1. ຫົວຂໍ້ Bootstrap

h2. ຫົວຂໍ້ Bootstrap

h3. ຫົວຂໍ້ Bootstrap

h4. ຫົວຂໍ້ Bootstrap

h5. ຫົວຂໍ້ Bootstrap

h6. ຫົວຂໍ້ Bootstrap

h1. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

h2. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

h3. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

h4. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

h5. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

h6. ຫົວຂໍ້ Bootstrap ຂໍ້ ຄວາມ ທີສອງ

ສຳເນົາຮ່າງກາຍ

ສໍາເນົາຮ່າງກາຍນໍາ

ສ້າງດ້ວຍຫນ້ອຍ

ອົງປະກອບຂໍ້ຄວາມໃນແຖວ

ຂໍ້ຄວາມທີ່ໝາຍໄວ້

ລຶບຂໍ້ຄວາມແລ້ວ

ຂໍ້ຄວາມຕີຜ່ານ

ແຊກຂໍ້ຄວາມ

ຂີດກ້ອງຂໍ້ຄວາມ

ຂໍ້ຄວາມຂະຫນາດນ້ອຍ

ກ້າຫານ

ໂຕອຽງ

ອົງປະກອບສຳຮອງ

ຫ້ອງຮຽນຈັດຮຽງ

ຫ້ອງຮຽນການຫັນເປັນ

ຕົວຫຍໍ້

ຕົວຫຍໍ້ພື້ນຖານ

ລັດທິເລີ່ມຕົ້ນ

ທີ່ຢູ່

Blockquotes

ຂໍ້ຄວາມບລັອກເລີ່ມຕົ້ນ

ຕົວເລືອກ blockquote

ການຕັ້ງຊື່ແຫຼ່ງ

ຈໍສະແດງຜົນສະຫຼັບ

ລາຍການ

ບໍ່ມີຄໍາສັ່ງ

ສັ່ງແລ້ວ

ບໍ່ມີຮູບແບບ

ໃນແຖວ

ລາຍລະອຽດ

ລາຍ​ລະ​ອຽດ​ແນວ​ນອນ​

ຕັດອັດຕະໂນມັດ

ລະຫັດ

ໃນແຖວ

ການປ້ອນຂໍ້ມູນຂອງຜູ້ໃຊ້

ຕັນພື້ນຖານ

ຕົວແປ

ຜົນຜະລິດຕົວຢ່າງ

ຕາຕະລາງ

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

ແຖວເສັ້ນດ່າງ

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

ລາຍລະອຽດແນວນອນ

`:focus`ສະຖານະ ຕົວຢ່າງ

Caveat ກ່ຽວກັບການທໍາງານຂອງການເຊື່ອມຕໍ່ຂອງ`<a>`

ໄອຄອນທາງເລືອກທີ່ມີການເຊື່ອງໄວ້`.sr-only`ໄອຄອນທາງເລືອກທີ່ມີ ປ້າຍຊື່

ຮູບຮ່າງຮູບພາບ