اجعل Bootstrap في متناول اليد


الدرس: البداية


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

إطار عمل؟


بادئ ذي بدء ، عليك تحديد ما هو الإطار. إنها عبارة عن مجموعة من المكونات المهيكلة المستخدمة لإنشاء الأساسيات وتنظيم كود الكمبيوتر لتسهيل عمل المبرمجين ، سواء من حيث الإنتاجية أو تبسيط الصيانة. هناك العديد من تطبيقات الويب التي تستهدف العديد من اللغات: Java و Python و Ruby و PHP ...
هناك أطر عمل من جانب الخادم (يشار إليها باسم الواجهة الخلفية backend باللغة الإنجليزية) ، وأخرى على جانب العميل (يشار إليها باسم الواجهة الأماميةfrontend باللغة الإنجليزية). Bootstrap جزء من هذه الفئة الثانية. تتخصص أطر CSS ، كما يوحي اسمها ، في CSS ! بمعنى أنها تساعدنا على تشكيل صفحات الويب: التنظيم ، المظهر ، الرسوم المتحركة ... لقد أصبحت عصرية وهناك العديد:
Bootstrap هو إطار CSS ، ولكن ليس فقط ، لأنه يتضمن أيضًا مكونات HTML و JavaScript . يتضمن نظام شبكة بسيط وفعال لترتيب الجانب المرئي لصفحة ويب. إنه يجلب أسلوبًا للأزرار والأشكال والابحار ... ويسمح بتصميم موقع ويب بسرعة مع إضافة بضعة أسطر من التعليمات البرمجية. إن الإطار الأقرب إلى Bootstrap هو بلا شك Foundation والذي يتم تقديمه على أنه " الإطار الأمامي الأكثر استجابة في العالم ". هل هذا الغرور مناسب؟ أعتقد أنها في الغالب مسألة ذوق وتفضيل شخصي. على أي حال ، من حيث الشعبية ، فإن Bootstrap هو الذي يفوز.
الفوائد
  • المتصفحات مليئة بالخيال ولديها سلوكيات مختلفة للغاية على الرغم من تقاربها البطيء نحو المعايير. الأطر متقاطعة ، أي أن العرض متشابه بغض النظر عن المتصفح المستخدم والتوافق التام.
  • توفر أطر CSS وقت التطوير لأنها توفر لنا أساس العرض التقديمي.
  • تعمل أطر CSS على توحيد العرض التقديمي من خلال اقتراح مجموعة متجانسة من الأنماط.
  • توفر أطر CSS عادةً شبكة لسهولة تحديد المواقع للعناصر.
  • غالبًا ما تقدم أطر عمل CSS عناصر مكملة: الأزرار الجمالية ، أشرطة التنقل ، إلخ.
  • يتطلب النشر الواسع لطرق جديدة لعرض الويب (الهواتف الذكية والأجهزة اللوحية ...) الآن النظر في أحجام الشاشة المتنوعة للغاية ؛ عادة ما تأخذ أطر CSS هذا القيد في الاعتبار.
السلبيات
  • لاستخدام إطار فعال ، من الضروري معرفة ذلك جيدًا ، مما يعني وقتًا للتعلم.
  • يمكن أن يصبح تطبيع العرض التقديمي مملاً عن طريق تجانس التأثيرات المرئية.
مقارنةً بالعيبين المذكورين ، فإن Bootstrap هي بداية سريعة حتى للمبتدئين وهي قابلة للتكوين بالكامل لأنها مبنية على LESS (التي سنراها في الدورة التدريبية).

اكتشف BOOTSTRAP


أصل BOOTSTRAP
أنت تعرف بالضرورة Twitter ، واحدة من الشبكات الاجتماعية الرئيسية التي تغمر الكوكب الروابط الافتراضية بين البشر تصبح نواة cybernetic . تم إنشاء مشروع Bootstrap في الأصل بواسطة مارك أوتو وجاكوب ثورنتون لتلبية احتياجات التطوير الداخلي لهذه الشركة في توحيد شكل ومظهر صفحات الويب. كان مجرد أسلوب CSS ، ولكن تم إثراء الإطار بعد ذلك بمكونات JavaScript .

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

