الفرق بين المراجعتين لصفحة: «Bootstrap/download»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 3: سطر 3:


== شفرة CSS وJavaScript المجمَّعة ==
== شفرة CSS وJavaScript المجمَّعة ==
نزّل شفرة Bootstrap المُجمَّعة الجاهزة للاستخدام (الإصدار 4.0.0) والتي يمكن تضمينها بسهولة في مشروعاتك، تتضمّن هذه النسخة:
نزّل شفرة Bootstrap المُجمَّعة الجاهزة للاستخدام (الإصدار 4.5.0) والتي يمكن تضمينها بسهولة في مشروعاتك، تتضمّن هذه النسخة:
* رزمة صفحات [[CSS]] مجمَّعة ومُصغّرة (انظر مقارنة بين ملفات CSS)
* رزمة صفحات [[CSS]] مجمَّعة ومُصغّرة (انظر مقارنة بين [[Bootstrap/contents#.D9.85.D9.84.D9.81.D8.A7.D8.AA CSS|ملفات CSS]])
* ملحقات [[JavaScript]] مُجمَّعة ومُصغَّرة.
* ملحقات [[JavaScript]] مُجمَّعة ومُصغَّرة.
لا تتضمّن هذه النسخة أي توثيق، أو ملفات مصدرية، أو أية اعتماديّات [[JavaScript]] اختيارية (أي [[jQuery]] و Popper.js).
لا تتضمّن هذه النسخة أي توثيق، أو ملفات مصدرية، أو أية اعتماديّات [[JavaScript]] اختيارية (أي [[jQuery]] و Popper.js).


[https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip نزّل].
[https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-dist.zip نزّل].


== الملفات المصدرية ==
== الملفات المصدرية ==
سطر 14: سطر 14:
* مجمّع [[Sass]] (يدعم Libsass أو Ruby Sass) لتجميع صفحات [[CSS]].
* مجمّع [[Sass]] (يدعم Libsass أو Ruby Sass) لتجميع صفحات [[CSS]].
* [https://github.com/postcss/autoprefixer Autoprefixer] لإضافة البادئات Prefixes الخاصّة بمختلف مزوّدي صفحات الأنماط CSS Vendor.
* [https://github.com/postcss/autoprefixer Autoprefixer] لإضافة البادئات Prefixes الخاصّة بمختلف مزوّدي صفحات الأنماط CSS Vendor.
إن احتجت [https://getbootstrap.com/docs/4.0/getting-started/build-tools/#tooling-setup لأدوات البناء من المصدر] (Build tools) فهي مُضمَّنة لتطوير Bootstrap وتوثيقه؛ إلا أنها قد لا تتوافق مع احتياجاتك الخاصّة.
إن احتجت [https://getbootstrap.com/docs/4.5/getting-started/build-tools/#tooling-setup لأدوات البناء من المصدر] (Build tools) فهي مُضمَّنة لتطوير Bootstrap وتوثيقه؛ إلا أنها قد لا تتوافق مع احتياجاتك الخاصّة.


[https://github.com/twbs/bootstrap/archive/v4.0.0.zip نزّل المصدر].
[https://github.com/twbs/bootstrap/archive/v4.5.0.zip نزّل المصدر].
 
== أمثلة ==
يمكنك تنزيل واختبار أمثلتنا من [https://getbootstrap.com/docs/4.5/examples/ هنا].  


== BootstrapCDN ==
== BootstrapCDN ==
تجاوز التنزيل بتوفير نسخة مجمَّعة مُخبّأة من ملفات CSS وJavascript الخاصّة بإطار Bootstarp عن طريق [https://www.bootstrapcdn.com/ BootstrapCDN].<syntaxhighlight lang="html">
تجاوز التنزيل بتوفير نسخة مجمَّعة مُخبّأة من ملفات CSS وJavascript الخاصّة بإطار Bootstarp عن طريق [https://www.bootstrapcdn.com/ BootstrapCDN].<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
</syntaxhighlight>لا تنس تضمين نُسَخ موزّعة من [[jQuery]] وPopper.js قبل إضافة BootstrapCDN.<syntaxhighlight lang="html">
</syntaxhighlight>لا تنس تضمين نُسَخ موزّعة من [[jQuery]] وPopper.js قبل إضافة BootstrapCDN.<syntaxhighlight lang="html">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</syntaxhighlight>
</syntaxhighlight>


== مديرو الحزم ==
== مديرو الحزم ==
احصل على ملفات Bootstrap المصدرية وأضفها إلى أي مشروع تقريبًا باستخدام بعضٍ من أكثر مديري الحزم شعبية. بغضّ النظر عن مدير الحزم، سيحتاج Bootstrap إلى مجمّع [[Saas]] و [https://github.com/postcss/autoprefixer Autoprefixer] للحصول على إعداد يوافق النسخ المُجمَّعة الرسمية.
احصل على ملفات Bootstrap المصدرية وأضفها إلى أي مشروع تقريبًا باستخدام بعضٍ من أكثر مديري الحزم شعبية. بغضّ النظر عن مدير الحزم، سيحتاج Bootstrap إلى مجمّع [[Sass]] و [https://github.com/postcss/autoprefixer Autoprefixer] للحصول على إعداد يوافق النسخ المُجمَّعة الرسمية.


=== npm ===
=== npm ===
ثبّت Bootstrap على تطبيقات العاملة على Node.js [https://www.npmjs.com/package/bootstrap بحزمة bootstrap] في npm.<syntaxhighlight lang="shell">
ثبّت Bootstrap على التطبيقات العاملة على Node.js [https://www.npmjs.com/package/bootstrap بحزمة bootstrap] في npm.<syntaxhighlight lang="shell">
npm install bootstrap
npm install bootstrap
</syntaxhighlight>ستنزّل التعليمة <code>require('bootstrap')‎</code> جميع ملحقات jQuery في Bootstrap إلى كائن [[jQuery]]. لا تصدّر وحدة bootstrap بذاتها أي شيء. يمكنك تنزيل ملحقات [[jQuery]] في Bootstrap فرادى يدويًا بتنزيل ملفات المسار <code>‎/js/*.js</code> انطلاقا من المجلّد الرئيسي في الحزمة.
</syntaxhighlight>ستنزّل التعليمة <code>require('bootstrap')‎</code> جميع ملحقات jQuery في Bootstrap إلى كائن [[jQuery]]. لا تصدّر وحدة bootstrap بذاتها أي شيء. يمكنك تنزيل ملحقات [[jQuery]] في Bootstrap فرادى يدويًا بتنزيل ملفات المسار <code>‎/js/*.js</code> انطلاقا من المجلّد الرئيسي في الحزمة.
سطر 40: سطر 44:
* style - المسار إلى ملف [[CSS]] غير المُصغَّر الذي جُمِّع مسبقًا باستخدام الإعدادات المبدئية (دون تخصيص).
* style - المسار إلى ملف [[CSS]] غير المُصغَّر الذي جُمِّع مسبقًا باستخدام الإعدادات المبدئية (دون تخصيص).


=== yarn ===
ثبّت Bootstrap على التطبيقات العاملة على Node.js [https://yarnpkg.com/en/package/bootstrap بحزمة bootstrap] في yarn.<syntaxhighlight lang="ruby">
yarn add bootstrap
</syntaxhighlight>
=== RubyGems ===
=== RubyGems ===
ثبّت Bootstrap في تطبيقات [[Ruby]] باستخدام [https://bundler.io/ Bundler] (يُنصح به) و [https://rubygems.org/ RubyGems] بإضافة السطر التالي إلى ملف [https://bundler.io/gemfile.html Gemfile] الخاصّ بك:<syntaxhighlight lang="ruby">
ثبّت Bootstrap في تطبيقات [[Ruby]] باستخدام [https://bundler.io/ Bundler] (يُنصح به) و [https://rubygems.org/ RubyGems] بإضافة السطر التالي إلى ملف [https://bundler.io/gemfile.html Gemfile] الخاصّ بك:<syntaxhighlight lang="ruby">
gem 'bootstrap', '~> 4.0.0'
gem 'bootstrap', '~> 4.5.0'
 
</syntaxhighlight>إن لم تكن تستخدم Bundler فطريقة بديلة للتثبيت هي تنفيذ الأمر:<syntaxhighlight lang="ruby">
</syntaxhighlight>إن لم تكن تستخدم Bundler فطريقة بديلة للتثبيت هي تنفيذ الأمر:<syntaxhighlight lang="ruby">
gem install bootstrap -v 4.0.0
gem install bootstrap -v 4.5.0
 
</syntaxhighlight>[https://github.com/twbs/bootstrap-rubygem/blob/master/README.md راجع ملف README للمزيد من التفاصيل.]
</syntaxhighlight>[https://github.com/twbs/bootstrap-rubygem/blob/master/README.md راجع ملف README للمزيد من التفاصيل.]


=== Composer ===
=== Composer ===
يمكنك كذلك تثبيت ملفات [[Sass]] و [[JavaScript]] الخاصّة بإطار Bootstrap عن طريق [https://getcomposer.org/ Composer]:<syntaxhighlight lang="php">
يمكنك كذلك تثبيت ملفات [[Sass]] و [[JavaScript]] الخاصّة بإطار Bootstrap عن طريق [https://getcomposer.org/ Composer]:<syntaxhighlight lang="php">
composer require twbs/bootstrap:4.0.0
composer require twbs/bootstrap:4.5.0
 
</syntaxhighlight>
</syntaxhighlight>


سطر 57: سطر 69:


Install-Package bootstrap.sass
Install-Package bootstrap.sass
</syntaxhighlight>
</syntaxhighlight>


== مصادر ==
== مصادر ==
* [https://getbootstrap.com/docs/4.0/getting-started/download/ صفحة Download في توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.5/getting-started/download/ صفحة Download في توثيق Bootstrap].
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 08:26، 14 يوليو 2020

نزّل Bootstrap للحصول على شفرة CSS و JavaScript المجمَّعة (compiled)، أو الشفرة المصدرية (source code)، أو ضمّنها بمدير الحزم المفضَّل لديك مثل npm وRubyGems وغيرها.

شفرة CSS وJavaScript المجمَّعة

نزّل شفرة Bootstrap المُجمَّعة الجاهزة للاستخدام (الإصدار 4.5.0) والتي يمكن تضمينها بسهولة في مشروعاتك، تتضمّن هذه النسخة:

  • رزمة صفحات CSS مجمَّعة ومُصغّرة (انظر مقارنة بين ملفات CSS)
  • ملحقات JavaScript مُجمَّعة ومُصغَّرة.

لا تتضمّن هذه النسخة أي توثيق، أو ملفات مصدرية، أو أية اعتماديّات JavaScript اختيارية (أي jQuery و Popper.js).

نزّل.

الملفات المصدرية

جمّع Bootstrap حسب طريقتك الخاصّة بتنزيل ملفات Sass المصدرية، وملفات JavaScript،  وملفات التوثيق. يتطلّب هذا الخيار أدوات إضافية:

  • مجمّع Sass (يدعم Libsass أو Ruby Sass) لتجميع صفحات CSS.
  • Autoprefixer لإضافة البادئات Prefixes الخاصّة بمختلف مزوّدي صفحات الأنماط CSS Vendor.

إن احتجت لأدوات البناء من المصدر (Build tools) فهي مُضمَّنة لتطوير Bootstrap وتوثيقه؛ إلا أنها قد لا تتوافق مع احتياجاتك الخاصّة.

نزّل المصدر.

أمثلة

يمكنك تنزيل واختبار أمثلتنا من هنا.

BootstrapCDN

تجاوز التنزيل بتوفير نسخة مجمَّعة مُخبّأة من ملفات CSS وJavascript الخاصّة بإطار Bootstarp عن طريق BootstrapCDN.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

لا تنس تضمين نُسَخ موزّعة من jQuery وPopper.js قبل إضافة BootstrapCDN.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

مديرو الحزم

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

npm

ثبّت Bootstrap على التطبيقات العاملة على Node.js بحزمة bootstrap في npm.

npm install bootstrap

ستنزّل التعليمة require('bootstrap')‎ جميع ملحقات jQuery في Bootstrap إلى كائن jQuery. لا تصدّر وحدة bootstrap بذاتها أي شيء. يمكنك تنزيل ملحقات jQuery في Bootstrap فرادى يدويًا بتنزيل ملفات المسار ‎/js/*.js انطلاقا من المجلّد الرئيسي في الحزمة.

يتضمّن الملف package.json بيانات وصفية إضافية تحت المفاتيح التالية:

  • sass - المسار إلى ملف مصدر Sass الأساسي.
  • style - المسار إلى ملف CSS غير المُصغَّر الذي جُمِّع مسبقًا باستخدام الإعدادات المبدئية (دون تخصيص).

yarn

ثبّت Bootstrap على التطبيقات العاملة على Node.js بحزمة bootstrap في yarn.

yarn add bootstrap

RubyGems

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

gem 'bootstrap', '~> 4.5.0'

إن لم تكن تستخدم Bundler فطريقة بديلة للتثبيت هي تنفيذ الأمر:

gem install bootstrap -v 4.5.0

راجع ملف README للمزيد من التفاصيل.

Composer

يمكنك كذلك تثبيت ملفات Sass و JavaScript الخاصّة بإطار Bootstrap عن طريق Composer:

composer require twbs/bootstrap:4.5.0

NuGet

إن كنت تطوّر في بيئة NET. فيمكنك تثبيت CSS أو Sass و JavaScript الخاصّة بإطار Bootstrap باستخدام NuGet.

Install-Package bootstrap

Install-Package bootstrap.sass

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/download&oldid=29727»