في عام 2011 ، قدم تويتر إطار عمل Bootstrap. منذ ذلك الحين ، شهد إطار عمل CSS هذا إعادة كتابتين رئيسيتين ، مع الإصدار الأحدث (Bootstrap 3) في عام 2013. قام Bootstrap 3 بتحويل مكتبة CSS من خلال تطبيق نهج محمول أولاً ترك إطار العمل مستجيبًا تمامًا.
اعتبارًا من عام 2022 ، أصبح Bootstrap في الإصدار الخامس وهو أحد أكثر أطر عمل الواجهة الأمامية شيوعًا. يحتوي على قائمة واسعة من المكونات التي تم إنشاؤها مسبقًا ومجموعة رائعة من مكونات JavaScript الإضافية. في هذه المقالة ، ستتعلم كيفية استخدام Bootstrap وتحقيق أقصى استفادة من ميزاته.
تثبيت Bootstrap في مشروعك
هناك ثلاث طرق ل استخدم Bootstrap في مشروعك. يمكنك تنزيل ملفات CSS و JavaScript واستضافتها ، وتثبيتها في مشروعك باستخدام npm ، أو نسخ ولصق روابط cdn المناسبة في مشروعك.
باستخدام نهج cdn ، عليك أن تتذكر وضع رابط Bootstrap قبل أي رابط CSS آخر في علامة الرأس لملف HTML الخاص بك.
تحتوي بعض مكونات Bootstrap على أنشطة وظيفية ، مثل تبديل الأزرار وتحديد الموضع الذي يتطلب استيراد JavaScript و Popper script. لذلك ، إذا كنت تنوي استخدام أي مكونات وظيفية ، فستحتاج إلى إضافة علامة البرنامج النصي إلى ملف HTML أيضًا.
آخر شيء تحتاجه لبدء استخدام Bootstrap هو ملف منفذ العرض بطاقة شعار.
نظرًا لأن Bootstrap هو أول تقنية للهواتف المحمولة ، فإن منفذ العرض بطاقة شعار سيساعد في التصميم سريع الاستجابة. طريقة بسيطة لاستخدام bootstrap في مشروعك هي مجرد نسخ نموذج بدء تشغيل Bootstrap.
إنشاء موقع على شبكة الإنترنت باستخدام Bootstrap
عند إنشاء موقع ويب جديد ، فإن أحد الأشياء الأولى التي تحتاج إلى مراعاتها هو التخطيط. بعد ذلك ، يمكنك الانتقال إلى مكونات أخرى مثل الأزرار والطباعة.
يحتوي Bootstrap على مجموعة من المكونات الهيكلية التي يمكنك استخدامها لتنظيم العناصر على صفحة الويب. تشمل هياكل التخطيط هذه:
- حاويات
- جريد
- الأعمدة
- المزاريب
- نقاط التوقف
باستخدام نسخة معدلة قليلاً من نموذج بدء التشغيل Bootstrap ، يمكنك البدء في تحديد هيكل صفحة الويب الخاصة بك وإضافة مكونات جديدة.
ملف index.html
العلامات الوصفية المطلوبةBootstrap CSS
التمهيد
منفصلة بوبر و Bootstrap JS
فئة حاوية Bootstrap
التمهيد حاوية الفصول الدراسية تحتوي على العناصر الموجودة في صفحة الويب الخاصة بك وتحتوي على محاذاة. إذا كنت تخطط لاستخدام Bootstrap's الشبكة الافتراضية، فستحتاج أيضًا إلى استخدام Bootstrap's حاوية صف دراسي. هناك ثلاثة أنواع من حاوية الطبقات؛ حاوية, سائل الحاوية، و حاوية- {نقطة توقف}. فئة الحاوية هي الحاوية الافتراضية ؛ إنه سريع الاستجابة وله عرض ثابت في كل من نقاط توقف Bootstraps الستة.
تتضمن نقاط التوقف الافتراضية الستة في Bootstrap ما يلي:
- صغير جدا: أقل من 576 بكسل.
- صغير: أكبر من أو يساوي 576 بكسل.
- متوسط: أكبر من أو يساوي 768 بكسل.
- كبير: أكبر من أو يساوي 992 بكسل.
- X-كبير: أكبر من أو يساوي 1200 بكسل.
- XX- كبير: أكبر من أو يساوي 1400 بكسل.
لاستخدام Bootstrap's حاوية في مشروعك ، يمكنك ببساطة إضافة فئة الحاوية المطلوبة إلى الخارج شعبة على صفحة الويب الخاصة بك.
استخدام حاوية Bootstrap
ضع عناصر الموقع هنا سيؤدي إدخال الكود أعلاه في نص ملف HTML الحالي إلى جعل صفحة الويب الخاصة بك سريعة الاستجابة ، كما سيؤدي إلى إنشاء حشوة على كل جانب من جوانب صفحة الويب الخاصة بك.
نظام شبكة التمهيد
تستخدم شبكة Bootstrap نظامًا من اثني عشر عمودًا يعتمد على صف و العمود فئات الشبكة ، وكذلك فئة الحاوية. يحتوي كل صف على اثني عشر عمودًا ، ويمكن لأي عنصر أن يمتد عبر واحد أو أكثر من هذه الأعمدة. سيشير تصنيف العمود إلى عدد الأعمدة التي يجب أن يشغلها العنصر. على سبيل المثال ، عنصر يستخدم الامتداد العمود 2 ستمتد الفئة عبر عمودين ، عنصر يستخدم العمود 3 سوف يمتد الفصل عبر ثلاثة أعمدة ، وهكذا دواليك.
يعتمد نظام شبكة Bootstrap على وحدة flexbox. إذا احتل عمودان فقط صفًا ، فسيتم تقسيم المساحة بالتساوي فيما بينهما. ال مزراب class هي أحد العناصر الهيكلية في Bootstrap ، وتتحكم في التباعد بين كل عمود في ملف نظام الشبكة. كل جريد مساحة عمودية 12 بكسل على كلا الجانبين.
باستخدام نظام شبكة Bootstrap
المحتوى الرئيسي على صفحة ويب
شرط
Lorem ipsum، dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo labouriosam a، voluptate molestias eum velit، premium impedit
من حيث عدد الوجوه ، الاختيار من بين الخيارات المتاحة.
سيؤدي إدخال الكود أعلاه في حاوية div إلى إنشاء نظام شبكة Bootstrap يتكون من ثلاثة صفوف وعمودين. سيحتوي الصف الأول في الأعلى على شريط التنقل ، وسيحتوي الصف الثالث في الأسفل على تذييل موقع الويب ، وسيحتوي الصف الثاني في المنتصف على محتوى صفحة الويب. يحتوي الصف الثاني على عمودين - المقالة الرئيسية والعمود الجانبي.
سيسمح لك إنشاء ملف CSS محلي وإضافة حد لكل قسم من الشبكة برؤيته بشكل أكثر وضوحًا.
ملف style.css
.صف{
الحدود: 2 بكسل زرقاء صلبة ؛
}
.col ، .col-sm-4 {
الحدود: 2 بكسل صلبة حمراء ؛
}
سيؤدي الارتباط بملف CSS أعلاه إلى إنشاء الإخراج التالي في متصفحك:
الاختلاف الواضح في الصورة أعلاه هو حجم الأعمدة. عادةً ما يحتل عمودان (أو أكثر) متتاليان نفس القدر من المساحة ما لم تنص صراحةً على خلاف ذلك. ال العمود- SM-4 تضمن الفئة في كود HTML أعلاه أن العمود الثاني يمتد فقط على أربعة من الأعمدة الاثني عشر في الصف. ال سم في ال العمود- SM-4 يمثل class نقطة التوقف الصغيرة ، لذلك ، سيشغل القسم الجانبي أربعة أعمدة فقط من نقطة التوقف الصغيرة وما فوقها.
مكونات Bootstrap
بعد أن تقرر تخطيط صفحة الويب الخاصة بك ، فإن الخطوة التالية هي إضافة عناصر بناء موقع الويب ، والتي يسميها Bootstrap المكونات. تتضمن قائمة مكونات Bootstrap ما يلي:
- نافبار
- أزرار
- مجموعة الأزرار
- مجموعة القائمة
- البطاقات
- انهيار
- هبوط قطرة
فئة Bootstrap Navbar
يتطلب كل شريط تنقل Bootstrap ملف نافبار صف دراسي. تتطلب أيضًا استخدام ملف أو تعيين الكلمة الأساسية "التنقل" إلى Bootstrap وظيفة السمة في أصل navbar شعبة. لجعل شريط التنقل سريع الاستجابة ، ستحتاج إلى استخدام امتداد طي البرنامج المساعد جافا سكريبت.
التمهيد نافبار يستخدم الفصل الأغنية الحالية السمة التي تأخذ قيمة "الصفحة" للإشارة إلى الصفحة الحالية ، أو "صواب" للإشارة إلى القسم الحالي من صفحة الويب. ستعتمد القيمة التي تحددها على بنية موقع الويب الخاص بك (صفحة واحدة أو صفحات متعددة). يجب عليك أيضًا استخدام ملف فئة نشطة للإشارة إلى الصفحة أو القسم الحالي.
استخدام شريط التنقل في Bootstrap
استبدال الملاحة صف من Bootstrap جريد باستخدام الكود أعلاه ، سيتم إنشاء الإخراج التالي في متصفحك:
هناك العديد من الفئات المهمة الأخرى وسمات Bootstrap في الكود أعلاه ، مثل نافبار العلامة التجارية فئة ، والتي تستهدف قسم الشعار الخاص بك نافبار. ال نافبار هو أيضًا مستجيب تمامًا بفضل طي البرنامج المساعد جافا سكريبت.
مستجيب Navbar
قد تتذكر أن Bootstrap يحتوي على ستة ملفات افتراضية نقاط التوقف وإحدى نقاط التوقف تلك كبيرة (lg). ال نافبار توسيع ال جي فئة في أعلاه إلى قائمة أفقية لعناصر التنقل عند نقطة الإيقاف الكبيرة وما فوقها ، وتعود تلك القائمة إلى زر في أي نقطة توقف أقل من الحجم الكبير.
إذا كنت تريد معرفة المزيد حول إنشاء مواقع ويب سريعة الاستجابة ، فقد قمنا بتجميع جزء من الملخص كيفية القيام بذلك مع استعلامات الوسائط في HTML و CSS.
مكون زر التمهيد
التمهيد زر يستخدم المكون ال ويتطلب أن تقوم بتعيين اكتب السمة إلى "زر".
يحتوي Bootstrap على عدة أنواع من الأزرار. لإنشاء زر أكثر تقليدية ، ستستخدم ملحق BTN الصف ، ولكن لإنشاء زر هامبرغر كما في الكود أعلاه ، يمكنك استخدام نافبار التبديل صف دراسي.
متى يجب استخدام Bootstrap؟
يُعرف Bootstrap بأنه أحد أطر CSS الأكثر شيوعًا لأنه رائد. قبل وقت طويل من أن يكون التصميم سريع الاستجابة شائعًا جدًا في تطوير البرامج ، قام Bootstrap بتحويل نفسه إلى إطار عمل سريع الاستجابة تمامًا.
على مر السنين ، استمر Bootstrap في التقدم والتحسين ، مما جعله الخيار الأول للشركات الكبرى ، مثل Twitter و Spotify. ومع ذلك ، لن يكون دائمًا الخيار الأفضل لاحتياجات تطوير البرامج الخاصة بك. على سبيل المثال ، إذا كنت تنشئ تطبيق React ، فهناك نظام تصميم يسمى MUI مخصص لتطبيقات React.
أصبح Material-UI له اسم جديد ويهدف إلى إنشاء نظام تصميم جديد بديل لتصميم المواد. إليك كيفية استخدام MUI في مشاريع ReactJS.
اقرأ التالي
- برمجة
- تويتر
- نصائح الترميز
- برمجة
- أدوات البرمجة
قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