تم إتاحتها للجمهور بموجب ترخيص Apache . يوجد الإطار حاليًا في الإصدار 3. لقد اتخذ منعطفًا خاصًا من خلال دمج الجانب "responsive و تعني الاستجابة" افتراضيًا ، في حين كانت هذه الميزة في السابق موضوع ملف منفصل. تم الإعلان عن هذا الإصدار كـ "mobile-first" . مع الاستخدام المتزايد للأجهزة المحمولة ، تم تكييف إطار العمل لتقديم حل من المفترض أن يغطي جميع الاحتياجات.

محتويات المجموعة
عروض Bootstrap :
  • تخطيط يستند إلى شبكة من 12 عمود مفيد. بالطبع ، إذا كنت بحاجة إلى أكثر من 12 عمودًا ، أو أقل ، فمن الممكن دائمًا تغيير التكوين ؛
  • استخدام Normalize.css ؛
  • كود يعتمد على HTML5 و CSS3 ؛
  • مكتبة مفتوحة المصدر بالكامل بموجب ترخيص MIT ؛
  • الشفرة التي تأخذ في الاعتبار تنسيق عرض أدوات التنقل الرئيسية ( responsive design  التصميم المتجاوب) : الهواتف الذكية والأجهزة اللوحية ... ؛
  • الإضافات jQuery ذات  الجودة.
  • ونتيجة عبر متصفح cross-browser  ( تم التخلي عن دعم IE7 مع الإصدار 3 )، والحد الأقصى لذلك ضمان التوافق.
  • وثائق جيدة
  • ضمان تطور دائم ؛
  • ثروة من الموارد المتنوعة على شبكة الإنترنت ؛
  • بنية تستند إلى LESS ، وهي أداة سهلة الاستخدام تعمل على توسيع إمكانيات CSS ( يوجد منفذ على SASS  أيضًا )
يمكنك العثور على جميع المعلومات الموجودة على Bootstrap مباشرة على موقع الويب المخصص .
ما هو normalize.css؟
لا تعتمد المستعرضات جميعها نفس القيم التلقائية لأنماط عناصر HTML . يمكن أن ينتج عن ذلك بعض المفاجآت عند تقديم صفحات الويب حسب المتصفح المستخدم. من ناحية أخرى ، تعاني بعض المتصفحات من عيوب في مراعاة بعض العناصر. Normalize هو ملف CSS صغير يحدد القواعد ليكون لها نفس العرض بغض النظر عن المتصفح المستخدم. بدلاً من التصرف بوحشية مثل إعادة تعيين CSS التي تعيد تعيين جميع القيم إلى الصفر ، normalize تتصرف بذكاء عن طريق الحفاظ على ما هو مفيد ولعب العناصر بدقة. يمكنك العثور على تفاصيل القواعد المطبقة مع شرحها هنا
تطور BOOTSTRAP
Bootstrap هو إطار شائع جدًا يتطور بسرعة كبيرة مع وصول متكرر للإصدارات الجديدة. هذه ميزة في آن واحد (تتطور شيئا فشيئا) وعيوب (يصبح الكود الذي كتبناه للتخطيط سريعًا قديمًا للإصدارات الجديدة). كان الانتقال إلى الإصدار 3 ثورة صغيرة مع العديد من التغييرات ، لا سيما إصلاح كامل للشبكة. يجب إعادة كتابة الموقع المكتوب عليه الإصدار 2 بالكامل لهذا الإصدار الجديد ، لكن من الواضح أنه ليس التزامًا. كان تطور الإطار في اتجاه الأجهزة البدوية التي أصبحت تدريجياً أكبر أسطول من الأجهزة لتصفح الإنترنت.
المصدر الرئيسي للمعلومات لمعرفة التغييرات في الإصدارات الجديدة هو الموقع الرسمي . من المثير للاهتمام أيضًا التحقق من صفحة GitHub من المشروع لسحب طلبات المستخدمين (Pull Requests) والمشكلات (Issues).
سيكون الإصدار الرئيسي التالي هو الإصدار 4 مع العديد من التحسينات في الأفق.
تم تحديث هذه الدورة التدريبية إلى الإصدار 3.3 وتم اختبار جميع المعلومات والأمثلة المقدمة في هذا الإصدار.

التثبيت


تثبيت BOOTSTRAP
تثبيت Bootstrap بسيط: انقر فوق زر التنزيل على موقع الإطار . لديك ثلاثة أزرار متوفرة:
  • تنزيل Bootstrap" : يسمح لك باستعادة الملفات الضرورية لتشغيل Bootstrap فقط.
  • "تنزيل المصدر": يسمح لك باستعادة جميع الملفات المصدر.
  • "تنزيل Sass" : هو منفذ Bootstrap في Sass لمستخدمي المشروعات التي تستخدم Sass ( Rails ، Compass ... ) .
