التمهيد

تمديد Bootstrap

قم بتوسيع Bootstrap للاستفادة من الأنماط والمكونات المضمّنة ، بالإضافة إلى المتغيرات والمزيجات الأقل.

بنيت مع أقل

أقل CSS

يتكون Bootstrap من LESS في جوهره ، وهي لغة أنماط ديناميكية أنشأها صديقنا العزيز Alexis Sellier . يجعل تطوير CSS المستندة إلى الأنظمة أسرع وأسهل وأكثر متعة.

لماذا أقل؟

كتب أحد منشئي Bootstrap منشور مدونة سريعًا حول هذا الموضوع ، ملخّصًا هنا:

  • يتم تجميع Bootstrap بشكل أسرع ~ 6x أسرع مع أقل مقارنة بـ Sass
  • تمت كتابة أقل بجافا سكريبت ، مما يسهل علينا الغوص والتصحيح مقارنةً بـ Ruby with Sass.
  • الاقل هو الاكثر؛ نريد أن نشعر وكأننا نكتب CSS ونجعل Bootstrap سهلًا للجميع.

ما يحتويه؟

كإمتداد لـ CSS ، يتضمن LESS المتغيرات والمزج لمقتطفات التعليمات البرمجية القابلة لإعادة الاستخدام والعمليات للرياضيات البسيطة والتداخل وحتى وظائف الألوان.

يتعلم أكثر

قم بزيارة الموقع الرسمي على http://lesscss.org/ لمعرفة المزيد.

تجميع Bootstrap بأقل

نظرًا لأن CSS الخاص بنا مكتوب بـ Less ويستخدم المتغيرات والمزج ، فيجب تجميعه لتنفيذ الإنتاج النهائي. إليك الطريقة.

ملاحظة: إذا كنت ترسل طلب سحب إلى GitHub باستخدام CSS معدل ، فيجب إعادة ترجمة CSS عبر أي من هذه الطرق.

أدوات للترجمة

سطر الأوامر

اتبع التعليمات الموجودة في الملف التمهيدي للمشروع على GitHub للترجمة عبر سطر الأوامر.

جافا سكريبت

قم بتنزيل أحدث إصدار من Less.js وقم بتضمين المسار إليه (و Bootstrap) في ملف <head>.

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

لإعادة تجميع ملفات .less ، ما عليك سوى حفظها وإعادة تحميل صفحتك. يقوم Less.js بتجميعها وتخزينها في التخزين المحلي.

تطبيق Mac غير رسمي

يراقب تطبيق Mac غير الرسمي أدلة من ملفات .less ويجمع الكود إلى الملفات المحلية بعد كل حفظ لملف بدون مشاهدة. إذا كنت ترغب في ذلك ، يمكنك تبديل التفضيلات في التطبيق للتصغير التلقائي والدليل الذي تنتهي به الملفات المترجمة.

تطبيقات أكثر

سحق

Crunch هو محرر ومجمع LESS رائع المظهر مبني على Adobe Air.

CodeKit

تم إنشاء CodeKit بواسطة نفس الشخص مثل تطبيق Mac غير الرسمي ، وهو تطبيق Mac يجمع LESS و SASS و Stylus و CoffeeScript.

بسيط

تطبيق Mac و Linux و Windows لسحب وإفلات تجميع أقل من الملفات. بالإضافة إلى ذلك ، فإن شفرة المصدر موجودة على جيثب .

استخدم كأصول ثابتة

ابدأ أي مشروع ويب سريعًا بإسقاط CSS و JS المجمعين أو المصغرين. طبقة على أنماط مخصصة بشكل منفصل لسهولة الترقيات والصيانة للمضي قدمًا.

إعداد هيكل الملف

قم بتنزيل أحدث Bootstrap مترجم وضعه في مشروعك. على سبيل المثال ، قد يكون لديك شيء مثل هذا:

  تطبيق/
      تخطيطات /
      قوالب /
  عام/
      المغلق /
          bootstrap.min.css
      شبيبة /
          bootstrap.min.js
      IMG /
          glyphicons-halflings.png
          glyphicons-halflings-white.png

استخدم قالب البداية

انسخ HTML الأساسي التالي للبدء.

  1. <html>
  2.   <head>
  3.     <title> قالب Bootstrap 101 </title>
  4.     <! - Bootstrap ->
  5.     <link href = "public / css / bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <الجسم>
  8.     <h1> مرحبًا بالعالم! </h1>
  9.     <! - Bootstrap ->
  10.     <script src = "public / js / bootstrap.min.js" > </script> 
  11.   </body>
  12. </html>

طبقة على رمز مخصص

اعمل في CSS و JS المخصصين وغيرهما حسب الضرورة لجعل Bootstrap ملكًا لك باستخدام ملفات CSS و JS المنفصلة الخاصة بك.

  1. <html>
  2.   <head>
  3.     <title> قالب Bootstrap 101 </title>
  4.     <! - Bootstrap ->
  5.     <link href = "public / css / bootstrap.min.css" rel = "stylesheet" >  
  6.     <! - مشروع ->
  7.     <link href = "public / css / application.css" rel = "stylesheet" >  
  8.   </head>
  9.   <الجسم>
  10.     <h1> مرحبًا بالعالم! </h1>
  11.     <! - Bootstrap ->
  12.     <script src = "public / js / bootstrap.min.js" > </script> 
  13.     <! - مشروع ->
  14.     <script src = "public / js / application.js" > </script> 
  15.   </body>
  16. </html>