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

يعد 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

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.

 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

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

تاريخ النسخة

التركيب

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

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

نظام شبكة Bootstrap

ميزات Boostrap

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

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

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

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

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

القوالب

ابدء

روابط القالب

شريط التنقل

كيف تستعمل

مثال رمز