bootstrap sass
v3.4.1
bootstrap-sass هو إصدار مدعوم من Sass من Bootstrap 3، وهو جاهز للإسقاط مباشرة في التطبيقات التي تدعم Sass.
هذا هو التمهيد 3 . بالنسبة إلى Bootstrap 4 ، استخدم Bootstrap Rubygem إذا كنت تستخدم Ruby، والمستودع الرئيسي بخلاف ذلك.
يرجى الاطلاع على الدليل المناسب للبيئة التي تختارها:
روبي أون ريلز.
باور.
npm/Node.js.
من السهل إدراج bootstrap-sass في Rails باستخدام مسار الأصول.
في ملف Gemfile الخاص بك، تحتاج إلى إضافة جوهرة bootstrap-sass ، والتأكد من وجود جوهرة sass-rails - تتم إضافتها إلى تطبيقات Rails الجديدة افتراضيًا.
جوهرة 'bootstrap-sass'، '~> 3.4.1' جوهرة 'sassc-rails'، '>= 2.1.0'
bundle install وإعادة تشغيل الخادم الخاص بك لإتاحة الملفات عبر المسار.
استيراد أنماط Bootstrap في app/assets/stylesheets/application.scss :
// يجب استيراد "bootstrap-sprockets" قبل "bootstrap" و"bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
يجب استيراد bootstrap-sprockets قبل bootstrap حتى تعمل خطوط الأيقونات.
تأكد من أن الملف يحتوي على امتداد .scss (أو .sass لبناء جملة Sass). إذا قمت للتو بإنشاء تطبيق Rails جديد، فقد يأتي مع ملف .css بدلاً من ذلك. إذا كان هذا الملف موجودًا، فسيتم تقديمه بدلاً من Sass، لذا أعد تسميته:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
ثم قم بإزالة كافة *= require_self و *= require_tree . البيانات من ملف ساس. بدلاً من ذلك، استخدم @import لاستيراد ملفات Sass.
لا تستخدم *= require في Sass وإلا فلن تتمكن أوراق الأنماط الأخرى من الوصول إلى مزيج Bootstrap أو متغيراته.
يعتمد Bootstrap JavaScript على jQuery. إذا كنت تستخدم Rails 5.1+، فأضف جوهرة jquery-rails إلى ملف Gemfile الخاص بك:
جوهرة "مسج القضبان"
تثبيت حزمة $
يتطلب Bootstrap Javascripts في app/assets/javascripts/application.js :
//= يتطلب jquery//= يتطلب bootstrap-sprockets
لا ينبغي تضمين كل من bootstrap-sprockets و bootstrap في application.js .
يوفر bootstrap-sprockets ملفات Bootstrap Javascript فردية ( alert.js أو dropdown.js ، على سبيل المثال)، بينما يوفر bootstrap ملفًا متسلسلاً يحتوي على كافة ملفات Bootstrap Javascripts.
عند استخدام حزمة bootstrap-sass Bower بدلاً من الجوهرة في Rails، قم بتكوين الأصول في config/application.rb :
# مسارات أصول Bower.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << Bower_path
config.assets.paths << Bower_pathend# ترجمة خطوط Bootstrap مسبقًا << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# الحد الأدنى من دقة رقم Sass المطلوبة بواسطة bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max استبدل عبارات Bootstrap @import في application.scss بـ:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
استبدل Bootstrap require التوجيه في application.js بـ:
//= يتطلب bootstrap-sass/assets/javascripts/bootstrap-sprockets
يرجى التأكد من sprockets-rails هي الإصدار 2.1.4 على الأقل.
لم يعد bootstrap-sass متوافقًا مع Rails 3. أحدث إصدار من bootstrap-sass المتوافق مع Rails 3.2 هو v3.1.1.0.
حزمة bootstrap-sass Bower متوافقة مع Node-sass 3.2.0+. يمكنك تثبيته مع:
$ Bower تثبيت bootstrap-sass
توجد Sass وJS وجميع الأصول الأخرى في الأصول.
بشكل افتراضي، يسرد الحقل الرئيسي bower.json فقط ملف _bootstrap.scss الرئيسي وجميع الأصول الثابتة (الخطوط وJS). وهذا متوافق افتراضيًا مع مديري الأصول مثل wiredep.
إذا كنت تستخدم mincer مع Node-sass، فاستورد Bootstrap كما يلي:
في application.css.ejs.scss (NB .css.ejs.scss ):
// استيراد مسارات أصول المفرمة helperintegration@import "bootstrap-mincer";@import "bootstrap";
في application.js :
//= تتطلب bootstrap-sprockets
راجع أيضًا هذا المثال:manifest.js الخاص بالمفرمة.
$ npm تثبيت bootstrap-sass
افتراضيًا، يتم استيراد كافة عناصر Bootstrap.
يمكنك أيضًا استيراد المكونات بشكل صريح. للبدء بقائمة كاملة من الوحدات، انسخ ملف _bootstrap.scss إلى أصولك باسم _bootstrap-custom.scss . ثم قم بالتعليق على المكونات التي لا تريدها من _bootstrap-custom . في ملف Sass للتطبيق، استبدل @import 'bootstrap' بـ:
@import 'bootstrap-custom'؛
يتطلب bootstrap-sass الحد الأدنى من دقة رقم Sass وهو 8 (الافتراضي هو 5).
يتم ضبط الدقة لـ Ruby تلقائيًا عند استخدام جوهرة sassc-rails . عند استخدام إصدار npm أو Bower مع Ruby، يمكنك ضبطه باستخدام:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
يتطلب Bootstrap استخدام Autoprefixer. يضيف Autoprefixer بادئات البائع إلى قواعد CSS باستخدام قيم من هل يمكنني استخدامها.
لمطابقة مستوى توافق المتصفح في Bootstrap، قم بتعيين خيار browsers Autoprefixer على:
[ "Android 2.3"، "Android >= 4"، "Chrome >= 20"، "Firefox >= 24"، "Explorer >= 8"، "iOS >= 6"، "Opera >= 12"، "Safari" >= 6"]
تحتوي assets/javascripts/bootstrap.js على كافة عناصر JavaScript الخاصة بـ Bootstrap، متسلسلة بالترتيب الصحيح.
إذا كنت تستخدم Sprockets أو Mincer، فيمكنك طلب bootstrap-sprockets بدلاً من ذلك لتحميل الوحدات الفردية:
// قم بتحميل كافة ملفات Bootstrap JavaScript//= تتطلب bootstrap-sprockets
يمكنك أيضًا تحميل وحدات فردية، بشرط أن تحتاج أيضًا إلى أي تبعيات. يمكنك التحقق من التبعيات في وثائق Bootstrap JS.
//= يتطلب bootstrap/scrollspy//= يتطلب bootstrap/modal//= يتطلب bootstrap/dropdown
تتم الإشارة إلى الخطوط على النحو التالي:
"#{$icon-font-path}#{$icon-font-name}.eot" يتم تعيين $icon-font-path افتراضيًا على bootstrap/ إذا تم استخدام مساعدات مسار الأصول، و ../fonts/bootstrap/ fonts/bootstrap/ بخلاف ذلك.
عند استخدام bootstrap-sass مع Compass أو Sprockets أو Mincer، يجب عليك استيراد مساعدات المسار ذات الصلة قبل Bootstrap نفسه، على سبيل المثال:
@import "bootstrap-compass";@import "bootstrap";
قم باستيراد Bootstrap إلى ملف Sass (على سبيل المثال، application.scss ) للحصول على جميع أنماط Bootstrap ومزيجها ومتغيراتها!
@import "bootstrap";
يمكنك أيضًا تضمين سمة Bootstrap الاختيارية:
@import "bootstrap/theme";
يمكن العثور على القائمة الكاملة لمتغيرات Bootstrap هنا. يمكنك تجاوز ذلك ببساطة عن طريق إعادة تعريف المتغير قبل توجيه @import ، على سبيل المثال:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
يتوفر Bootstrap كوحدة للنظارات. بعد تثبيت Bootstrap عبر NPM يمكنك استيراد مكتبة Bootstrap عبر:
@استيراد "bootstrap-sass/bootstrap"
أو قم باستيراد أجزاء Bootstrap التي تحتاجها فقط:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
قد يختلف إصدار Bootstrap for Sass عن الإصدار الأولي في الرقم الأخير، المعروف باسم PATCH. قد يكون إصدار التصحيح متقدمًا على الإصدار الثانوي المطابق. يحدث هذا عندما نحتاج إلى إصدار تغييرات خاصة بـ Sass.
قبل الإصدار 3.3.2، كان إصدار Bootstrap for Sass يُستخدم ليعكس الإصدار الأولي، مع رقم إضافي للتغييرات الخاصة بـ Sass. تم تغيير هذا بسبب مشكلات توافق Bower وnpm.
الإصدارات الأولية مقابل إصدارات Bootstrap for Sass هي:
| المنبع | ساس |
|---|---|
| 3.3.4+ | نفس |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
قم دائمًا بالرجوع إلى CHANGELOG.md عند الترقية.
إذا كنت ترغب في المساعدة في تطوير bootstrap-sass نفسه، فاقرأ هذا القسم.
كان الحفاظ على مزامنة bootstrap-sass مع التغييرات الأولية من Bootstrap بمثابة عملية يدوية عرضة للخطأ وتستغرق وقتًا طويلاً. مع Bootstrap 3، قدمنا محولًا يقوم بأتمتة هذا الأمر.
ملاحظة: إذا كنت تتطلع فقط إلى استخدام Bootstrap 3، فراجع قسم التثبيت أعلاه.
يمكن الآن سحب التغييرات الأولية لمشروع Bootstrap باستخدام مهمة convert المشعل.
فيما يلي مثال للتشغيل من شأنه أن يسحب الفرع الرئيسي من مستودع twbs/bootstrap الرئيسي:
rake convert
سيؤدي هذا إلى تحويل أحدث إصدار من LESS إلى Sass والتحديث إلى أحدث إصدار من JS. لتحويل فرع أو إصدار معين، قم بتمرير اسم الفرع أو تجزئة الالتزام كوسيطة المهمة الأولى:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
يوجد أحدث برنامج نصي للمحول هنا ويقوم بما يلي:
يحول ملفات Bootstrap LESS الأولية إلى ملف SCSS المطابق لها.
ينسخ جميع ملفات JavaScript الأولية إلى assets/javascripts/bootstrap ، وبيان Sprockets في assets/javascripts/bootstrap-sprockets.js ، والتسلسل في assets/javascripts/bootstrap.js .
نسخ كافة ملفات الخطوط الأولية إلى assets/fonts/bootstrap .
يضبط Bootstrap::BOOTSTRAP_SHA في version.rb على الفرع sha.
يقوم هذا المحول بتحويل LESS الأصلي بالكامل إلى SCSS. التحويل تلقائي ولكنه يتطلب تعليمات لبعض التحويلات (انظر مخرجات المحول). يرجى إرسال مشكلات GitHub الموسومة conversion .
لدى bootstrap-sass عدد من المساهمين الرئيسيين:
توماس ماكدونالد
تريستان هاروارد
بيتر جوميسون
جليب مازوفيتسكي
وعدد كبير من المساهمين الآخرين.
يتم استخدام bootstrap-sass لإنشاء بعض المشاريع الرائعة في جميع أنحاء الويب، بما في ذلك Diaspora وrails_admin وMichael Hartl's Rails Tutorial وgitlabhq وkandan.