يمكنك أيضًا الانتقال مباشرةً إلى الكود المصدري على github ، أو حتى تثبيته باستخدام Bower إذا كنت تستخدم node .
عندما تقوم بتنزيل المكتبة باستخدام زر "Download source" ، ستحصل على ملف مضغوط يحتوي على دليل bootstrap-3.3.7 يحتوي في حد ذاته على عدد من الملفات والمجلدات ، كما هو موضح في الشكل التالي.
jQuery web
توجد ملفات مفيدة لمجرد استخدام Bootstrap في المجلد dist (" distributionالتوزيع") ، وهذه هي الملفات الوحيدة التي تحصل عليها إذا استخدمت زر "Download Bootstrap" .
jQuery web
يحتوي المجلد "dist" على ملفات مفيدة لاستخدام Bootstrap
دعنا نلقي نظرة على الملفات الرئيسية:
  • bootstrap.css يشمل الفئات الأساسية من Bootstrap ؛
  • bootstrap.min.css لديه نفس الفئات الأساسية كما bootstrap.css لكنه مصغّر ؛
  • bootstrap-theme.css يحتوي على قواعد نمط خاصة لإنشاء سمة Bootstrap معينة ؛
  • bootstrap-theme.min.css مطابق bootstrap-theme.css لكن تم تصغيره
  • glyphicons-halflings-regular.svg يحتوي على مجموعة الرموز في تنسيق svg ؛
  • glyphicons-halflings-regular.ttf يتضمن مجموعة من الرموز بتنسيق ttf ؛
  • glyphicons-halflings-regular.woff يحتوي على مجموعة من الرموز في تنسيق woff .
  • glyphicons-halflings-regular.eot يحتوي على مجموعة من الرموز في شكل eot .
  • bootstrap.js يحتوي على كود JavaScript لمكونات Bootstrap ؛
  • bootstrap.min.js يحتوي على نفس كود JavaScript ولكن تم تصغيره ؛
ملفات min ( bootstrap.min.css ، bootstrap.min.js و bootstrap-theme.min.css ) تحتوي على نفس الكود كما في حكمهم ( bootstrap.css ، bootstrap.js و bootstrap-theme.css ) ولكن تم تنظيفها من التعليقات ومضغوط لسهولة وسرعة تحميلها .
ملفات bootstrap-theme.css.map و bootstrap.css.map تسمح للعثور على الموقع الأصلي من سطر من التعليمات البرمجية من كود مصغر. هذه الميزة قابلة للاستخدام مع أحدث إصدارات Chrome و Firefox . هذه الملفات ليست ضرورية لتشغيل Bootstrap .
حسنًا ، ولكن ما الذي يجب وضعه على موقع Bootstrap للعمل؟
هناك حالتان للتمييز:
  1. أثناء مرحلة التطوير ، من المثير أن تكون قادرًا على التنقل في كود Bootstrap ، لذلك يجب عليك وضع الملفات غير المضغوطة.
  2. عندما يكون موقعك متصلاً بالإنترنت ، لم يعد لديك ما يدعو للقلق بشأن الكود وحساب سرعة التحميل فقط ، لذلك استخدم هذه المرة الإصدارات المضغوطة ( min) .
يظهر الشكل التالي الملفات المستخدمة أثناء مرحلة التطوير (الملفات bootstrap.js و jquery.js ينتظر أن تستعملها إذا كنت تستخدم الإضافات jQuery والمجلدات fonts فقط إذا كنت تستخدم الايقونات ) .
jQuery web
ملفات مفيدة أثناء التطوير
ويبين الشكل التالي الملفات الضرورية عندما يكون الموقع في مرحلة الانتاج (ملفات bootstrap.min.js و jquery.js وينتظر أن تستعملها إذا كنت تستخدم الإضافات jQuery والمجلدات fonts فقط إذا كنت تستخدم الرموز) .
jQuery web
ملفات مفيدة في الإنتاج
في الأمثلة في هذا الدرس، سأفتراض أن المجلد bootstrap تم إنشاؤها في جذر الموقع مع المجلدات الثلاثة css، fonts و js بما في ذلك الملفات المذكورة أعلاه.
لكي يعمل Bootstrap ، يجب الإعلان عنه في صفحات HTML ، والتي يجب أن تكون حتمية بتنسيق HTML 5 ، لذلك يجب عليك توفير DOCTYPE الصحيح:

