جعبه ابزار جلویی قدرتمند، قابل توسعه و پر ویژگی. با Sass بسازید و سفارشی کنید، از سیستم و اجزای شبکه از پیش ساخته شده استفاده کنید، و پروژه ها را با افزونه های قدرتمند جاوا اسکریپت زنده کنید.
Currently v5.2.1 · دانلود · v4.6.x docs · همه نسخه ها
با Bootstrap مستقیماً به ساختن بروید—از CDN استفاده کنید، آن را از طریق مدیریت بسته نصب کنید یا کد منبع را دانلود کنید.
فایل های منبع Sass و JavaScript Bootstrap را از طریق npm، RubyGems، Composer یا Meteor نصب کنید. نصب‌های مدیریت‌شده بسته شامل مستندات یا اسکریپت‌های ساخت کامل ما نمی‌شود. همچنین می توانید از مخزن قالب npm ما برای تولید سریع یک پروژه بوت استرپ از طریق npm استفاده کنید.
npm install [email protected]gem install bootstrap -v 5.2.1برای اطلاعات بیشتر و مدیران بسته اضافی، اسناد نصب ما را بخوانید .
زمانی که فقط نیاز دارید CSS یا JS کامپایل شده بوت استرپ را اضافه کنید، می توانید از 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);
}برای سفارشی کردن بوت استرپ هر طور که دوست دارید، متغیرهای global، جزء یا کلاس ابزار را نادیده بگیرید. نیازی به اعلان مجدد هر قانون نیست، فقط یک مقدار متغیر جدید.
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,
)
)
);
به راحتی عناصر مخفی قابل تغییر، منوهای مدال و offcanvas، پاپاورها و راهنمای ابزار و موارد دیگر را اضافه کنید—همه بدون jQuery. جاوا اسکریپت در بوت استرپ HTML-first است، به این معنی که افزودن افزونه ها به آسانی افزودن dataویژگی ها است. به کنترل بیشتری نیاز دارید؟ افزونه های فردی را به صورت برنامه نویسی اضافه کنید.
وقتی می توانید HTML بنویسید چرا جاوا اسکریپت بیشتری بنویسید؟ تقریباً تمام پلاگین های جاوا اسکریپت بوت استرپ دارای یک API داده درجه یک هستند که به شما امکان می دهد فقط با افزودن 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>
درباره جاوا اسکریپت ما به عنوان ماژول و استفاده از API برنامه نویسی بیشتر بیاموزید .
بوت استرپ دارای دوجین افزونه است که می توانید آنها را در هر پروژه ای رها کنید. آنها را به یکباره رها کنید یا فقط موارد مورد نیاز خود را انتخاب کنید.
Bootstrap Icons یک کتابخانه آیکون SVG منبع باز است که دارای بیش از 1500 گلیف است که در هر نسخه بیشتر اضافه می شود. آنها برای کار در هر پروژه ای طراحی شده اند، چه از خود بوت استرپ استفاده کنید یا نه. از آنها به عنوان SVG یا فونت آیکون استفاده کنید—هر دو گزینه به شما مقیاس برداری و سفارشی سازی آسان از طریق CSS را می دهد.
Bootstrap را با تم های ممتاز از بازار رسمی Bootstrap Themes به سطح بعدی ببرید . تم ها بر روی بوت استرپ به عنوان چارچوب های توسعه یافته خود ساخته می شوند، سرشار از اجزا و پلاگین های جدید، اسناد و ابزارهای ساخت قدرتمند.
