ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ
Check
ໃໝ່ໃນ v5.2 CSS variables, responsive offcanvas, utilities ໃຫມ່, ແລະຫຼາຍ! Bootstrap

ສ້າງເວັບໄຊທີ່ໄວ, ຕອບສະໜອງດ້ວຍ Bootstrap

ຊຸດເຄື່ອງມືດ້ານໜ້າທີ່ມີປະສິດທິພາບ, ສາມາດຂະຫຍາຍໄດ້, ແລະເຕັມໄປດ້ວຍຄຸນສົມບັດ. ສ້າງແລະປັບແຕ່ງດ້ວຍ Sass, ນໍາໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າແລະອົງປະກອບທີ່ສ້າງຂຶ້ນກ່ອນ, ແລະນໍາເອົາໂຄງການໄປສູ່ຊີວິດດ້ວຍ plugins JavaScript ທີ່ມີປະສິດທິພາບ.

npm i [email protected]
ອ່ານເອກະສານ

ປະຈຸບັນ v5.2.1 · ດາວໂຫລດ · v4.6.x docs · ທຸກລຸ້ນ

ເລີ່ມຕົ້ນດ້ວຍວິທີໃດກໍ່ຕາມທີ່ທ່ານຕ້ອງການ

ໂດດເຂົ້າໄປໃນການກໍ່ສ້າງດ້ວຍ Bootstrap - ໃຊ້ CDN, ຕິດຕັ້ງມັນຜ່ານຕົວຈັດການຊຸດ, ຫຼືດາວໂຫລດລະຫັດແຫຼ່ງ.

ອ່ານເອກະສານການຕິດຕັ້ງ

ຕິດຕັ້ງຜ່ານຕົວຈັດການຊຸດ

ຕິດຕັ້ງໄຟລ໌ Sass ແລະ JavaScript ແຫຼ່ງຂອງ Bootstrap ຜ່ານ npm, RubyGems, Composer, ຫຼື Meteor. ການຕິດຕັ້ງທີ່ຈັດການແພັກເກດບໍ່ລວມເອົາເອກະສານ ຫຼືຕົວສ້າງອັນເຕັມທີ່ຂອງພວກເຮົາ. ທ່ານຍັງສາມາດ ໃຊ້ npm template repo ຂອງພວກເຮົາ ເພື່ອສ້າງໂຄງການ Bootstrap ຢ່າງໄວວາຜ່ານ npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

ອ່ານເອກະສານການຕິດຕັ້ງຂອງພວກເຮົາ ສຳລັບຂໍ້ມູນເພີ່ມເຕີມ ແລະຜູ້ຈັດການແພັກເກດເພີ່ມເຕີມ.

ລວມຜ່ານ CDN

ເມື່ອທ່ານພຽງແຕ່ຕ້ອງການລວມເອົາ CSS ຫຼື JS ຂອງ Bootstrap, ທ່ານສາມາດນໍາໃຊ້ jsDelivr . ເບິ່ງມັນຢູ່ໃນການປະຕິບັດດ້ວຍ ການເລີ່ມຕົ້ນ ທີ່ງ່າຍດາຍຂອງພວກເຮົາ , ຫຼື ເບິ່ງຕົວຢ່າງ ເພື່ອເຕັ້ນໄປຫາໂຄງການຕໍ່ໄປຂອງທ່ານ. ນອກນັ້ນທ່ານຍັງສາມາດເລືອກທີ່ຈະລວມ Popper ແລະ JS ຂອງພວກເຮົາ ແຍກຕ່າງຫາກ .

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

ອ່ານຄູ່ມືເລີ່ມຕົ້ນຂອງພວກເຮົາ

ກ້າວໄປເຖິງການລວມເອົາໄຟລ໌ແຫຼ່ງຂອງ Bootstrap ໃນໂຄງການໃໝ່ດ້ວຍຄູ່ມືທີ່ເປັນທາງການຂອງພວກເຮົາ.

Webpack ພັດສະດຸ ວີທີ

ປັບແຕ່ງທຸກຢ່າງດ້ວຍ Sass

