Sourceບັດ
ບັດຂອງ 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
ເພີ່ມສ່ວນຫົວທາງເລືອກ ແລະ/ຫຼືສ່ວນທ້າຍພາຍໃນບັດ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ສ່ວນ ຫົວບັດສາມາດຖືກຈັດຮູບແບບໂດຍການເພີ່ມ .card-header
ໃສ່ <h*>
ອົງປະກອບ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ບັດຖືວ່າບໍ່ສະເພາະ width
ເພື່ອເລີ່ມຕົ້ນ, ສະນັ້ນພວກມັນຈະກວ້າງ 100% ເວັ້ນເສຍແຕ່ໄດ້ລະບຸໄວ້ເປັນຢ່າງອື່ນ. ທ່ານສາມາດປ່ຽນແປງອັນນີ້ໄດ້ຕາມຄວາມຕ້ອງການທີ່ມີ CSS ທີ່ກໍານົດໄວ້, ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າ, grid Sass mixins, ຫຼືອຸປະກອນ.
ການນໍາໃຊ້ເຄື່ອງຫມາຍຕາຕະລາງ
ການນໍາໃຊ້ຕາຂ່າຍໄຟຟ້າ, ຫໍ່ບັດໃນຖັນແລະແຖວຕາມຄວາມຕ້ອງການ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ໃຊ້ເຄື່ອງມືການ ປັບຂະໜາດທີ່ມີຢູ່ ຂອງພວກເຮົາ ເພື່ອກຳນົດຄວາມກວ້າງຂອງບັດຢ່າງໄວວາ.
ຊື່ບັດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ປຸ່ມ
ຊື່ບັດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ປຸ່ມ
ໃຊ້ CSS ແບບກຳນົດເອງໃນສະໄຕລ໌ຊີດຂອງເຈົ້າ ຫຼືເປັນຮູບແບບໃນແຖວເພື່ອກຳນົດຄວາມກວ້າງ.
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ທ່ານສາມາດປ່ຽນການຈັດວາງຂໍ້ຄວາມຂອງບັດໄດ້ຢ່າງວ່ອງໄວ — ໃນທັງຫມົດຫຼືພາກສ່ວນສະເພາະຂອງມັນ — ກັບ ຫ້ອງຮຽນການຈັດຂໍ້ຄວາມ ຂອງພວກເຮົາ .
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ເພີ່ມການນໍາທາງບາງຢ່າງໃສ່ສ່ວນຫົວຂອງບັດ (ຫຼືບລັອກ) ດ້ວຍ ອົງປະກອບ navigation ຂອງ Bootstrap .
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ການປິ່ນປົວຫົວຂໍ້ພິເສດ
ດ້ວຍຂໍ້ຄວາມທີ່ສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ.
ໄປບ່ອນໃດບ່ອນນຶ່ງ
ບັດປະກອບມີທາງເລືອກຈໍານວນຫນ້ອຍສໍາລັບການເຮັດວຽກກັບຮູບພາບ. ເລືອກຈາກ “ໝວກຮູບ” ໃສ່ທ້າຍບັດ, ວາງຮູບພາບທີ່ມີເນື້ອໃນບັດ, ຫຼືພຽງແຕ່ຝັງຮູບໃສ່ໃນບັດ.
ຄ້າຍກັບສ່ວນຫົວ ແລະສ່ວນທ້າຍ, ບັດສາມາດລວມເອົາ “ຮູບໃສ່ຫົວ” ເທິງ ແລະລຸ່ມ—ຮູບພາບຢູ່ເທິງ ຫຼື ລຸ່ມສຸດຂອງບັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ປ່ຽນຮູບໃຫ້ເປັນພື້ນຫຼັງບັດ ແລະວາງທັບຂໍ້ຄວາມໃນບັດຂອງເຈົ້າ. ອີງຕາມຮູບພາບ, ທ່ານອາດຈະຕ້ອງການຫຼືບໍ່ຕ້ອງການຮູບແບບຫຼືປະໂຫຍດເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ບັດປະກອບມີທາງເລືອກຕ່າງໆສໍາລັບການປັບແຕ່ງພື້ນຫລັງ, ຂອບ, ແລະສີ.
ໃຊ້ ຕົວໜັງສື ແລະພື້ນຫຼັງ ເພື່ອປ່ຽນຮູບແບບຂອງບັດ.
ຊື່ບັດຕົ້ນຕໍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຮອງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດອັນຕະລາຍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດເຕືອນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຂໍ້ມູນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດແສງສະຫວ່າງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຊ້ໍາ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-only
ຊັ້ນ.
ໃຊ້ ອຸ ປະກອນຊາຍແດນ ເພື່ອປ່ຽນພຽງແຕ່ border-color
ບັດ. ໃຫ້ສັງເກດວ່າທ່ານສາມາດວາງ .text-{color}
ຊັ້ນຮຽນຢູ່ໃນພໍ່ແມ່ .card
ຫຼືຊຸດຍ່ອຍຂອງເນື້ອໃນຂອງບັດດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້.
ຊື່ບັດຕົ້ນຕໍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຮອງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດອັນຕະລາຍ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດເຕືອນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຂໍ້ມູນ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດແສງສະຫວ່າງ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ຊື່ບັດຊ້ໍາ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ນອກນັ້ນທ່ານຍັງສາມາດປ່ຽນຂອບເຂດໃນຫົວບັດແລະສ່ວນທ້າຍຂອງບັດໄດ້ຕາມຄວາມຕ້ອງການ, ແລະເຖິງແມ່ນວ່າເອົາຂອງພວກເຂົາ background-color
ກັບ .bg-transparent
.
ຫົວຂໍ້ບັດສໍາເລັດ
ຂໍ້ຄວາມຕົວຢ່າງໄວບາງອັນເພື່ອສ້າງໃສ່ຊື່ບັດ ແລະປະກອບເປັນສ່ວນໃຫຍ່ຂອງເນື້ອໃນຂອງບັດ.
ນອກເໜືອໄປຈາກການຈັດຮູບແບບເນື້ອຫາພາຍໃນບັດ, Bootstrap ລວມມີຕົວເລືອກຈຳນວນໜຶ່ງສຳລັບການວາງຊຸດຂອງບັດ. ສໍາລັບເວລານີ້, ທາງເລືອກການຈັດວາງເຫຼົ່ານີ້ຍັງບໍ່ທັນຕອບສະຫນອງ .
ໃຊ້ກຸ່ມບັດເພື່ອສະແດງບັດເປັນອົງປະກອບດຽວທີ່ຕິດຄັດມາກັບຖັນຄວາມກວ້າງແລະຄວາມສູງເທົ່າທຽມກັນ. ກຸ່ມບັດໃຊ້ display: flex;
ເພື່ອບັນລຸຂະໜາດທີ່ເປັນເອກະພາບ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ເມື່ອໃຊ້ກຸ່ມບັດທີ່ມີສ່ວນທ້າຍ, ເນື້ອຫາຂອງພວກມັນຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ຕ້ອງການຊຸດບັດຄວາມກວ້າງແລະຄວາມສູງເທົ່າກັນທີ່ບໍ່ຕິດກັນບໍ? ໃຊ້ບັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ຍາວກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ອັບເດດຫຼ້າສຸດ 3 ນາທີກ່ອນ
ຄືກັນກັບກຸ່ມບັດ, ສ່ວນທ້າຍບັດໃນດາດຟ້າຈະຕັ້ງແຖວໂດຍອັດຕະໂນມັດ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ເນື້ອຫານີ້ແມ່ນຍາວເລັກນ້ອຍ.
ຊື່ບັດ
ບັດນີ້ມີຂໍ້ຄວາມສະໜັບສະໜຸນຢູ່ລຸ່ມນີ້ ເປັນການນຳທາງທຳມະຊາດໄປຫາເນື້ອຫາເພີ່ມເຕີມ.
ຊື່ບັດ
ນີ້ແມ່ນບັດທີ່ກວ້າງກວ່າທີ່ມີຂໍ້ຄວາມສະຫນັບສະຫນູນຂ້າງລຸ່ມນີ້ເປັນການນໍາພາທໍາມະຊາດໄປສູ່ເນື້ອຫາເພີ່ມເຕີມ. ບັດນີ້ມີເນື້ອຫາຍາວກວ່າອັນທຳອິດເພື່ອສະແດງການກະທຳທີ່ມີຄວາມສູງເທົ່າທຽມກັນ.
ບັດສາມາດຖືກຈັດເປັນ ຖັນຄ້າຍຄື 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 - ເພື່ອສ້າງຊຸດຂອງຊັ້ນຕອບສະຫນອງສໍາລັບການປ່ຽນຈໍານວນຖັນ.