مجموعة أدوات frontend قوية، وقابلة للتوسيع، ومليئة بالميزات. ابنِ وخصص باستخدام Sass، واستفد من نظام الشبكة (grid system) والمكونات الجاهزة، وامنح مشاريعك الحياة باستخدام إضافات JavaScript القوية.
npm i bootstrap@5.3.8الإصدار الحالي v5.3.8 · تحميل · جميع الإصدارات
ابدأ مباشرة في البناء باستخدام Bootstrap—استخدم الـ CDN، أو قم بتثبيته عبر مدير الحزم، أو قم بتنزيل الكود المصدري.
قم بتثبيت ملفات الـ Sass والـ JavaScript المصدرية لـ Bootstrap عبر npm، أو RubyGems، أو Composer، أو Meteor. عمليات التثبيت عبر مدير الحزم لا تتضمن المستندات أو سكربتات البناء الكاملة الخاصة بنا. يمكنك أيضاً استخدام أي عرض توضيحي من مستودع Examples الخاص بنا لبدء مشاريع Bootstrap بسرعة.
npm install bootstrap@5.3.8gem install bootstrap -v 5.3.8اقرأ مستندات التثبيت الخاصة بنا لمزيد من المعلومات ومديري الحزم الإضافيين.
عندما تحتاج فقط إلى تضمين الـ CSS أو الـ JS المجمّع الخاص بـ Bootstrap، يمكنك استخدام jsDelivr. شاهد ذلك عملياً من خلال البداية السريعة البسيطة، أو تصفح الأمثلة لبدء مشروعك التالي بسرعة. يمكنك أيضاً اختيار تضمين Popper والـ JS الخاص بنا بشكل منفصل.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>يستخدم Bootstrap الـ Sass لبنية برمجية نمطية وقابلة للتخصيص. استورد فقط المكونات التي تحتاجها، وقم بتفعيل الخيارات العامة مثل التدرجات والظلال، واكتب الـ CSS الخاص بك باستخدام الـ variables, maps, functions, and mixins الخاصة بنا.
استورد (stylesheet) ورقة أنماط واحدة وستبدأ فوراً باستخدام كل ميزة من ميزات الـ 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/variables-dark";
@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 variables لأنماط الثيمات العالمية، و (class)
الفئات الفردية، وحتى الـ utilities. نحن نوفر العشرات من الـ variables للألوان، وأنماط الخطوط، وأكثر من ذلك على
مستوى root: لاستخدامها في أي مكان. وفي الـ components والـ utilities، تكون الـ CSS variables محصورة في
الـ (class) الفئة ذات الصلة ويمكن تعديلها بسهولة.
استخدم أياً من الـ global :root variables الخاصة بنا لكتابة أنماط جديدة. تستخدم الـ CSS variables صيغة 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);
}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 map مليئة بالميزات والتي يمكن تخصيصها بسرعة وسهولة. لم يكن من السهل أبداً إضافة أو إزالة أو تعديل أي (classes) فئات أدوات. اجعل الأدوات مستجيبة، وأضف تنويعات pseudo-class، وامنحها أسماء مخصصة.
قم بتطبيق أي من (classes) الفئات المساعدة المضمنة لدينا على المكونات الخاصة بنا لتخصيص مظهرها، كـ مثال التنقل أدناه. هناك مئات الفئات المتاحة — بدءاً من تحديد الموقع (positioning) و تحديد الأحجام (sizing) وصولاً إلى الألوان و التأثيرات. امزجها مع تخطيات متغيرات CSS من أجل تحكم أكبر.
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
</li>
</ul>استخدم الـ utility API الخاص بالـ Bootstrap لتعديل أي من الأدوات المضمنة لدينا أو لإنشاء أدوات مخصصة خاصة بك لأي مشروع. قم باستيراد الـ Bootstrap أولاً، ثم استخدم دالات Sass map لتعديل أو إضافة أو إزالة الأدوات المساعدة.
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
أضف عناصر مخفية قابلة للتبديل، وmodal، وقوائم offcanvas، وpopover وtooltip، وغير ذلك الكثير—كل ذلك دون jQuery.
يعتمد JavaScript الخاص بـ Bootstrap على نهج HTML-first، مما يعني أن معظم الإضافات تتم إضافتها باستخدام سمات data داخل HTML الخاص بك. هل تحتاج إلى مزيد من التحكم؟ قم بتضمين الإضافات الفردية برمجياً.
لماذا تكتب المزيد من الـ JavaScript بينما يمكنك كتابة HTML؟ تتميز جميع إضافات JavaScript الخاصة بـ Bootstrap
تقريباً بـ data 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><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
</ul>
</div>تعرّف على المزيد حول JavaScript الخاص بنا كوحدات (Modules) و استخدام الـ API البرمجية.
يتميز Bootstrap بوجود عشرات الإضافات (plugins) التي يمكنك إضافتها إلى أي مشروع. أضفها جميعاً دفعة واحدة، أو اختر فقط التي تحتاجها.
Bootstrap Icons هي مكتبة أيقونات SVG مفتوحة المصدر تضم أكثر من 1,800 رمز، مع إضافة المزيد في كل إصدار. لقد صُممت لتعمل في أي مشروع، سواء كنت تستخدم Bootstrap نفسه أم لا. استخدمها كـ SVGs أو خطوط أيقونات—كلا الخيارين يمنحانك تحجيماً متجهياً وتخصيصاً سهلاً عبر CSS.
