ตัวแปร CSS, offcanvas ที่ตอบสนอง, ยูทิลิตี้ใหม่ และอีกมากมาย!

สร้างไซต์ที่รวดเร็วและตอบสนองด้วย Bootstrap

ชุดเครื่องมือส่วนหน้าที่ทรงพลัง ขยายได้ และเต็มไปด้วยคุณสมบัติ สร้างและปรับแต่งด้วย Sass ใช้ระบบกริดและส่วนประกอบที่สร้างไว้ล่วงหน้า และทำให้โครงการมีชีวิตด้วยปลั๊กอิน JavaScript อันทรงพลัง

npm i [email protected]

อ่านเอกสาร

ปัจจุบันv5.2.1 · ดาวน์โหลด · v4.6.x docs · ทุกรุ่น

เริ่มต้นในแบบที่คุณต้องการ

เข้าสู่อาคารด้วย Bootstrap ได้เลย—ใช้ CDN, ติดตั้งผ่านตัวจัดการแพ็คเกจ หรือดาวน์โหลดซอร์สโค้ด

อ่านเอกสารการติดตั้ง

ติดตั้งผ่านตัวจัดการแพ็คเกจ

ติดตั้งไฟล์ Sass และ JavaScript ต้นทางของ Bootstrap ผ่าน npm, RubyGems, Composer หรือ Meteor การติดตั้งที่จัดการโดยแพ็กเกจจะไม่รวมเอกสารประกอบหรือสคริปต์บิลด์ฉบับสมบูรณ์ของเรา คุณยังสามารถใช้ repo เทมเพลต npm ของเราเพื่อสร้างโปรเจ็กต์ 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 ในโครงการใหม่ด้วยคำแนะนำอย่างเป็นทางการของเรา

เว็บแพ็ค

พัสดุ

Vite

ปรับแต่งทุกอย่างด้วย Sass

Bootstrap ใช้ Sass สำหรับสถาปัตยกรรมแบบแยกส่วนและปรับแต่งได้ นำเข้าเฉพาะส่วนประกอบที่คุณต้องการ เปิดใช้งานตัวเลือกส่วนกลาง เช่น การไล่ระดับสีและเงา และเขียน CSS ของคุณเองด้วยตัวแปร แผนที่ ฟังก์ชัน และมิกซ์อินของเรา

เรียนรู้เพิ่มเติมเกี่ยวกับการปรับแต่ง

รวม Sass . ของ Bootstrap ทั้งหมด

นำเข้าหนึ่งสไตล์ชีตและคุณจะเข้าสู่การแข่งขันด้วยคุณลักษณะทุกอย่างของ 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)ไวยากรณ์และสามารถสืบทอดโดยองค์ประกอบลูก

.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;
}

ส่วนประกอบตรงตามยูทิลิตี้ API

ใหม่ใน Bootstrap 5 ยูทิลิตี้ของเราถูกสร้างขึ้นโดยUtility APIของ เรา เราสร้างเป็นแผนที่ Sass ที่มีคุณลักษณะครบถ้วนซึ่งสามารถปรับแต่งได้อย่างรวดเร็วและง่ายดาย การเพิ่ม ลบ หรือแก้ไขคลาสยูทิลิตี้ไม่เคยง่ายอย่างนี้มาก่อน ทำให้ยูทิลิตี้ตอบสนอง เพิ่มตัวแปรคลาสหลอก และตั้งชื่อที่กำหนดเอง

เรียนรู้��พิ่มเติมเกี่ยวกับสาธารณูปโภค สำรวจส่วนประกอบที่กำหนดเอง

ปรับแต่งส่วนประกอบได้อย่างรวดเร็ว

// 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,
    )
  )
);

ปลั๊กอิน JavaScript อันทรงพลังที่ไม่มี jQuery

