Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

تحميل (Download)

قم بتحميل الـ Bootstrap للحصول على الـ CSS والـ JavaScript المجمعة، أو الكود المصدري، أو تضمينه باستخدام مديري الحزم المفضلين لديك مثل npm و RubyGems وغيرها.

في هذه الصفحة

الـ CSS والـ JS المجمعة

قم بتحميل الكود المجمع الجاهز للاستخدام لـ Bootstrap v5.3.8 لإضافته بسهولة إلى مشروعك، والذي يتضمن:

هذا لا يتضمن المستندات، أو ملفات المصدر، أو أي تبعيات JavaScript اختيارية مثل Popper.

Download

ملفات المصدر

Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

  • Sass compiler لتجميع ملفات Sass المصدرية إلى ملفات CSS
  • Autoprefixer لإضافة بادئات الموردين لـ CSS

إذا كنت بحاجة إلى المجموعة الكاملة من أدوات البناء، فهي مدرجة لتطوير Bootstrap ومستنداته، ولكنها على الأرجح غير مناسبة لأغراضك الخاصة.

Download source

أمثلة

إذا كنت ترغب في تحميل وفحص أمثلتنا، يمكنك الحصول على الأمثلة المبنية مسبقاً:

Download Examples

CDN عبر jsDelivr

تخطَّ عملية التحميل باستخدام jsDelivr لتقديم نسخة مخزنة مؤقتاً من الـ CSS والـ JS المجمعة لـ Bootstrap إلى مشروعك.

<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>

إذا كنت تستخدم الـ JavaScript المجمعة وتفضل تضمين Popper بشكل منفصل، فأضف Popper قبل الـ JS الخاصة بنا، ويفضل أن يكون ذلك عبر CDN.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

شبكات توصيل محتوى (CDNs) بديلة

نحن نوصي بـ jsDelivr ونستخدمها بأنفسنا في مستنداتنا. ومع ذلك، في بعض الحالات - كما هو الحال في بعض الدول أو البيئات المحددة - قد تحتاج إلى استخدام مزودي CDN آخرين مثل cdnjs أو unpkg.

ستجد نفس الملفات لدى مزودي CDN هؤلاء، وإن كان ذلك بعناوين URL مختلفة. مع cdnjs، يمكنك استخدام رابط حزمة Bootstrap المباشر هذا لنسخ ولصق قصاصات HTML جاهزة للاستخدام لكل ملف توزيع من أي إصدار من Bootstrap.

إذا كانت بصمات SRI تختلف لملف معين، فلا يجب عليك استخدام الملفات من ذلك الـ CDN، لأن هذا يعني أن الملف قد تم تعديله من قبل شخص آخر.

لاحظ أنه يجب عليك مقارنة البصمات ذات الطول نفسه، على سبيل المثال sha384 مع sha384 ، وإلا فمن المتوقع أن تكون مختلفة. وبناءً على ذلك، يمكنك استخدام أداة عبر الإنترنت مثل SRI Hash Generator للتأكد من أن البصمات هي نفسها لملف معين. بدلاً من ذلك، وبافتراض أن OpenSSL مثبت لديك، يمكنك تحقيق الشيء نفسه من الـ CLI، على سبيل المثال:

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

مدراء الحزم

اسحب ملفات المصدر الخاصة بـ Bootstrap إلى أي مشروع تقريباً باستخدام بعض مديري الحزم الأكثر شيوعاً. بغض النظر عن مدير الحزم، سيتطلب Bootstrap Sass compiler و Autoprefixer لإعداد يطابق إصداراتنا المجمعة الرسمية.

npm

قم بتثبيت Bootstrap في تطبيقاتك التي تعمل بنظام Node.js باستخدام حزمة npm:

npm install bootstrap@5.3.8

ستقوم عبارة const bootstrap = require('bootstrap') أو import bootstrap from 'bootstrap' بتحميل جميع إضافات (plugins) Bootstrap على كائن bootstrap. يقوم موديول bootstrap نفسه بتصدير جميع إضافاتنا. يمكنك تحميل إضافات Bootstrap يدوياً وبشكل فردي عن طريق تحميل ملفات /js/dist/*.js الموجودة تحت الدليل الرئيسي للحزمة.

يحتوي ملف package.json الخاص بـ Bootstrap على بعض البيانات الوصفية الإضافية تحت المفاتيح التالية:

  • sass - المسار إلى ملف المصدر الرئيسي لـ Sass الخاص بـ Bootstrap
  • style - المسار إلى الـ CSS غير المصغرة لـ Bootstrap والتي تم تجميعها باستخدام الإعدادات الافتراضية (بدون تخصيص)

ابدأ مع الـ Bootstrap عبر npm باستخدام مشروعنا المبدئي! توجه إلى مستودع قالب Sass & JS example لترى كيفية بناء وتخصيص الـ Bootstrap في مشروع npm الخاص بك. يتضمن ذلك مترجم Sass و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

yarn

قم بتثبيت Bootstrap في تطبيقاتك التي تعمل بنظام Node.js باستخدام حزمة yarn:

yarn add bootstrap@5.3.8

Yarn 2+ (المعروف باسم Yarn Berry) لا يدعم دليل node_modules بشكل افتراضي: استخدام مثال Sass & JS الخاص بنا يتطلب بعض التعديلات:

yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project

Bun

قم بتثبيت Bootstrap في تطبيقات Bun أو Node.js الخاصة بك باستخدام Bun CLI:

bun add bootstrap@5.3.8

RubyGems

قم بتثبيت Bootstrap في تطبيقات Ruby الخاصة بك باستخدام Bundler (موصى به) و RubyGems عن طريق إضافة السطر التالي إلى ملف Gemfile:

gem 'bootstrap', '~> 5.3.8'

بدلاً من ذلك، إذا كنت لا تستخدم Bundler، يمكنك تثبيت الـ gem عن طريق تشغيل هذا الأمر:

gem install bootstrap -v 5.3.8

راجع README الخاص بالـ gem لمزيد من التفاصيل.

Composer

يمكنك أيضاً تثبيت وإدارة الـ Sass والـ JavaScript الخاصة بـ Bootstrap باستخدام Composer:

composer require twbs/bootstrap:5.3.8

NuGet

إذا كنت تطور باستخدام .NET Framework، يمكنك أيضاً تثبيت وإدارة CSS أو Sass والـ JavaScript الخاصة بـ Bootstrap باستخدام NuGet. يجب أن تستخدم المشاريع الأحدث libman أو طريقة أخرى لأن NuGet مصمم للكود المجمع، وليس لأصول الواجهة الأمامية.

Install-Package bootstrap

Install-Package bootstrap.sass

إضافة IntelliSense

قم بتثبيت إضافة IntelliSense التي يتم صيانتها من قبل المجتمع لـ Visual Studio Code للحصول على الإكمال التلقائي IntelliSense لفئات (classes) Bootstrap.

View in VS Code Marketplace