<!DOCTYPE html>
    … 
يجب عليك بعد ذلك التصريح عن الملف bootstrap.min.css ( أو bootstrap.css ) على الأقل في رأس صفحة الويب:

<head>
        …
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head> 
من هناك يمكن الوصول إلى جميع الفئات ... من الواضح أنه يجب عليك تكييف الرابط وفقًا لموقع ملفاتك.
إذا كنت تستخدم مكونات JavaScript ، يجب عليك أيضًا الاشارة إلى مكتبة Bootstrap وكذلك jQuery ( مكتبة jQuery ليست جزءًا من الملفات التي تم تنزيلها باستخدام Bootstrap ويجب استردادها بشكل مستقل من http://jquery.com/ ) :

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> 
وملف الموضوع؟
هذا الملف هو مثال على تحسين جمالية Bootstrap ، وهو ليس مفيدًا في تشغيله. إذا لاحظت مظهر مكونات Bootstrap ، فستجد أنها "مسطحة" ، دون أي ارتياح . في الإصدار 2 ، لم يكن هذا هو الحال. لأسباب تتعلق بالأداء ، تقرر تقديم هذا التحسين البصري في ملف منفصل. إذا كان لديك فضول للنظر في هذا الملف ، فسترى أنه يحتوي على تعريفات للتدرج والظلال. ستجد نتيجة تطبيق هذا الموضوع على صفحة المثال هذه . سنتحدث عن هذا الملف مرة أخرى في فصل تهيئة Bootstrap .

CDN


CDN تعني Content delivery network " شبكة توصيل المحتوى " ؛ إنها شبكة خادم توفر المكتبات. وبالتالي يصبح من غير المجدي توفير هذه المكتبات على خادمها الخاص ، ما عليك سوى "الإشارة" إليها. هناك مزايا لاستخدام CDN :
  • الإفراج عن الموارد وعرض النطاق الترددي على الخادم الخاص به ؛
  • التنزيلات المتوازية (يوجد CDN على خوادم متعددة) ؛
  • تسريع التحميل ؛
  • تخفيض وقت الإستجابة
  • التحديث التلقائي للمكتبات ؛
  • تحسين محركات البحث ...
هل هناك أي عيوب؟
وفقًا للبعض ، فإن استخدام CDN ، الذي يفرض طلب DNS إضافيًا ، سيكون مناسبًا فقط إذا كان هناك العديد من المكتبات المراد تحميلها. من ناحية أخرى ، إذا قمت بتعديل ملف Bootstrap CSS ليناسب احتياجاتك ، فلن تتمكن بعد ذلك من الاستمتاع بمزايا شبكة CDN . ولكن إذا كنت ترغب في الاستفادة من هذه الفرصة لبرنامج Bootstrap ، فاستخدم bootstrapcdn . من الواضح أنه يمكنك استخدام CDN أيضًا لـ jQuery ، على سبيل المثال في Google .
إذا كنت تستخدم CDNs ، فسيتم تبسيط عملية التثبيت. ما عليك سوى تكييف مكالمات المكتبة:

<link <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
                  bootstrap.min.css" rel="stylesheet">
…
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
            bootstrap.min.js">
</script> 

إطار للبدء


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

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
ينطبق هذا الإعلان فقط على متصفح Internet Explorer . إنه يضمن أنه يستخدم أحدث إصدار من محرك التقديم. لاحظ أن هذا الخط لا يجتاز التحقق من صحة W3C .
ثم نجد هذا السطر:

<meta name="viewport" content="width=device-width, initial-scale=1"> 
يتعلق هذا السطر بالهواتف المحمولة فقط. نطلب أن تشغل الشاشة كل المساحة المتاحة بحجم 1 ، أي بدون تكبير. يمكنك الذهاب أبعد من ذلك عن طريق حظر التكبير أو قصره على قيم معينة.
بعد ذلك نجد إعلان ملف CSS في نسخته المصغرة:

<link href="css/bootstrap.min.css" rel="stylesheet"> 
هذه العبارات هي:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
    queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]--> 
