أفضل دروس تمهيدية لتصميم الويب سريع الاستجابة

يعد Bootstrap إطارًا شائعًا للواجهة الأمامية لتطوير الويب. يحتوي على مكونات مسبقة الصنع وعناصر تصميم لتصميم محتوى HTML. المتصفحات الحديثة مثل Chrome و Firefox و Opera و Safari و Internet Explorer تدعم Bootstrap.

يتضمن Bootstrap نظام شبكة متجاوب لتخطيطات مختلفة. إنها نقطة انطلاق رائعة لبناء موقع ويب سهل الاستخدام للجوال. يتضمن أيضًا وظائف JavaScript اختيارية مثل المحتوى القابل للطي ، والعناصر الدوارة ، والنماذج.

تاريخ النسخة

طور Twitter في الأصل إطار عمل Bootstrap كأداة داخلية. أطلقوه كمشروع مفتوح المصدر في أغسطس 2011.

تم إصدار Bootstrap 2 في يناير 2012. وكانت إحدى الميزات الأساسية هي إدخال نظام الشبكة المتجاوبة ذي 12 عمودًا. ظهر Bootstrap 3 في أغسطس 2013 ، حيث تحول إلى تصميم مسطح ونهج محمول أولاً. يتوفر Bootstrap 4 في الإصدار التجريبي اعتبارًا من أغسطس 2017 ، ويتضمن الآن Sass و Flexbox.

كان Bootstrap 4 قيد التطوير لمدة عامين قبل إطلاق بعض الإصدارات التجريبية خلال عام 2017 ، بينما تم طرح أول إصدار ثابت في يناير 2018. وتشمل بعض التغييرات الملحوظة ما يلي:

  • انتقل من ليس إلى ساس ؛
  • انتقل إلى Flexbox ونظام الشبكة المحسن ؛
  • البطاقات المضافة (استبدال الآبار والصور المصغرة واللوحات) ؛
  • وأكثر بكثير!

في وقت كتابة هذا التقرير ، كان أحدث إصدار من Bootstrap هو 4.1.3. إذا كنت ترغب في متابعة أي أخبار عن الإعلانات ، فاتبعها هنا.

التركيب

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

الارتباط بمصدر آخر

يمكنك إضافة Bootstrap CSS باستخدام عنصر داخل صفحة الويب الخاصة بك يشير إلى شبكة توصيل المحتوى (CDN):

تتشابه إضافة عناصر JavaScript في Bootstrap مع العناصر التي يتم وضعها عادةً في أسفل علامتك. قد تحتاج إلى تضمين بعض التبعيات أولاً. انتبه بشكل خاص إلى الترتيب المدرج:

ملاحظة: هذه مجرد أمثلة ويمكن تغييرها دون إشعار. يرجى الرجوع إلى CDN للحصول على الروابط الحالية لتضمينها في مشروعك.

تحميل ملف التثبيت

يمكنك تنزيل ملفات مصدر Bootstrap وتثبيتها باستخدام Bower أو Composer أو Meteor أو npm. يتيح ذلك قدرًا أكبر من التحكم وخيار تضمين أو استبعاد الوحدات حسب الحاجة.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

ملاحظة: هذه أمثلة فقط وقد تتغير بدون إشعار. يرجى الرجوع إلى موقع ويب "rel =" nofollow "> Bootstrap الفارغ للحصول على أحدث الروابط.

نظام شبكة Bootstrap

نظام الشبكة هو نظام فليكس بوكس ​​متنقل أولاً لبناء مخططات سريعة من جميع الأشكال والأحجام المناسبة لجميع الأجهزة. يعتمد على تخطيط مكون من 12 عمودًا ويحتوي على مستويات متعددة ، واحدة لكل نطاق استعلام عن الوسائط.

يأتي Bootstrap مع فئات شبكة محددة مسبقًا لاستخدامك في الترميز. اطلع على مزيد من التفاصيل والأمثلة على //getbootstrap.com/docs/4.1/layout/grid/

ميزات Boostrap

معلومات اكثر:

يحتوي Bootstrap على توثيق شامل مع العديد من الأمثلة ونموذج HTML للبدء (يحتوي هذا القالب فقط على برنامج نصي ؛ لا يحتوي على إعداد لنظام الشبكة إذا كان هذا هو ما تبحث عنه).

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

موارد التمهيد:

مدونة Bootstrap الرسمية

إلهام موقع Bootstrap

عرض المواقع التي تم إنشاؤها باستخدام Bootstrap

HTML linter للمشاريع التي تستخدم Bootstrap

عناصر التصميم ومقتطفات التعليمات البرمجية لـ Bootstrap

التعليمات البرمجية والموضوع والموارد الإضافية لـ Bootstrap

الشروع في البرنامج التعليمي Bootstrap

يجعل استخدام Bootstrap من السهل تصميم موقع ويب سريع الاستجابة تمامًا وهو إطار عمل يستحق التعلم.

