مجموعة أدوات الواجهة الأمامية القوية والقابلة للتوسيع والمليئة بالميزات. قم بالبناء والتخصيص باستخدام Sass ، واستخدام نظام ومكونات الشبكة التي تم إنشاؤها مسبقًا ، وإضفاء الحيوية على المشاريع باستخدام مكونات JavaScript الإضافية القوية.
حاليًا v5.2.1 · تنزيل · مستندات v4.6.x · جميع الإصدارات
انتقل مباشرة إلى البناء باستخدام Bootstrap - استخدم CDN ، أو ثبته عبر مدير الحزم ، أو نزِّل الكود المصدري.
قم بتثبيت ملفات Sass و JavaScript المصدر الخاصة بـ Bootstrap عبر npm أو RubyGems أو Composer أو Meteor. لا تتضمن عمليات التثبيت المُدارة للحزمة الوثائق أو البرامج النصية للبناء الكامل الخاصة بنا. يمكنك أيضًا استخدام نموذج npm repo الخاص بنا لإنشاء مشروع 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 في مشروع جديد باستخدام أدلةنا الرسمية.
يستخدم 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 ، يتم الآن إنشاء أدواتنا المساعدة بواسطة واجهة برمجة تطبيقات الأداة المساعدة . لقد بنيناها كخريطة 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 تقريبًا بواجهة برمجة تطبيقات بيانات من الدرجة الأولى ، مما يسمح لك باستخدام 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 لدينا كوحدات نمطية واستخدام واجهة برمجة التطبيقات البرمجية .
يتميز Bootstrap بالعشرات من المكونات الإضافية التي يمكنك إسقاطها في أي مشروع. قم بإسقاطها جميعًا مرة واحدة ، أو اختر فقط ما تحتاجه.
Bootstrap Icons هي مكتبة أيقونات SVG مفتوحة المصدر تضم أكثر من 1500 صورة رمزية ، مع إضافة المزيد في كل إصدار. لقد تم تصميمها للعمل في أي مشروع ، سواء كنت تستخدم Bootstrap نفسه أم لا. استخدمها كخطوط SVG أو رموز - يمنحك كلا الخيارين قياسًا متجهًا وتخصيصًا سهلًا عبر CSS.
ارتقِ بـ Bootstrap إلى المستوى التالي مع السمات المتميزة من سوق Bootstrap Themes الرسمي . تم بناء السمات على Bootstrap كإطارات عمل ممتدة خاصة بها ، غنية بالمكونات والإضافات الجديدة والوثائق وأدوات البناء القوية.
