في هذا المنشور ، سنرى تخطيط موقع Bootstrap لعرض القدرات المذهلة لإطار عمل هذا المصدر المفتوح. في المقالات السابقة لقد قمنا بتركيب بيئة تطوير والإضافات الضرورية لتسهيل عملنا.
تذكر أنه بصفتك مدير المحتوى لـ Linux Adictos لا يسمح لي بإدراج رمز الأمثلة التي قمت بتحميلها إلى GitHub. لتنزيلها، يجب عليك تثبيت حزمة Git على التوزيعة الخاصة بك ثم كتابة الأوامر التالية:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
ستحتاج إلى تشغيل هذين الأمرين بشكل دوري لتنزيل الملفات الجديدة.
تحليل الكود
الآن في مستكشف الملفات ، افتح example2.html باستخدام VSCodium. (فتح بالزر الأيمن) نرى ما يلي:
- في السطر الأول نخبر المتصفح بنوع المستند حتى يعرف كيفية عرضه.
- يشير السطر 2 إلى لغة الموقع ، والتي تخبر المتصفح بكيفية تمثيل أحرف معينة ولغة المحتوى لمحركات البحث ، مما يسهل تحديد المواقع. في الكود الخاص بنا ، تم تعريفه على أنه es ولكن هناك متغيرات إقليمية مثل es_ES للإسبانية من إسبانيا أو es_AR للإسبانية من الأرجنتين.
- من السطر 3 لدينا حاوية بيانات وصفية تقع بين العلامات ص . توفر البيانات الوصفية معلومات حول المستند. في مثالنا:
- يشير السطر 4 إلى المعيار المستخدم لترميز الأحرف. ربما رأيت في بعض الأحيان أنه بدلاً من الأحرف المحركة أو الرموز الخاصة ، يتم عرض علامة استفهام داخل الماس. هذا لأن المتصفح يستخدم ترميزًا غير صحيح. يتجنب البيان الموجود في السطر 8 ذلك بإعلانه صراحة.
- في السطر الخامس نقول للمتصفح كيف يجب أن يتكيف مع تنسيقات الشاشة المختلفة.
- سيتم عرض العنوان الذي حددناه في السطر 6 في الشريط العلوي للمتصفح وفي محركات البحث.
- في السطر 7 نخبر المتصفح بمكان العثور على عناصر إطار عمل Bootstrap ذات الصلة بالتصميم.
- تبدأ الحاوية من السطر 10. يتضمن النص محتوى صفحة الويب والرابط إلى نصوص Bootstrap التي ستوفر تفاعلاً لموقعنا.
- يشير السطر 13 إلى نهاية المستند.
تخطيط موقع Bootstrap
المفاهيم الأساسية لتخطيط موقع Bootstrap
كما قلنا في المقالات السابقة ، Bootstrap يأخذ النهج المحمول الأول. عند تطبيق هذا الأسلوب ، يتم التصميم بالجهاز مع وضع أصغر حجم للشاشة في الاعتبار ، ثم تتم إضافة طبقات لتكييفها مع الأحجام التالية.
هنا يجب أن نأخذ بعين الاعتبار مفهومين رئيسيين:
- نقاط التوقف.
- استشارة إعلامية.
تشير نقاط التوقف إلى عرض الشاشة الذي يتم تعديل التخطيط منه.، تطبق استعلامات الوسائط معلمات النمط بناءً على خصائص متصفح ونظام تشغيل معين. بمعنى آخر ، سيكون لكل نقطة توقف نمط مطابق.
يأتي Bootstrap بستة نقاط توقف محددة مسبقًا يمكن تعديلها بواسطة مبرمجين أكثر تقدمًا. النقاط الافتراضية هي:
- صغير جدًا: لا يحتوي على معرف محدد مسبقًا وينطبق على الشاشات التي يقل عرضها عن 576 بكسل.
- صغير: يتم التعرف عليه بالرمز sm ويستخدم للشاشات من 576 بكسل.
- متوسط: يتم تحديده بـ md ويستخدم للشاشات من 768 بكسل.
- الطول: تم تعريفه على أنه lg ويستخدم للشاشات من 992 بكسل.
- طويل جدًا: يحتوي على المعرف lg ويطبق الأنماط على الشاشات من 1200 بكسل.
- طويل جدًا إضافي: يتم تمييزه بالمعرف xxl ، ويتم استخدامه لتطبيق التصميم على الشاشات من 1400 بكسل.
لم يتم اختيار هذه الأحجام بشكل عرضي يمكن أن تحتوي كل نقطة من نقاط التوقف على حاويات يكون عرضها من مضاعفات 12. كما أنها لا تستهدف جهازًا معينًا ، ولكنها تتكيف بدلاً من ذلك مع فئات مختلفة من الأجهزة وأحجام الشاشة.
ضمن أحجام الشاشة المختلفة نجد الحاويات. هؤلاء مسؤولون عن استضافة وملء ومواءمة محتوى الموقع في جهاز معين أو نافذة رسومي.
;