تصميم شريط تنقل بسيط باستخدام Bootstrap 4 (تحديث 2020)

تصميم شريط تنقل بسيط باستخدام Bootstrap 4 (تحديث 2020)

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

Bootstrap 4 محدد

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

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

ميزات تصميم Bootstrap

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

مكونات Bootstrap البسيطة

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

من خلال امتدادات JS و jQuery ، تتوفر المزيد من إضافات التصميم للمطورين. تمامًا كملاحظة ، يتعاون "jQuery" مع وظائف جافا سكريبت المتعددة لتطوير الويب على الأجهزة المحمولة. بالإضافة إلى ذلك ، يستخدم المكون الإضافي "كائنات النموذج الأولي"لقدرات التصميم المتقدمة. للتوضيح ، "كائن النموذج الأولي" يمكن المستخدمين من إرفاق وظائف إضافية أو خصائص تصميم لتصميم موقع ويب أفضل. كمكون أساسي آخر ، يمكن للمستخدمين التعبير عن مستويات عالية من الإبداع لأطر ذات خيارات تخصيص متقدمة. علاوة على ذلك ، تحتوي الأطر وقوالب الأنماط على ملفات CSS تعمل بشكل جيد مع برنامج Bootstrap.

الأنماط والتخطيطات باستخدام Bootstrap 4

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

الاختلافات بين الاثنين هي إعداد أسرع وأسهل للتخطيطات الثابتة. بالمقارنة ، هذا النمط يحتاج إلى اهتمام المستخدم عند التكيف مع العديد من المتصفحات عبر الإنترنت. يستخدم كلا الخيارين نظام الشبكة في Bootstrap مع أعمدة الصفحة وتنظيم فئة واجهة المستخدم. تنقسم فئات الشبكة إلى أربع فئات مختلفة. في Bootstrap ، تشمل فئات الشبكة LG و MD و SM و XS. من حيث عرض البكسل ، تتشكل معظم تخطيطات الشبكة من حجم شاشة الجهاز. على سبيل المثال ، من الأفضل تنفيذ فئة الشبكة "xs" لواجهة الهاتف. للمتابعة ، قد تناسب فئة الشبكة "sm" الجهاز اللوحي بشكل أفضل. علاوة على ذلك ، فإن "md" و "lg" قد يناسبان أجهزة الكمبيوتر المحمولة وواجهات سطح المكتب.

تحديثات Bootstrap 4

تحديثات Bootstrap 4

في الأصل ، تم إنتاج Bootstrap في عام 2010 باسم "Twitter Blueprint." تظل خدمات Bootstrap لمساعدة المطورين بإرشادات الأنماط. تظهر أوراق الأنماط الاختيارية ، بالإضافة إلى ميزات تطوير الويب الأسرع ، في التحديث السابق لـ Bootstrap 3. في الوقت الحاضر ، يعد Bootstrap 4 هو إصدار النسخة الحالية من Bootstrap 3 المتاح الآن لمصممي تطبيقات الأجهزة المحمولة ومطوري الويب. تتضمن التغييرات المحدثة تحسينات في أنماط الخطوط وأنظمة الشبكة وأنظمة التنقل وكائنات الوسائط والجداول والأزرار ومجموعات الأزرار. الميزات المحدثة الأخرى هي النماذج ومجموعات الإدخال ومجموعات القوائم والقوائم المنسدلة والطباعة واللوحات والصور المصغرة والآبار وتقسيم الصفحات.

SASS

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

فليكسبوت

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

تم تعريف شريط التنقل

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

أساسيات أشرطة التنقل في Bootstrap 4

اعتمادًا على عرض الواجهة ، يتوسع شريط التنقل Bootstrap وينهار على شاشات المستخدم. تتميز برامج NavBar القياسية بسهولة البرمجة وهي مسؤولة عن المستخدم المقصود. مبدئيًا ، قد يستخدم المطورون تسلسل ".navbar" لإنشاء شريط التنقل. بعد ذلك ، قد تتيح شفرة ".navbar-expand" الانهيار السريع لفئة "Navbar" التي تم تخزينها. بعد ذلك ، توفر أداة التوسيع خيارات ، مثل كبير جدًا ومتوسط ​​كبير وصغير عند استخدام تسلسل الطي. أيضًا ، قد يغير شريط التنقل خيارات العلامات التجارية ، والتسمية ، والتبديل ، والشفافية لـ تجربة أفضل للمستخدم. بالإضافة إلى ذلك ، قد يقوم المطورون بتكوين مجموعة متنوعة من أزرار التبديل للأجهزة المحمولة لزيادة الوظائف للمستخدمين.

للتوضيح ، فإن كود ".navbar-toggle" سيعد الميزة في Bootstrap. يتم توفير مُعدِّل أساسي أيضًا للمطورين لخيارات شفافية شريط التنقل. بمزيد من التفاصيل ، يمكن للمطورين التمرير عبر خيارات التخصيص ثم الانتقال إلى علامة تبويب الألوان. بعد ذلك ، افتح علامة تبويب أخرى باسم "التنقل" واضبط إعدادات الخلفية.

أخطاء NavBar الشائعة

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

إعداد شريط التنقل Bootstrap

بشكل أساسي ، يجب تنزيل bootstrap وتثبيته على كمبيوتر المطور.

إعداد Bootstrap

الإصدار المجاني ، BootstrapCDN ، متاح لبدء التشغيل السريع Bootstrap. بعد ذلك ، يطلب المسؤولون نسخة مكررة مباشرة من رابط ورقة الأنماط. يتم إدراج النسخة داخل علامة "الرأس" الأولية.