الغرض من هذه الاستدعاءات هو السماح للمتصفحات التي لا تدعم HTML5 و CSS3 Media Queries بالقيام بذلك ؛ أنها تهدف أساسا إلى IE8 . لمزيد من المعلومات عن respond.js يمكنك الذهاب إلى صفحة gitHub . كن حذرًا خاصة إذا كنت تستخدم شبكة CDN لتحميل أنماط CSS ، لأن respond.js يستخدم AJAX يمكنك التعثر في مشكلة الوصول إلى مجالات متعددة.
الغرض من الملف html5shiv هو إنشاء عناصر (مع createElement ) من نوع كتلة HTML 5 (header, section, aside…) و التي يتم تجاهلها في IE8 .
في نهاية الصفحة (حتى لا يتباطأ التحميل ) ، تكون استدعاءات JavaScript (مفيدة إذا كنت تستخدم مكونات jQuery) ، كما سنرى في هذه الدورة التدريبية :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
            jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
باختصار ، نحصل على هذا الكود (تبسيط المراجع وافتراض أن جميع الملفات موجودة في مجلد bootstrapومجلدات فرعية وظيفية) :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Bootstrap template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
        queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 
    -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/
                   html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
    </script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
    jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html> 
قالب بدء التشغيل
يمكنك أيضًا العثور على 18 مثال على قوالب في الموقع. سيتم الكشف عن العناصر اللازمة لفهم هذه الأمثلة خلال هذه الدورة. دعونا نلقي نظرة على المثال الأول ، وهو الأبسط:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other 
        head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" 
    rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/
              ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and 
        media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
    </script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
    </script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 
          data-toggle="collapse" data-target="#navbar" 
          aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new 
            project.<br> 
            All you get is this text and a mostly barebones HTML document.
        </p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/
                 jquery.min.js">
    </script>
    <script>window.jQuery || document.write('<script src="../../assets/
                    js/vendor/jquery.min.js"><\/script>')
    </script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html> 
نجد ما رأيناه سابقًا مع سطر الهواتف النقالة واستدعاء ملف CSS لـ Bootstrap . نجد إشارة الى ملف CSS آخر: starter-template.css . دعونا نرى ما هو موجود في هذا الملف:

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
} 
سنرى ، عندما نتحدث عن مكون "شريط التنقل Navigation bar " في Bootstrap ، أنه يتعين علينا في بعض الأحيان حجز مساحة في الجزء العلوي من الصفحة ( مع padding-top: 50px) لتجنب ان لا يكون نص البداية تحت الشريط. نجد هنا أيضًا الفصل الدراسي starter-template الذي يحدد مسافة داخلية و محاذاة داخلية للنص. يتم استخدام هذه الفئة فقط لنص العرض التقديمي للقالب ويمكن حذفه أو تعديله وفقًا لراحتك.
نجد أيضًا في الصفحة إطارًا لشريط التنقل (أشرح كل ذلك بالتفصيل في هذه الدورة):

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 
      data-toggle="collapse" data-target="#navbar" 
      aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav> 
ثم يتم إدراج محتوى الصفحة في DIV بما في ذلك الفئة container :

<div class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any 
    new project.<br> All you get is this text and a mostly barebones
     HTML document.</p>
  </div>
</div><!-- /.container --> 
سنرى أيضًا أهمية هذه الفئة واستخدامها. ضع في اعتبارك أمثلة النماذج المتوفرة على موقع Bootstrap كأدلة إرشادية ومساعدة في فهم الإطار. تجنب أخذها كما هي دون فهم جميع العناصر. في نهاية هذه الدورة سيكون لديك كل شيء للقيام بذلك ...

استعلامات الوسائط


تهدف استعلامات الوسائط إلى تبسيط إنشاء صفحات الويب لإتاحتها على العديد من الوسائط (الأجهزة اللوحية والهواتف الذكية ...). هذا القسم هو مجرد مقدمة سريعة لهذا المجال وهي تستحق درسًا في حد ذاته.
باستخدام استعلامات الوسائط ، يمكنك استهداف:
  • الأبعاد ؛
  • نوع الوسائط
  • حجم النافذة (العرض والارتفاع) ؛
  • حجم الشاشة (عرض الجهاز وارتفاع الجهاز) ؛
  • عدد الألوان ؛
  • نسبة النافذة (على سبيل المثال 16/9) ؛
  • إلخ