ما هو الموقع المتجاوب؟

موقع الويب سريع الاستجابة هو موقع ويب يقوم بتغيير حجم العناصر الموجودة في الصفحة وإعادة ترتيبها وفقًا لحجم متصفحك. باستخدام موقع ويب سريع الاستجابة ، إذا قمت بتغيير حجم المتصفح الخاص بك ، يمكنك رؤية التغييرات تحدث في الوقت الفعلي. Bootstrap يجعل موقع الويب الخاص بك مستجيبًا لك.

كيفية إضافة Bootstrap إلى صفحتك

تعد إضافة bootstrap إلى صفحتك عملية سريعة ، ما عليك سوى إضافة ما يلي إلى العلامات في التعليمات البرمجية الخاصة بك.

ستحتاج أيضًا إلى إضافة ما يلي بين bodyالعلامات في التعليمات البرمجية الخاصة بك. مع التمهيد ، ستستخدم العلامات. عند استخدام العديد من ميزات Bootstrap ، سيكون لكل علامة مجموعتها الفريدة من الفئات المطبقة التي تسمح للعلامة بأداء مهمتها. ستعرض الأقسام الأخرى من دليل Bootstrap المزيد من الأمثلة عن كيفية استخدام Bootstrap للعلامات. ( العلامات ليست حصرية لـ Bootstrap ، ولكن يستخدمها Bootstrap.).

يوجد أدناه الرمز الذي سيضيف إلى bodyالعلامات في شفرتك لإنهاء البدء. ضع في اعتبارك أنه أثناء إنشاء الحاوية ، ستظل الصفحة فارغة حتى تقوم بإضافة محتوى إلى الحاوية.

Congratulations!

Bootstrap is now working on this page

القوالب

القوالب عبارة عن مجموعات أدوات تم إنشاؤها مسبقًا تجعل تدوير صفحة ويب جديدة أمرًا سهلاً. إذا كانت لديك فكرة عامة عن التخطيط الذي تريده ، أو إذا كنت ترغب في استعراض مكتبة من قوالب التخطيط الشائعة للأفكار ، فإن قوالب Bootstrap تأخذ الكثير من التعب والإحباط بعيدًا عن عملية الإنشاء الأولية. تساعدك هذه المساعدة على التركيز على التفاصيل الدقيقة للمشروع بدلاً من التساؤل عن سبب عدم تعاون CSS.

ابدء

روابط القالب

شريط التنقل

يوفر لك إطار عمل Bootstrap أشرطة تنقل استدعاء ميزة. باختصار ، يعد شريط التنقل (يُشار إليه أيضًا باسم أشرطة التنقل) رأسًا في أعلى الصفحة لعرض معلومات التنقل.

كيف تستعمل

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

مثال رمز

هذا هو الرمز المطلوب لإنشاء شريط التنقل الأساسي.

 Site Name 
      
  • Home
  • Page 1
  • Page 2
  • Page 3

أنماط نافبار

يوفر Bootstrap مجموعة من الفئات في إطار عمل Bootstrap لتصميم أشرطة التنقل الخاصة بك. هذه الفئات هي كما يلي:

إضافة القوائم المنسدلة إلى شريط التنقل

يمكنك تضمين قائمة منسدلة داخل شريط التنقل. تتطلب هذه الميزة تضمين ملف جافا سكريبت الخاص بـ Bootstrap حتى يعمل.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • إضافة أزرار إلى شريط التنقل

    يمكنك إضافة أزرار على شريط التنقل. تعمل فئات Bootstrap Button الحالية ، ومع ذلك ستحتاج إلى تضمين الفصل navbar-btnفي نهاية قائمة الفصل.

    Button

    إضافة نماذج إلى شريط التنقل

    يمكنك أيضًا إضافة نماذج إلى شريط التنقل. يمكن استخدام هذا في مهام مثل حقل البحث وحقل تسجيل الدخول السريع وما إلى ذلك.

     Search 

    محاذاة العناصر إلى اليمين على شريط التنقل

    في بعض الحالات ، قد ترغب في محاذاة العناصر الموجودة في شريط التنقل إلى اليمين (على سبيل المثال ، زر تسجيل الدخول أو التسجيل). للقيام بذلك ، ستحتاج إلى استخدام navbar-rightالفصل.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    عرض شريط التنقل بشكل مستقل عن التمرير

    في بعض الحالات ، قد ترغب في الاحتفاظ بشريط التنقل أعلى أو أسفل الشاشة بغض النظر عن التمرير. سوف تحتاج إلى إضافة navbar-fixed-topأو navbar-fixed-bottomclass إلى العنصر.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    انهيار شريط التنقل

    على شاشة صغيرة (مثل الهاتف أو الجهاز اللوحي) ، سيشغل شريط التنقل مساحة كبيرة. لحسن الحظ ، يوجد خيار طي شريط التنقل. يمكنك تحقيق ذلك باستخدام المثال التالي.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    أمثلة Navbar