إعداد Bootstrap

المرحلة الثانية تخاطب المستخدمين لإدراج نص. الترتيب يتبع Popper.js و jQuery و Javascript plugins من قائمة Bootstrap المحددة. والأهم من ذلك ، يجب إضافة النص الجديد قبل علامة "body" حتى يعمل المكون بشكل مناسب.

إعداد شريط التنقل Bootstrap

مع ارتباط مفتوح المصدر وتسلسل البرنامج النصي الصحيح المرفق بنوع مستند HTML5 محدث ، يجب أن يظهر النص على النحو التالي.

نوع المستند المحدّث بتنسيق HTML5

إنشاء NavBar في Bootstrap

ثم قم بتشغيل موقع الويب بامتداد Bootstrap. توجه إلى عناصر مكون Bootstrap داخل قائمة قوالب مواقع الويب. من قسم المكونات ، توجد علامة تبويب تسمى "NavsBar" يجب أن تظهر. كملاحظة جانبية ، يختلف شريط "Navs" عن NavsBar "لأنه يشير إلى العناصر الموجودة داخل شريط التنقل. يجب إدراج المعلومات والإجراءات في صفحة ويب Bootstrap جنبًا إلى جنب مع ارتباط "نسخة" لقالب شريط التنقل. انسخ تسلسل Bootstrap Navigation Bar والصقه في نص HTML لموقع الويب.

فهم نص NavBar في Bootstrap

كإجراء أمني ، يجب أن يبدأ ارتباط "NavBar" المنشور بإشارة محدد "Nav" وينتهي بمؤشر "Nav". يضمن ذلك احتواء النسخة على القيم الصحيحة اللازمة لتصميم شريط تنقل بسيط باستخدام bootstrap 4. وبالمثل ، تتكون علامات "a" و "button" و "div" الأخرى من علامات بداية ونهاية لتسهيل التحديد والبرمجة الدقيقة.

ضمن التفاف النص NavBar ، قد يبدأ المطورون في تخصيص نمط شريط التنقل الخاص بهم. يجب على المستخدمين تحديد علامة "a" أولاً. هذه العلامة المحددة عبارة عن ارتباط بنص "شريط التنقل" القابل للإزالة. هذا النص المعين يشفر داخل العلامة. بمجرد إزالة النص من العلامة ، استبدل النص باسم موقع ويب المطور أو موقع الجوال. بعد ذلك ، يمكن للمستخدمين تحديد نص "النوع: الزر" مباشرة داخل علامة "الزر". عادةً ، يشير هذا النص إلى رمز يتيح للمستخدمين فحص شريط التنقل بمجرد وصول الشاشة إلى عرض مصغر معين.

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

تصميم شريط التنقل في Bootstrap 4

للمتابعة ، تقسم علامات "div" من رابط قالب شريط التنقل في Bootstrap علامات تبويب التنقل بعلامة "li". لتصميم علامات تبويب تنقل إضافية ، يجوز للمطورين نسخ المجموعة الأولى من "li's" داخل علامات "divs" ولصقها مباشرةً تحت بعضها البعض. ضمن نفس مجموعة "li" ، يمكن لمطوري الويب تحديد وإزالة الملصقات باستخدام "Span" ، جنبًا إلى جنب مع المؤشرات "النشطة" أعلى التسلسل المحدد ، لإنشاء تنسيق خط ثابت بين جميع علامات تبويب التنقل. أيضًا ، تساعد الوظائف المماثلة القابلة للتطبيق للقائمة "المنسدلة" المستخدمين في التخصيص في علامات التبويب المتوفرة في قالب شريط التنقل Bootstrap. أخيرًا ، يمكن تبديل خيارات الألوان بسهولة من خلال عمليات الضبط على علامتي "divs" و "Navbar" و "bg".

ميزات تصميم Navbar الإضافية

يعتمد تنوع تخصيصات شريط التنقل على إبداع مطوري الويب والجوّال. تعد إضافة النصوص وتحريرها داخل Bootstrap أمرًا بسيطًا وتتطلب نصًا متسلسلًا مسبقًا للرمز العام وموضعًا صحيحًا للتنفيذ المناسب. على سبيل المثال ، أضف فئات إضافية عن طريق إدخال وظائف مثل ".Nav-header" أو ".nav-pills" أو ".nav-tabs" إلى المناطق الصحيحة لعلامة "div".

الملخص

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

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

 

أنجيلو فريزينا

كاتب السيرة الذاتية

شارك Angelo في عالم تكنولوجيا المعلومات الإبداعي لأكثر من 20 عامًا. قام بإنشاء أول موقع ويب له في عام 1998 باستخدام Dreamweaver و Flash و Photoshop. وسع معرفته وخبرته من خلال تعلم مجموعة واسعة من مهارات البرمجة ، مثل HTML / CSS و Flash ActionScript و XML.

أكمل أنجيلو تدريبًا رسميًا مع برنامج CIW (مشرفي مواقع الإنترنت المعتمدين) في سيدني بأستراليا ، حيث تعلم الأساسيات الأساسية لشبكات الكمبيوتر ومدى ارتباطها بالبنية التحتية لشبكة الإنترنت العالمية.

بصرف النظر عن تشغيل Sunlight Media ، يستمتع Angelo بكتابة محتوى إعلامي يتعلق بتطوير الويب والتطبيقات والتسويق الرقمي والمواضيع الأخرى المتعلقة بالتكنولوجيا.

أضف تعليق

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