الأكثر شجاعة يمكنه الرجوع مباشرة لـمواصفات W3C .
القائمة طويلة ، وللأسف قليل من المتصفحات الحالية قادرة على هضم كل ذلك. يقتصر بشكل عام على حجم الشاشة والاتجاه وأحيانا النسبة.
أنا لا أفهم الفرق بين حجم الشاشة وحجم النافذة!
آه! تفكير جيد هذا التمييز لا معنى له لشاشات الكمبيوتر ولكنه يجد كل اهتماماته للهواتف الذكية. حجم الشاشة هو المساحة الفعلية للشاشة في حين أن حجم النافذة هو الحجم الذي يعتقد الهاتف الذكي انه يمتلكه. على سبيل المثال ، بالنسبة إلى iPhone 4 ، تبلغ المساحة الفعلية 640 × 960 بكسل ، بينما تبلغ مساحة النافذة 320 × 480 بكسل. وبعبارة أخرى ، فإن iPhone متشائم بشأن إمكانيات العرض الخاصة به!
لكن هذه ليست المشكلة الوحيدة! يحتوي المستعرض المضمن على الهاتف الذكي أيضًا على فكرة عن سطح الشاشة الذي به (إطار العرض). على سبيل المثال ، للاستمرار في مثال iPhone 4 ، الذي يستخدم Safari ، يعتقد أن عرضه الآخر يبلغ 980 بكسل! على هذه الأجهزة ، يمكن أيضًا استخدام التكبير / التصغير وقد يتأثر تخطيطنا. يمكننا ان نتساءل عن كيفية الخروج من هذا السوق... لحسن الحظ ، لدينا علامة META viewport لتعيين قيم معينة ، إليك ما يوصى به في القالب Bootstrap :

<meta name="viewport" content="width=device-width, initial-scale=1"> 
  • نفتح النافذة لعرض الشاشة: width=device-width
  • نضبط الزوم: initial-scale=1
يمكنك أيضا تعيين القيم الأخرى. على سبيل المثال ، منع المستخدم من التكبير. تسمح المتصفحات الرئيسية لاختبار العرض على الهاتف المحمول. على سبيل المثال مع Firefox ، من الضروري استخدام الأمر "طريقة العرض التكيفية" في قائمة "تطوير الويب".
بناء جملة استعلامات الوسائط
استعلام الوسائط عبارة عن تعبير تكون قيمته صحيحة أو خاطئة. فيما يلي مثال في كود CSS :

@media (max-width: 767px) {
  …
} 
@media هي القاعدة التي ظهرت مع CSS2 . يسمح لقاعدة البيانات باستهداف الوسائط: الشاشة ، الطابعة ، جهاز الإسقاط ... تم الاستيلاء على هذه القاعدة وتمديدها باستخدام CSS3 . يتم تقييم التعبير الموجود بين قوسين ، وإذا كان "صحيحًا" ، فيتم أخذ القواعد الموجودة في الكتلة في الاعتبار.
هنا التعبير (max-width: 767px)، يتم فهمه بسهولة. يكون "صحيحًا" إذا كان دعم عرض الصفحة بعرض عرضه 767 بكسل أو أقل.
نعم ، لكننا لم نحدد أي وسائط هناك!
نعم ، لأننا نريد أن نأخذ في الاعتبار جميع الوسائط الموجودة! هنا بناء جملة مكافئ:

@media  all and (max-width: 767px) { … } 
نغتنم هذه الفرصة لنرى أنه يمكننا الجمع بين العناصر مع العوامل المنطقية.
فيما يلي تعبير آخر باستخدام نفس العامل المنطقي:

@media (min-width: 768px) and (max-width: 979px) { … } 
هنا ، نريد أن نأخذ في الاعتبار قواعد الكتلة إذا كانت الشاشة بين 768 بكسل و 979 بكسل.
إذا كنا نرغب في تطبيق القواعد عندما يكون الاتجاه "عموديًا" ، فإليك بناء الجملة المطلوب استخدامه:

@media (orientation: portrait) { … } 
كما ترون ، بناء الجملة بسيط ، وهو أقل من القواعد التي يجب تحديدها. ولكن عند استخدام Bootstrap ، لا داعي للقلق بشأنه ... إذا قمت باستكشاف كود Bootstrap ، فستجد كثيرًا من استخدامات استعلامات الوسائط ، على سبيل المثال هنا ، حيث يتم تعريف قاعدة ذات البعد الأقصى لـ الطبقة container عندما تكون الشاشة 992 بكسل على الأقل:

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
   …
} 
سنرى لاحقًا في هذا الدرس أن Bootstrap يحدد أربعة أنواع من الوسائط اعتمادًا على حجم الشاشة. فيما يلي بناء الجملة المستخدم:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... }

/* Medium devices (tablets, 992px and up) */
@media (min-width: @screen-desktop) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... } 

الموارد


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

في الخلاصة


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