Bootstrap ໃຊ້ Sass ສໍາລັບສະຖາປັດຕະຍະກໍາແບບໂມດູລາແລະປັບແຕ່ງໄດ້. ນໍາເຂົ້າພຽງແຕ່ອົງປະກອບທີ່ທ່ານຕ້ອງການ, ເປີດໃຊ້ທາງເລືອກທົ່ວໂລກເຊັ່ນ: gradients ແລະ shadows, ແລະຂຽນ CSS ຂອງທ່ານເອງກັບຕົວແປຂອງພວກເຮົາ, ແຜນທີ່, ຫນ້າທີ່ແລະ mixins.

ສຶກສາເພີ່ມເຕີມກ່ຽວກັບການປັບແຕ່ງ

ລວມເອົາທັງໝົດຂອງ Bootstrap's Sass

ນຳເຂົ້າໜຶ່ງແຜ່ນສະໄຕລ໌ ແລະເຈົ້າໄປແຂ່ງກັບທຸກຄຸນສົມບັດຂອງ CSS ຂອງພວກເຮົາ.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

ສຶກສາເພີ່ມເຕີມກ່ຽວກັບ ຕົວເລືອກ Sass ທົ່ວໂລກ ຂອງພວກເຮົາ .

ລວມເອົາສິ່ງທີ່ທ່ານຕ້ອງການ

ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະປັບແຕ່ງ Bootstrap - ປະກອບມີພຽງແຕ່ CSS ທີ່ທ່ານຕ້ອງການ.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ ການໃຊ້ Bootstrap ກັບ Sass .

ສ້າງແລະຂະຫຍາຍໃນເວລາຈິງດ້ວຍຕົວແປ CSS

Bootstrap 5 ກໍາລັງພັດທະນາກັບແຕ່ລະລຸ້ນເພື່ອນໍາໃຊ້ຕົວແປ CSS ທີ່ດີກວ່າສໍາລັບຮູບແບບຫົວຂໍ້ທົ່ວໂລກ, ອົງປະກອບສ່ວນບຸກຄົນ, ແລະແມ້ກະທັ້ງປະໂຫຍດ. ພວກເຮົາສະຫນອງຕົວແປຫຼາຍສິບຕົວສໍາລັບສີ, ຮູບແບບຕົວອັກສອນ, ແລະອື່ນໆໃນ :rootລະດັບສໍາລັບການນໍາໃຊ້ທຸກບ່ອນ. ກ່ຽວກັບອົງປະກອບແລະຜົນປະໂຫຍດ, ຕົວແປ CSS ແມ່ນກໍານົດຂອບເຂດຂອງຊັ້ນທີ່ກ່ຽວຂ້ອງແລະສາມາດດັດແປງໄດ້ງ່າຍ.

ສຶກສາເພີ່ມເຕີມກ່ຽວກັບຕົວແປ CSS

ການນໍາໃຊ້ຕົວແປ CSS

ໃຊ້ ຕົວແປ ທົ່ວໂລກ:root ຂອງພວກເຮົາ ເພື່ອຂຽນຮູບແບບໃໝ່. ຕົວແປ CSS ໃຊ້ var(--bs-variableName)syntax ແລະສາມາດສືບທອດໂດຍອົງປະກອບຂອງເດັກນ້ອຍ.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

ປັບແຕ່ງຜ່ານຕົວແປ CSS

ລົບລ້າງຕົວແປລະດັບໂລກ, ອົງປະກອບ, ຫຼືປະໂຫຍດເພື່ອປັບແຕ່ງ Bootstrap ຕາມທີ່ທ່ານຕ້ອງການ. ບໍ່ຈໍາເປັນຕ້ອງປະກາດໃຫມ່ແຕ່ລະກົດລະບຽບ, ພຽງແຕ່ຄ່າຕົວແປໃຫມ່.

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

ອົງປະກອບ, ຕອບສະຫນອງ Utility API