เพิ่มองค์ประกอบที่ซ่อนอยู่ที่สลับได้ โมดอลและเมนูออฟแคนวาส ป๊อปโอเวอร์และคำแนะนำเครื่องมือ และอื่นๆ อีกมากมาย—ทั้งหมดนี้ไม่มี jQuery JavaScript ใน Bootstrap เป็น HTML ก่อน ซึ่งหมายความว่าการเพิ่มปลั๊กอินทำได้ง่ายเหมือนกับการเพิ่มdataแอตทริบิวต์ ต้องการการควบคุมเพิ่มเติมหรือไม่? รวมปลั๊กอินแต่ละรายการโดยทางโปรแกรม

เรียนรู้เพิ่มเติมเกี่ยวกับ Bootstrap JavaScript

แอตทริบิวต์ข้อมูล API

ทำไมต้องเขียน JavaScript มากขึ้นเมื่อคุณสามารถเขียน HTML ได้ ปลั๊กอิน 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 แบบเป็นโปรแกรม

ชุดปลั๊กอินที่ครอบคลุม

Bootstrap มีปลั๊กอินมากมายที่คุณสามารถวางลงในโปรเจ็กต์ใดก็ได้ วางทั้งหมดพร้อมกัน หรือเลือกเฉพาะสิ่งที่คุณต้องการ

ปรับแต่งด้วย Bootstrap Icons

Bootstrap Iconsเป็นไลบรารีไอคอน SVG แบบโอเพนซอร์สที่มีร่ายมนตร์มากกว่า 1,500 แบบ พร้อมเพิ่มทุกรีลีส ออกแบบมาเพื่อทำงานในทุกโครงการ ไม่ว่าคุณจะใช้ Bootstrap เองหรือไม่ก็ตาม ใช้เป็น SVG หรือแบบอักษรของไอคอน—ทั้งสองตัวเลือกช่วยให้คุณปรับขนาดเวกเตอร์และปรับแต่งได้ง่ายผ่าน CSS

รับไอคอน Bootstrap

ทำให้เป็นของคุณด้วย Bootstrap Themes อย่างเป็นทางการ

นำ Bootstrap ไปสู่อีกระดับด้วยธีมพรีเมียมจากตลาดBootstrap Themes อย่างเป็นทางการ ธีมต่างๆ สร้างขึ้นบน Bootstrap เป็นเฟรมเวิร์กที่ขยายออกไป เต็มไปด้วยส่วนประกอบและปลั๊กอินใหม่ เอกสารประกอบ และเครื่องมือสร้างอันทรงพลัง

เรียกดูธีม Bootstrap

สร้างไซต์ที่รวดเร็วและตอบสนองด้วย Bootstrap

เริ่มต้นในแบบที่คุณต้องการ

ติดตั้งผ่านตัวจัดการแพ็คเกจ

รวมผ่าน CDN

อ่านคู่มือการเริ่มต้นใช้งานของเรา

ปรับแต่งทุกอย่างด้วย Sass

รวม Sass . ของ Bootstrap ทั้งหมด

รวมสิ่งที่คุณต้องการ

สร้างและขยายแบบเรียลไทม์ด้วยตัวแปร CSS

การใช้ตัวแปร CSS

การปรับแต่งผ่านตัวแปร CSS

ส่วนประกอบตรงตามยูทิลิตี้ API

ปรับแต่งส่วนประกอบได้อย่างรวดเร็ว

ปลั๊กอิน JavaScript อันทรงพลังที่ไม่มี jQuery

แอตทริบิวต์ข้อมูล API

ชุดปลั๊กอินที่ครอบคลุม

เตือน

ปุ่ม

ม้าหมุน

ทรุด

หล่นลง

โมดอล

ออฟแคนวาส

ป๊อปโอเวอร์

Scrollspy

แท็บ

ขนมปังปิ้ง

เคล็ดลับเครื่องมือ

ปรับแต่งด้วย Bootstrap Icons

ทำให้เป็นของคุณด้วย Bootstrap Themes อย่างเป็นทางการ