ชุดเครื่องมือส่วนหน้าที่ทรงพลัง ขยายได้ และเต็มไปด้วยคุณสมบัติ สร้างและปรับแต่งด้วย 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อ่านเอกสารการติดตั้งของเราสำหรับข้อมูลเพิ่มเติมและตัวจัดการแพ็คเกจเพิ่มเติม
เมื่อคุณต้องการรวม 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 ใช้ Sass สำหรับสถาปัตยกรรมแบบแยกส่วนและปรับแต่งได้ นำเข้าเฉพาะส่วนประกอบที่คุณต้องการ เปิดใช้งานตัวเลือกส่วนกลาง เช่น การไล่ระดับสีและเงา และเขียน CSS ของคุณเองด้วยตัวแปร แผนที่ ฟังก์ชัน และมิกซ์อินของเรา
นำเข้าหนึ่งสไตล์ชีตและคุณจะเข้าสู่การแข่งขันด้วยคุณลักษณะทุกอย่างของ 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
Bootstrap 5 กำลังพัฒนาในแต่ละรุ่นเพื่อให้ใช้ประโยชน์จากตัวแปร CSS ได้ดีขึ้นสำหรับสไตล์ธีมสากล ส่วนประกอบแต่ละส่วน และแม้แต่ยูทิลิตี้ เรามีตัวแปรมากมายสำหรับสี สไตล์ฟอนต์ และอื่นๆ ใน:rootระดับสำหรับการใช้งานทุกที่ ในส่วนประกอบและยูทิลิตี้ ตัวแปร 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);
}แทนที่ตัวแปรคลาสสากล ส่วนประกอบ หรือยูทิลิตี้เพื่อปรับแต่ง 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;
}ใหม่ใน 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,
)
)
);
เพิ่มองค์ประกอบที่ซ่อนอยู่ที่สลับได้ โมดอลและเมนูออฟแคนวาส ป๊อปโอเวอร์และคำแนะนำเครื่องมือ และอื่นๆ อีกมากมาย—ทั้งหมดนี้ไม่มี jQuery JavaScript ใน Bootstrap เป็น HTML ก่อน ซึ่งหมายความว่าการเพิ่มปลั๊กอินทำได้ง่ายเหมือนกับการเพิ่มdataแอตทริบิวต์ ต้องการการควบคุมเพิ่มเติมหรือไม่? รวมปลั๊กอินแต่ละรายการโดยทางโปรแกรม
ทำไมต้องเขียน 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เป็นไลบรารีไอคอน SVG แบบโอเพนซอร์สที่มีร่ายมนตร์มากกว่า 1,500 แบบ พร้อมเพิ่มทุกรีลีส ออกแบบมาเพื่อทำงานในทุกโครงการ ไม่ว่าคุณจะใช้ Bootstrap เองหรือไม่ก็ตาม ใช้เป็น SVG หรือแบบอักษรของไอคอน—ทั้งสองตัวเลือกช่วยให้คุณปรับขนาดเวกเตอร์และปรับแต่งได้ง่ายผ่าน CSS
นำ Bootstrap ไปสู่อีกระดับด้วยธีมพรีเมียมจากตลาดBootstrap Themes อย่างเป็นทางการ ธีมต่างๆ สร้างขึ้นบน Bootstrap เป็นเฟรมเวิร์กที่ขยายออกไป เต็มไปด้วยส่วนประกอบและปลั๊กอินใหม่ เอกสารประกอบ และเครื่องมือสร้างอันทรงพลัง