ໃໝ່ໃນ Bootstrap 5, ຜົນປະໂຫຍດຂອງພວກເຮົາແມ່ນສ້າງຂື້ນໂດຍ Utility API ຂອງພວກເຮົາ . ພວກເຮົາສ້າງມັນເປັນແຜນທີ່ Sass ທີ່ມີຄຸນສົມບັດທີ່ສາມາດປັບແຕ່ງໄດ້ໄວ ແລະງ່າຍດາຍ. ມັນບໍ່ເຄີຍງ່າຍກວ່າທີ່ຈະເພີ່ມ, ເອົາອອກ, ຫຼືແກ້ໄຂຫ້ອງຮຽນຜົນປະໂຫຍດໃດໆ. ເຮັດ​ໃຫ້​ສາ​ທາ​ລະ​ນະ​ສຸກ​ຕອບ​ສະ​ຫນອງ​, ເພີ່ມ pseudo​-class variants​, ແລະ​ໃຫ້​ເຂົາ​ເຈົ້າ​ຊື່​ທີ່​ກໍາ​ນົດ​ເອງ​.

ສຶກສາເ���ີ່ມເຕີມກ່ຽວກັບເຄື່ອງໃຊ້ຕ່າງໆ ສຳຫຼວດອົງປະກອບທີ່ກຳນົດເອງ

ປັບແຕ່ງອົງປະກອບຢ່າງໄວວາ
// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

plugins JavaScript ທີ່ມີປະສິດທິພາບໂດຍບໍ່ມີ jQuery

ເພີ່ມອົງປະກອບທີ່ເຊື່ອງໄວ້, modals ແລະ offcanvas ທີ່ປ່ຽນໄດ້ຢ່າງງ່າຍດາຍ, popovers ແລະຄໍາແນະນໍາເຄື່ອງມື, ແລະອື່ນໆອີກ - ທັງຫມົດໂດຍບໍ່ມີການ jQuery. JavaScript ໃນ Bootstrap ແມ່ນ HTML ທໍາອິດ, ຊຶ່ງຫມາຍຄວາມວ່າການເພີ່ມ plugins ແມ່ນງ່າຍເທົ່າກັບການເພີ່ມ dataຄຸນລັກສະນະ. ຕ້ອງ​ການ​ຄວບ​ຄຸມ​ເພີ່ມ​ເຕີມ​? ຮວມເອົາປລັກອິນແຕ່ລະອັນເປັນໂປຣແກຣມ.

ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ Bootstrap JavaScript

API ຄຸນລັກສະນະຂໍ້ມູນ

ເປັນຫຍັງຕ້ອງຂຽນ JavaScript ຫຼາຍຂຶ້ນເມື່ອເຈົ້າສາມາດຂຽນ HTML? ເກືອບທັງຫມົດຂອງ plugins JavaScript ຂອງ Bootstrap ມີ API ຂໍ້ມູນຊັ້ນທໍາອິດ, ໃຫ້ທ່ານສາມາດນໍາໃຊ້ JavaScript ໂດຍການເພີ່ມ dataຄຸນລັກສະນະ.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບ JavaScript ຂອງພວກເຮົາເປັນໂມດູນ ແລະ ການນໍາໃຊ້ API ໂປຣແກຣມ .

ຊຸດ plugins ທີ່ສົມບູນແບບ

Bootstrap ມີ plugins ຫຼາຍສິບອັນທີ່ທ່ານສາມາດລົງໃນໂຄງການໃດກໍ່ຕາມ. ວາງພວກມັນທັງໝົດໃນຄັ້ງດຽວ, ຫຼືເລືອກພຽງແຕ່ອັນທີ່ທ່ານຕ້ອງການ.

ແຈ້ງເຕືອນ

ສະແດງ ແລະເຊື່ອງຂໍ້ຄວາມແຈ້ງເຕືອນໃຫ້ກັບຜູ້ໃຊ້ຂອງທ່ານ.

ປຸ່ມ

ຄວບຄຸມສະຖານະທີ່ໃຊ້ວຽກເປັນໂປຣແກຣມສຳລັບປຸ່ມຕ່າງໆ.

Carousel

