ما هو Bootstrap وماذا يفعل؟

ما هو Bootstrap وماذا يفعل؟

فئة المقالة
Share on facebook
Share on twitter
Share on linkedin

ما هو Bootstrap وماذا يفعل؟

ما هو Bootstrap؟

Bootstrap عبارة عن مجموعة من الأدوات المجانية لإنشاء صفحات الويب وتطبيقات الويب التي تتضمن وظائف HTML و CSS و JavaScript لإنشاء وعرض النماذج والأزرار وعلامات التبويب والأعمدة وعناصر تصميم الويب الأخرى.

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

مثال على عناصر Bootstrap الافتراضية

في أغسطس 2011 ، جعل Twitter Bootstrap مفتوح المصدر ومجانيًا كإطار عمل لتصميم الويب ، وفي فبراير 2012 أصبح المشروع الأكثر شعبية على Github.

ما هو تاريخ كلمة Bootstrap؟

بصرف النظر عن مناقشة تصميم الويب والقضايا ذات الصلة ، فإن مصطلح Bootstrap وحده يعني “bootstrap” وكلمة Bootstraping تعني تشغيل عملية بشكل مستقل ودون استخدام موارد خارجية. هذا المصطلح أقصر قليلاً في علوم الكمبيوتر ويستخدم كـ Booting ، مما يشير إلى عملية إعداد النظام وإدخال المعلومات الأساسية للبرنامج في ذاكرة الكمبيوتر.

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

تقديم مميزات Bootstrap

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

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

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

Bootstrap بلغة بسيطة!

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

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

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

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

يساعدك Bootstrap كثيرًا في كيفية تغذية وتحسين عرض صفحات الويب ، والأهم من أي شيء آخر ، السرعة العالية للعمل بها ، مما يقلل من وقت بدء المشروع واكتماله بنسبة تصل إلى 80٪.

ما هي مشكلة Bootstrap؟

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

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

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

Bootstrap 4 هو اختراق في تكديس الصفحات

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

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

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

شارك معلوماتك وخبراتك في العمل مع Bootstrap معنا ومع الآخرين ، وإذا كنت تعرف موارد فارسية مناسبة لتدريس هذا النظام ، فقم بتقديمه في قسم التعليقات في هذا الموقع.