ບັດຂອງ Bootstrap ສະຫນອງການບັນຈຸເນື້ອໃນທີ່ມີຄວາມຍືດຫຍຸ່ນແລະສາມາດຂະຫຍາຍໄດ້ດ້ວຍຕົວແປແລະທາງເລືອກທີ່ຫຼາກຫຼາຍ.
ກ່ຽວກັບ
ບັດ ແມ່ນ ບັນ ຈຸເນື້ອໃນທີ່ປ່ຽນແປງໄດ້ ແລະຂະຫຍາຍໄດ້. ມັນປະກອບມີຕົວເລືອກຕ່າງໆສຳລັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ເນື້ອຫາຫຼາກຫຼາຍ, ສີພື້ນຫຼັງຂອງບໍລິບົດ, ແລະຕົວເລືອກການສະແດງຜົນທີ່ມີປະສິດທິພາບ. ຖ້າທ່ານຄຸ້ນເຄີຍກັບ Bootstrap 3, ບັດປ່ຽນແທນແຜງເກົ່າ, ນໍ້າສ້າງ, ແລະຮູບຕົວຢ່າງຂອງພວກເຮົາ. ການທໍາງານທີ່ຄ້າຍຄືກັນກັບອົງປະກອບເຫຼົ່ານັ້ນແມ່ນມີຢູ່ໃນຫ້ອງຮຽນແກ້ໄຂສໍາລັບບັດ.
ຕົວຢ່າງ
ບັດແມ່ນສ້າງຂຶ້ນດ້ວຍເຄື່ອງໝາຍ ແລະຮູບແບບໜ້ອຍທີ່ສຸດເທົ່າທີ່ຈະເປັນໄປໄດ້, ແຕ່ຍັງຄົງສາມາດຄວບຄຸມ ແລະປັບແຕ່ງໄດ້ຫຼາຍສົມຄວນ. ສ້າງຂຶ້ນດ້ວຍ flexbox, ພວກເຂົາສະຫນອງການຈັດຕໍາແຫນ່ງທີ່ງ່າຍແລະປະສົມກັບອົງປະກອບ Bootstrap ອື່ນໆ. ພວກມັນບໍ່ມີ margin
ຄ່າເລີ່ມຕົ້ນ, ສະນັ້ນໃຫ້ໃຊ້ ສິ່ງອຳນວຍຄວາມສະ ດວກໄລຍະຫ່າງ ຕາມຄວາມຕ້ອງການ.
ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງບັດພື້ນຖານທີ່ມີເນື້ອໃນປະສົມແລະຄວາມກວ້າງຄົງທີ່. ບັດບໍ່ມີຄວາມກວ້າງຄົງທີ່ເພື່ອເລີ່ມຕົ້ນ, ດັ່ງນັ້ນພວກມັນຈະຕື່ມຄວາມກວ້າງເຕັມຂອງອົງປະກອບຫຼັກຂອງມັນ. ນີ້ແມ່ນປັບແຕ່ງໄດ້ງ່າຍດ້ວຍ ຕົວເລືອກຂະໜາດ ຕ່າງໆຂອງພວກເຮົາ .
ຊື່ບັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ປະເພດເນື້ອຫາ
ບັດສະຫນັບສະຫນູນຫຼາກຫຼາຍຂອງເນື້ອຫາ, ລວມທັງຮູບພາບ, ຂໍ້ຄວາມ, ກຸ່ມລາຍຊື່, ການເຊື່ອມຕໍ່, ແລະອື່ນໆ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງສິ່ງທີ່ສະຫນັບສະຫນູນ.
ຮ່າງກາຍ
ຕຶກອາຄານຂອງບັດແມ່ນ .card-body
. ໃຊ້ມັນທຸກຄັ້ງທີ່ທ່ານຕ້ອງການສ່ວນ padded ພາຍໃນບັດ.
ນີ້ແມ່ນຂໍ້ຄວາມບາງອັນຢູ່ໃນເນື້ອໃນບັດ.
ຫົວຂໍ້, ຂໍ້ຄວາມ, ແລະການເຊື່ອມຕໍ່
ຊື່ບັດແມ່ນໃຊ້ໂດຍການເພີ່ມ .card-title
ໃສ່ <h*>
ແທັກ. ໃນລັກສະນະດຽວກັນ, ການເຊື່ອມຕໍ່ຖືກເພີ່ມແລະວາງຢູ່ຂ້າງກັນໂດຍການເພີ່ມ .card-link
ໃສ່ <a>
ແທັກ.
ຄໍາບັນຍາຍຖືກໃຊ້ໂດຍການເພີ່ມໃສ່ .card-subtitle
ແທັກ <h*>
. ຖ້າຫາກວ່າ .card-title
ແລະ .card-subtitle
ລາຍການໄດ້ຖືກຈັດໃສ່ໃນ .card-body
ລາຍການ, ຫົວຂໍ້ບັດແລະຄໍາບັນຍາຍແມ່ນສອດຄ້ອງກັນ.
ຮູບພາບ
.card-img-top
ເອົາຮູບໃສ່ເທິງສຸດຂອງບັດ. ດ້ວຍ .card-text
, ຂໍ້ຄວາມສາມາດຖືກເພີ່ມໃສ່ບັດ. ຂໍ້ຄວາມພາຍໃນ .card-text
ຍັງສາມາດຖືກຈັດຮູບແບບດ້ວຍແທັກ HTML ມາດຕະຖານ.
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ລາຍຊື່ກຸ່ມ
ສ້າງລາຍຊື່ເນື້ອຫາຢູ່ໃນບັດທີ່ມີກຸ່ມລາຍຊື່ flush.
- Cras justo odio
- Dapibus ac facilisis ໃນ
- vestibulum ຢູ່ eros
- Cras justo odio
- Dapibus ac facilisis ໃນ
- vestibulum ຢູ່ eros
- Cras justo odio
- Dapibus ac facilisis ໃນ
- vestibulum ຢູ່ eros
ອ່າງລ້າງຖ້ວຍ
ປະສົມແລະຈັບຄູ່ເນື້ອຫາຫຼາຍປະເພດເພື່ອສ້າງບັດທີ່ທ່ານຕ້ອງການ, ຫຼືຖິ້ມທຸກສິ່ງທຸກຢ່າງຢູ່ໃນນັ້ນ. ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້ແມ່ນຮູບແບບຮູບພາບ, ບລັອກ, ຮູບແບບຂໍ້ຄວາມ, ແລະກຸ່ມລາຍຊື່ - ທັງຫມົດຖືກຫໍ່ຢູ່ໃນບັດຄວາມກວ້າງຄົງທີ່.
ຊື່ບັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
- Cras justo odio
- Dapibus ac facilisis ໃນ
- vestibulum ຢູ່ eros
ເພີ່ມສ່ວນຫົວທາງເລືອກ ແລະ/ຫຼືສ່ວນທ້າຍພາຍໃນບັດ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ສ່ວນ ຫົວບັດສາມາດຖືກຈັດຮູບແບບໂດຍການເພີ່ມ .card-header
ໃສ່ <h*>
ອົງປະກອບ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ຂະໜາດ
ບັດຖືວ່າບໍ່ສະເພາະ width
ເພື່ອເລີ່ມຕົ້ນ, ສະນັ້ນພວກມັນຈະກວ້າງ 100% ເວັ້ນເສຍແຕ່ໄດ້ລະບຸໄວ້ເປັນຢ່າງອື່ນ. ທ່ານສາມາດປ່ຽນແປງອັນນີ້ໄດ້ຕາມຄວາມຕ້ອງການທີ່ມີ CSS ທີ່ກໍານົດໄວ້, ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າ, grid Sass mixins, ຫຼືອຸປະກອນ.
ການນໍາໃຊ້ເຄື່ອງຫມາຍຕາຕະລາງ
ການນໍາໃຊ້ຕາຂ່າຍໄຟຟ້າ, ຫໍ່ບັດໃນຖັນແລະແຖວຕາມຄວາມຕ້ອງການ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການນໍາໃຊ້ອຸປະກອນ
ໃຊ້ເຄື່ອງມືການ ປັບຂະໜາດທີ່ມີຢູ່ ຂອງພວກເຮົາ ເພື່ອກຳນົດຄວາມກວ້າງຂອງບັດຢ່າງໄວວາ.
ຊື່ບັດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ປຸ່ມ
ຊື່ບັດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ປຸ່ມ
ການໃຊ້ CSS ແບບກຳນົດເອງ
ໃຊ້ CSS ແບບກຳນົດເອງໃນສະໄຕລ໌ຊີດຂອງເຈົ້າ ຫຼືເປັນຮູບແບບໃນແຖວເພື່ອກຳນົດຄວາມກວ້າງ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການຈັດຮຽງຂໍ້ຄວາມ
ທ່ານສາມາດປ່ຽນການຈັດວາງຂໍ້ຄວາມຂອງບັດໄດ້ຢ່າງວ່ອງໄວ — ໃນທັງຫມົດຫຼືພາກສ່ວນສະເພາະຂອງມັນ — ກັບ ຫ້ອງຮຽນການຈັດຂໍ້ຄວາມ ຂອງພວກເຮົາ .
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການນໍາທາງ
ເພີ່ມການນໍາທາງບາງຢ່າງໃສ່ສ່ວນຫົວຂອງບັດ (ຫຼືບລັອກ) ດ້ວຍ ອົງປະກອບ navigation ຂອງ Bootstrap .
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ຮູບພາບ
ບັດປະກອບມີທາງເລືອກຈໍານວນຫນ້ອຍສໍາລັບການເຮັດວຽກກັບຮູບພາບ. ເລືອກຈາກ “ໝວກຮູບ” ໃສ່ທ້າຍບັດ, ວາງຮູບພາບທີ່ມີເນື້ອໃນບັດ, ຫຼືພຽງແຕ່ຝັງຮູບໃສ່ໃນບັດ.
ໝວກຮູບ
ຄ້າຍກັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ບັດສາມາດລວມເອົາ “ຮູບໃສ່ຫົວ” ເທິງ ແລະລຸ່ມ—ຮູບພາບຢູ່ເທິງ ຫຼື ລຸ່ມສຸດຂອງບັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ການວາງຊ້ອນຮູບພາບ
ປ່ຽນຮູບໃຫ້ເປັນພື້ນຫຼັງບັດ ແລະວາງທັບຂໍ້ຄວາມໃນບັດຂອງເຈົ້າ. ອີງຕາມຮູບພາບ, ທ່ານອາດຈະຕ້ອງການຫຼືບໍ່ຕ້ອງການຮູບແບບຫຼືປະໂຫຍດເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ໃຫ້ສັງເກດວ່າເນື້ອຫາບໍ່ຄວນໃຫຍ່ກວ່າຄວາມສູງຂອງຮູບ. ຖ້າເນື້ອຫາໃຫຍ່ກວ່າຮູບພາບ, ເນື້ອຫາຈະຖືກສະແດງຢູ່ນອກຮູບພາບ.
ລວງນອນ
ການນໍາໃຊ້ການປະສົມປະສານຂອງຕາຂ່າຍໄຟຟ້າແລະຊັ້ນຮຽນທີ່ເປັນປະໂຫຍດ, ບັດສາມາດເຮັດຕາມແນວນອນໃນວິທີທີ່ເປັນມິດກັບມືຖືແລະຕອບສະຫນອງ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາເອົາ gutters ຕາຂ່າຍໄຟຟ້າອອກ .no-gutters
ແລະນໍາໃຊ້ .col-md-*
ຫ້ອງຮຽນເພື່ອເຮັດໃຫ້ບັດອອກຕາມລວງນອນຢູ່ md
breakpoint ໄດ້. ອາດຈະຈໍາເປັນຕ້ອງມີການປັບປ່ຽນຕື່ມ ຂຶ້ນກັບເນື້ອໃນບັດຂອງທ່ານ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຮູບແບບບັດ
ບັດປະກອບມີທາງເລືອກຕ່າງໆສໍາລັບການປັບແຕ່ງພື້ນຫລັງ, ຂອບ, ແລະສີ.
ພື້ນຫລັງແລະສີ
ໃຊ້ ຕົວໜັງສື ແລະພື້ນຫຼັງ ເພື່ອປ່ຽນຮູບແບບຂອງບັດ.
ຊື່ບັດຕົ້ນຕໍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຮອງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດອັນຕະລາຍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດເຕືອນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຂໍ້ມູນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດແສງສະຫວ່າງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຊ້ໍາ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-only
ຊັ້ນ.
ຊາຍແດນ
ໃຊ້ ອຸ ປະກອນຊາຍແດນ ເພື່ອປ່ຽນພຽງແຕ່ border-color
ບັດ. ໃຫ້ສັງເກດວ່າທ່ານສາມາດວາງ .text-{color}
ຊັ້ນຮຽນຢູ່ໃນພໍ່ແມ່ .card
ຫຼືຊຸດຍ່ອຍຂອງເນື້ອໃນຂອງບັດດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້.
ຊື່ບັດຕົ້ນຕໍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຮອງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດອັນຕະລາຍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດເຕືອນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຂໍ້ມູນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດແສງສະຫວ່າງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຊ້ໍາ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຜົນປະໂຫຍດ Mixins
ນອກນັ້ນທ່ານຍັງສາມາດປ່ຽນຂອບເຂດໃນຫົວບັດແລະສ່ວນທ້າຍຂອງບັດໄດ້ຕາມຄວາມຕ້ອງການ, ແລະເຖິງແມ່ນວ່າເອົາຂອງພວກເຂົາ background-color
ກັບ .bg-transparent
.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ແຜນຜັງບັດ
ນອກເໜືອໄປຈາກການຈັດຮູບແບບເນື້ອຫາພາຍໃນບັດ, Bootstrap ລວມມີຕົວເລືອກຈຳນວນໜຶ່ງສຳລັບການວາງຊຸດຂອງບັດ. ສໍາລັບເວລານີ້, ທາງເລືອກການຈັດວາງເຫຼົ່ານີ້ຍັງບໍ່ທັນຕອບສະຫນອງ .
ກຸ່ມບັດ
ໃຊ້ກຸ່ມບັດເພື່ອສະແດງບັດເປັນອົງປະກອບດຽວທີ່ຕິດຄັດມາກັບຖັນຄວາມກວ້າງແລະຄວາມສູງເທົ່າທຽມກັນ. ກຸ່ມບັດເລີ່ມຕົ້ນຈາກ stacked ແລະນໍາໃຊ້ display: flex;
ເພື່ອຕິດຢູ່ກັບຂະຫນາດທີ່ເປັນເອກະພາບເລີ່ມຕົ້ນທີ່ sm
breakpoint.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ເມື່ອໃຊ້ກຸ່ມບັດທີ່ມີສ່ວນທ້າຍ, ເນື້ອຫາຂອງພວກມັນຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ຕູ້ບັດ
ຕ້ອງການຊຸດບັດຄວາມກວ້າງແລະຄວາມສູງເທົ່າກັນທີ່ບໍ່ຕິດກັນບໍ? ໃຊ້ບັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຄືກັນກັບກຸ່ມບັດ, ສ່ວນທ້າຍບັດໃນດາດຟ້າຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ບັດຕາຂ່າຍ
ໃຊ້ລະບົບຕາຕະລາງ Bootstrap ແລະ .row-cols
ຫ້ອງຮຽນ ຂອງມັນ ເພື່ອຄວບຄຸມຈໍານວນຖັນຕາຂ່າຍໄຟຟ້າ (ຫໍ່ຢູ່ອ້ອມບັດຂອງທ່ານ) ທີ່ທ່ານສະແດງຕໍ່ແຖວ. ຕົວຢ່າງ, ນີ້ແມ່ນ .row-cols-1
ການຈັດວາງບັດຢູ່ໃນຖັນຫນຶ່ງ, ແລະ .row-cols-md-2
ແຍກສີ່ບັດໃຫ້ຄວາມກວ້າງເທົ່າທຽມກັນໃນທົ່ວຫຼາຍແຖວ, ຈາກຈຸດແບ່ງຂະຫນາດກາງຂຶ້ນ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ປ່ຽນມັນໄປ .row-cols-3
ແລ້ວເຈົ້າຈະເຫັນບັດທີ່ສີ່ຫໍ່.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ເມື່ອທ່ານຕ້ອງການຄວາມສູງເທົ່າທຽມກັນ, ເພີ່ມ .h-100
ໃສ່ບັດ. ຖ້າທ່ານຕ້ອງການຄວາມສູງເທົ່າທຽມກັນໂດຍຄ່າເລີ່ມຕົ້ນ, ທ່ານສາມາດກໍານົດ $card-height: 100%
ໃນ Sass.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຖັນບັດ
ບັດສາມາດຖືກຈັດເປັນ ຖັນຄ້າຍຄື Masonry ມີພຽງແຕ່ CSS ໂດຍການຫໍ່ພວກມັນຢູ່ໃນ .card-columns
. ບັດຖືກສ້າງຂຶ້ນດ້ວຍຄຸນສົມບັດ CSS column
ແທນ flexbox ເພື່ອການຈັດຕໍາແຫນ່ງທີ່ງ່າຍຂຶ້ນ. ບັດແມ່ນຈັດລໍາດັບຈາກເທິງລົງລຸ່ມແລະຊ້າຍໄປຂວາ.
ລະວັງ! ໄລຍະທາງຂອງທ່ານກັບຖັນບັດອາດຈະແຕກຕ່າງກັນ. ເພື່ອປ້ອງກັນບໍ່ໃຫ້ບັດແຕກຂ້າມຖັນ, ພວກເຮົາຕ້ອງຕັ້ງພວກມັນໃຫ້ display: inline-block
ເປັນ column-break-inside: avoid
ວິທີແກ້ລູກປືນ.
ຊື່ບັດທີ່ຕັດໄປແຖວໃໝ່
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ຈໍານວນເຕັມ posuere erat.
ຊື່ບັດ
ບັດນີ້ມີຫົວຂໍ້ປົກກະຕິ ແລະຫຍໍ້ໜ້າສັ້ນຂອງຂໍ້ຄວາມຢູ່ລຸ່ມນີ້.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ຊື່ບັດ
ນີ້ແມ່ນບັດອີກອັນໜຶ່ງທີ່ມີຊື່ ແລະຂໍ້ຄວາມທີ່ຮອງຮັບຢູ່ລຸ່ມນີ້. ບັດນີ້ມີເນື້ອໃນເພີ່ມເຕີມເພື່ອເຮັດໃຫ້ມັນສູງເລັກນ້ອຍໂດຍລວມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຖັນບັດຍັງສາມາດຂະຫຍາຍອອກ ແລະປັບແຕ່ງດ້ວຍລະຫັດເພີ່ມເຕີມບາງຢ່າງ. ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້ແມ່ນສ່ວນຂະຫຍາຍຂອງ .card-columns
ຫ້ອງຮຽນໂດຍໃຊ້ CSS ດຽວກັນທີ່ພວກເຮົາໃຊ້ - ຖັນ CSS - ເພື່ອສ້າງຊຸດຂອງຊັ້ນຕອບສະຫນອງສໍາລັບການປ່ຽນຈໍານວນຖັນ.