ເພີ່ມ slideshows ກັບຫນ້າໃດກໍ່ຕາມ, ລວມທັງການສະຫນັບສະຫນູນ crossfade.

ຫຍໍ້ລົງ

ຂະຫຍາຍແລະຫຍໍ້ພື້ນທີ່ຂອງເນື້ອຫາ, ຫຼືສ້າງ accordions.

ເລື່ອນລົງ

ສ້າງເມນູຂອງການເຊື່ອມຕໍ່, ການປະຕິບັດ, ແບບຟອມ, ແລະອື່ນໆ.

Modal

ເພີ່ມກ່ອງໂຕ້ຕອບແບບຍືດຫຍຸ່ນ ແລະຕອບສະໜອງໃຫ້ກັບໂຄງການຂອງທ່ານ.

ຜ້າໃບ

ສ້າງແລະສະຫຼັບແຖບຂ້າງທີ່ເຊື່ອງໄວ້ເຂົ້າໄປໃນຫນ້າໃດໆ.

Popover

ສ້າງການວາງຊ້ອນແບບກຳນົດເອງ. ສ້າງຂຶ້ນໃນ Popper.

ເລື່ອນ

ອັບເດດລິ້ງ nav ທີ່ໃຊ້ໄດ້ໂດຍອັດຕະໂນມັດໂດຍອີງໃສ່ການເລື່ອນໜ້າ.

ແຖບ

ອະນຸຍາດໃຫ້ອົງປະກອບຂອງ Bootstrap nav ເພື່ອສະຫຼັບເນື້ອຫາ.

ເຂົ້າຈີ່

ສະແດງ ແລະເຊື່ອງການແຈ້ງເຕືອນໃຫ້ຜູ້ເຂົ້າຊົມຂອງທ່ານ.

ຄຳແນະນຳ

ແທນທີ່ຄໍາແນະນໍາຂອງຕົວທ່ອງເວັບດ້ວຍຄໍາແນະນໍາທີ່ກໍາຫນົດເອງ. ສ້າງຂຶ້ນໃນ Popper.

ປັບແຕ່ງມັນດ້ວຍ Bootstrap Icons

Bootstrap Icons ເປັນແຫຼ່ງເປີດຫ້ອງສະໝຸດ SVG icon ທີ່ມີຫຼາຍກວ່າ 1,500 glyphs, ມີການເພີ່ມຫຼາຍກວ່າທຸກລຸ້ນ. ພວກມັນຖືກອອກແບບມາເພື່ອເຮັດວຽກໃນໂຄງການໃດກໍ່ຕາມ, ບໍ່ວ່າທ່ານຈະໃຊ້ Bootstrap ຕົວມັນເອງຫຼືບໍ່. ໃຊ້ພວກມັນເປັນ SVGs ຫຼືໄອຄອນຟອນ - ທັງສອງທາງເລືອກໃຫ້ຂະ ໜາດ vector ແລະການປັບແຕ່ງງ່າຍຜ່ານ CSS.

ເອົາໄອຄອນ Bootstrap

ໄອຄອນ Bootstrap

ເຮັດໃຫ້ມັນເປັນຂອງເຈົ້າດ້ວຍຫົວຂໍ້ Bootstrap ຢ່າງເປັນທາງການ

ເອົາ Bootstrap ໄປສູ່ລະດັບຕໍ່ໄປດ້ວຍຫົວຂໍ້ທີ່ນິຍົມຈາກຕະຫຼາດ Bootstrap Themes ຢ່າງເປັນທາງການ . ຮູບແບບສີສັນຖືກສ້າງຂຶ້ນໃນ Bootstrap ເປັນກອບການຂະຫຍາຍຂອງຕົນເອງ, ອຸດົມສົມບູນດ້ວຍອົງປະກອບໃຫມ່ແລະ plugins, ເອກະສານ, ແລະເຄື່ອງມືສ້າງທີ່ມີປະສິດທິພາບ.

ຊອກຫາຫົວຂໍ້ Bootstrap

ຫົວຂໍ້ Bootstrap