هناك عدة طرق لبدء استخدام Bootstrap، كل واحدة منها مثيرة للاهتمام اعتمادًا على مستوى خبرتك واحتياجات الاستخدام المحددة. انظر ما هو الأفضل بالنسبة لك.
الإصدار الحالي هو v3.3.2.
Bootstrap CDN$ Bower تثبيت bootstrap
ما هو مدرجBootstrap متاح في نسختين. يحتوي أحدهما على نسخة مجمعة، والآخر على نسخة مصغرة (منخفضة الحجم). في كلتا الحالتين، يتم تجميع الدلائل والملفات بشكل منطقي.
هيكل ملف Bootstrap 3بعد التحميل قم بفك ضغط الملفات . سترى شيئًا مشابهًا لهذا:
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── j ق/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── الخطوط/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-reg ular.ttf └ ── الحروف الرسومية-halflings-regular.woff
هذا هو الشكل الأساسي لـ Bootstrap: الملفات المجمعة جاهزة للاستخدام السريع في أي مشروع ويب. يتم توفير تجميعات CSS وJS (bootstrap.*) وإصدار مصغر (bootstrap.min.*). يتم تضمين خطوط Glyphicons كخيار إضافي لـ Bootstrap.
بوتستراب 3 كود المصدرتتضمن التعليمات البرمجية المصدر لـ Bootstrap CSS وJavaScript والخطوط المترجمة مسبقًا، بالإضافة إلى Less الأصلية وJavaScript والوثائق. من أجل الوضوح، راجع المثال أدناه.
Bootstrap/ ├── أقل/ ├── js/ ├── الخطوط/ ├── dist/ │ ├── css/ │ ├── js/ │ └── الخطوط/ └── docs/ └── أمثلة/
أقل/، شبيبة/، الخطوط/ مع الرموز. يتضمن المجلد dist/ جميع الملفات المجمعة المذكورة في القسم أعلاه. يحتوي المجلد docs/ على وثائق وأمثلة/ لاستخدام Bootstrap. بالإضافة إلى ذلك، هناك معلومات حول التراخيص وتطوير الإصدارات السابقة.
مجتمعابق على اطلاع بتطورات Bootstrap. تواصل مع المجتمع للحصول على معلومات مفيدة.
دعم Bootstrap بالخطوات الروسية لمنع التصفح سريع الاستجابةستحتاج إلى Respond.js لـ IE8 (نظرًا لوجود استعلامات الوسائط وتحتاج إلى معالجتها). سيؤدي هذا إلى حظر خاصية "تنقل الموقع" الخاصة بـ Bootstrap.
قالب Bootstrap مع قفل الاستجابةلقد استخدمنا هذه الخطوات كمثال. عرض الكود المصدري لمعرفة الاختلافات.
الهجرة من v2.x إلى v3.xراجع الوثائق المتعلقة بالترحيل من إصدار أقدم من Bootstrap إلى الإصدار v3.x؟ تحقق من دليل الانتقال.
المتصفحات ودعم الجهازتم تصميم Bootstrap للعمل بشكل أفضل في المتصفحات الجديدة، مما يعني أن المتصفحات القديمة قد لا تعرض الأنماط دائمًا بشكل صحيح على الرغم من كونها تعمل بكامل طاقتها في عرض مكونات معينة
دعم المتصفحوعلى وجه الخصوص، نحن ندعم أحدث الإصدارات من المتصفحات والأنظمة الأساسية التالية. على نظام التشغيل Windows، ندعم Internet Explorer 8-11. يتم توفير المزيد من معلومات الدعم المحددة أدناه.
| كروم فايرفوكس إنترنت إكسبلورر أوبرا سفاري | ||||
| المدعومة | غير معتمد | لا يوجد | غير معتمد | لا يوجد |
| المدعومة | لا يوجد | غير معتمد | المدعومة | |
| المدعومة | المدعومة | المدعومة | المدعومة | |
| المدعومة | المدعومة | المدعومة | المدعومة | غير معتمد |
يجب أن يبدو Bootstrap ويعمل بشكل جيد إلى حد معقول في Chromium وChrome لنظام التشغيل Linux، وFirefox لنظام التشغيل Linux، وInternet Explorer 7، على الرغم من عدم دعمهما رسميًا.
إنترنت إكسبلورر 8 و 9يتم أيضًا دعم الإصدارين Internet Explorer 8 و9، ولكن انتبه إلى أن بعض خصائص CSS3 وعناصر HTML5 غير مدعومة بشكل كامل في هذه المتصفحات. بالإضافة إلى ذلك، يتطلب Internet Explorer 8 استخدام Respond.js لتمكين الدعم لاستعلامات الوسائط.
| غير معتمد | المدعومة |
| غير معتمد | المدعومة |
| غير معتمد | مدعوم ببادئة -ms |
| غير معتمد | |
| غير معتمد | |
لجذب انتباهك، قمنا بتضمين هذه الأمثلة كأمثلة في وثائق Bootstrap.
تقريب النسبة المئوية في Safariفي Safari v6.1 لنظام التشغيل OS X وSafari لنظام التشغيل iOS v7.0.1، عند استخدام فئة الترميز .col-*-1، يواجه محرك Safari بعض المشكلات المتعلقة بعدد المنازل العشرية. أي أنه إذا كان لديك 12 عمود تخطيط منفصل، فستلاحظ أنها ستكون أقصر مقارنة بصفوف الأعمدة الأخرى. يمكنك تغيير () قليلاً هنا، ولكن لديك بعض الخيارات:
- أضف .pull-right إلى العمود الأخير في التخطيط للحصول على محاذاة ثابتة لليمين.
- قم بتغيير النسب يدويًا للحصول على تقريب مثالي لمتصفح Safari (أكثر صعوبة من الخيار الأول)
سنراقب هذه المشكلة وإذا كان هناك حل أبسط فسنقوم بتحديث الكود الخاص بنا.
لوحات المفاتيح المشروطة وأشرطة التنقل والافتراضية تجاوز الحدود والتمريردعم التجاوز: يكون إخفاء العنصر محدودًا جدًا في نظامي التشغيل iOS وAndroid. في متصفح هذه الأجهزة، عندما تقوم بالتمرير إلى ما بعد الشكل العلوي أو السفلي، فإن المحتوى الموجود بتنسيق .
لوحة المفاتيح الافتراضيةيرجى ملاحظة - إذا كنت تستخدم نموذج إدخال في نافذة مشروطة أو التنقل، فإن نظام التشغيل iOS به خطأ في العرض بسبب عدم تحديث موضع العناصر الثابتة عند استدعاء لوحة المفاتيح الافتراضية. هناك بعض الحلول لذلك، بما في ذلك تحويل العناصر إلى الموضع: مطلق، أو استدعاء مؤقت عندما يكون العنصر محل تركيز ومحاولة إصلاحه يدويًا. لا يتعامل Bootstrap مع مثل هذه الأخطاء، لذا ستحتاج إلى اكتشافها بنفسك.
القوائم المنسدلة لشريط التنقللا يتم استخدام عنصر .dropdown-backdrop في التنقل على نظام التشغيل iOS بسبب صعوبات في مؤشر z. وبالتالي، لإغلاق القوائم المنسدلة، ما عليك سوى النقر فوق عنصر القائمة المنسدلة (أو أي عنصر آخر من شأنه إنشاء حدث نقرة في iOS).
تحجيم المتصفحعند تغيير حجم الصفحة، تظهر بعض العناصر بشكل غير صحيح: ينطبق هذا على Bootstrap وبقية مستند الويب. اعتمادًا على الحالة المحددة، يمكننا إصلاح ذلك (إذا لزم الأمر، يمكنك فتح الطلب المقابل، ولكن عليك أولاً البحث عن طلبات مماثلة). ومع ذلك، فإننا نتجاهلها بشكل عام لأنها غالبًا لا يكون لها حل مباشر سوى إنشاء حلول بديلة.
مخرجات الطابعةحتى في بعض المتصفحات الحديثة، يمكن أن تكون الطباعة مراوغة. على وجه التحديد، اعتبارًا من الإصدار 32 من Chrome، وبغض النظر عن إعدادات الهامش، يستخدم Chrome بشكل ملحوظ عرض إطار العرض الأضيق من حجم الورق الفعلي عند حل استعلامات الوسائط أثناء طباعة صفحة ويب. قد يتسبب هذا في تنشيط علامات Bootstrap الصغيرة جدًا بشكل غير متوقع عند الطباعة. الحلول المقترحة:
- قم بتطبيق علامات صغيرة جدًا وتأكد من أن صفحتك تبدو جيدة.
- ضبط قيمة @screen-* متغيرات أقل بحيث يعتبر ورق الطابعة الخاص بك أكثر من صغير جدًا.
- أضف استعلامات مخصصة لتغيير حجم علامات التوقف لوسائط الطباعة فقط.
من خارج الصندوق، يأتي نظام Android 4.1 (وحتى بعض الإصدارات الأحدث على ما يبدو) مع تطبيق المتصفح باعتباره متصفح الويب الافتراضي المفضل (على عكس Chrome). لسوء الحظ، يحتوي تطبيق المتصفح على الكثير من الأخطاء والتناقضات مع CSS بشكل عام.
اختر القائمةبالنسبة للعناصر، لن يعرض متصفح أسهم Android عناصر التحكم الجانبية في حالة تطبيق نصف قطر الحدود و/أو الحدود. استخدم مقتطف التعليمات البرمجية أدناه لإزالة CSS المخالف وعرضه كعنصر غير مرتب على متصفح أسهم Android. يتجنب استنشاق وكيل المستخدم التداخل مع متصفحات Chrome وSafari وMozilla.
var nua = الملاح . userAgent var isAndroid = (nua .indexOf( "Mozilla/5.0") > - 1 && nua .indexOf( "Android") > - 1 && nua . ) === - 1 ) if (isAndroid ) ( $( "select.form-control" ).removeClass( "form-control" ).css( "width" , "100%" ) )
دعم طرف ثالثعلى الرغم من أننا لا ندعم رسميًا المكونات الإضافية أو الوظائف الإضافية التابعة لجهات خارجية، إلا أننا نقدم بعض النصائح المفيدة لمساعدتك في تجنب المشكلات المحتملة في مشاريعك.
حجم الكتلةاعتمادًا على السياق، يمكنك تجاوز تغيير حجم المربع فقط عند الضرورة (الخيار 1)، أو إعادة تعيينه لمناطق بأكملها (الخيار 2).
/* إعادة ضبط حجم الصندوق * * إعادة تعيين العناصر الفردية أو تجاوز المناطق لتجنب التعارضات بسبب * إعدادات نموذج الصندوق العام في Bootstrap. يتوفر خياران، التجاوزات الفردية وإعادة تعيين المنطقة *، بتنسيق CSS عادي وتنسيقات أقل غير مجمعة.
*/ /* الخيار 1 أ: تجاوز نموذج مربع عنصر واحد عبر CSS */ .element ( -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ) /* الخيار 1B: تجاوز نموذج مربع عنصر واحد باستخدام Bootstrap Less mixin */ .element ( .box-sizing (content-box); ) /* الخيار 2A: إعادة تعيين منطقة بأكملها عبر CSS * / .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :قبل , .reset-box-sizing * :بعد ( -webkit-box-sizing : content -box ; -moz- تغيير حجم الصندوق: محتوى - مربع؛ تغيير حجم الصندوق: محتوى - مربع) /* الخيار 2ب: إعادة تعيين منطقة بأكملها باستخدام مزيج أقل مخصص */ .reset-box-sizing ( & , *, * :before , * : after ( .حجم الصندوق (صندوق المحتوى ); ) .العنصر ( .إعادة ضبط حجم الصندوق (); )التوفر
يتبع Bootstrap معايير الويب الشائعة، ويمكن استخدامه - بأقل جهد إضافي - لإنشاء مواقع يمكن الوصول إليها باستخدام التكنولوجيا المساعدة.تخطي الملاحة
إذا كانت قائمة التنقل الخاصة بك تحتوي على العديد من الروابط وتقع قبل المحتوى الرئيسي في DOM، فأضف رابط الانتقال إلى المحتوى الرئيسي مباشرة بعد العلامة.انتقل إلى المحتوى الرئيسي
محتوى الصفحة الرئيسية.رؤوس متداخلة
عند تداخل العناوين (-)، يجب أن يكون عنوان المستند الصحيح هو . يجب تحديد الرؤوس التالية بشكل منطقي باستخدام - حتى يتمكن البرنامج الذي يقرأ الرؤوس من إنشاء محتويات الصفحة.- موارد إضافية تسمح لك بما يلي: لا تتطلب:
- قم بتضمين كود مصدر Bootstrap نفسه، أو أي تعديلات قد تكون أجريتها عليه، في أي عملية إعادة توزيع قد تقوم بتجميعها والتي تتضمن ذلك
أرسل التغييرات التي أجريتها إلى Bootstrap لعرضها في مشروع Bootstrap (على الرغم من الترحيب بالتعليقات)
تم نشر الإصدار الكامل من ترخيص Bootstrap في مشروع المستودع بمزيد من التفاصيل.إعداد التمهيد
بمجرد تنزيل أنماط ونصوص Bootstrap وتضمينها، يمكنك تخصيص مكوناتها. للقيام بذلك، ما عليك سوى إنشاء ورقة أنماط جديدة (أقل إذا كنت تفضل ذلك، أو CSS فقط).
تجميع بسيط أم مصغر؟وفي المستقبل، قم بتضمين أي مكونات Bootstrap وHTML لإنشاء قوالب صفحة لموقعك.
إعداد المركباتيمكنك تخصيص المكونات بدرجات متفاوتة، ولكن معظمها ينقسم إلى فئتين: الإعداد السهلو إعادة الهيكلة الكاملة. هناك العديد من الأمثلة المختلفة من جهات خارجية تسمح لك بتنفيذ كلتا الفئتين.
نحن نحدد الإعداد السهلمثل التغييرات السطحية مثل تغييرات اللون والخط لمكونات Bootstrap الموجودة. مثال على الإعداد السهل هو
تحياتي لجميع قراء المنشور الحالي. في كثير من الأحيان، يكون لدى مطوري الويب المبتدئين سؤال: "كيف يتم توصيل Bootstrap بنظام إدارة المحتوى (CMS)؟" لذلك، من أجل تقديم إجابات لمثل هذه الأسئلة، قررت أن أكتب هذا المقال.
سأخبرك بالتفصيل عن كيفية توصيل الإطار بـ WordPress وJoomla!، وسأشرح لك ما هو التخصيص ولماذا هو مطلوب. حسنا، دعونا نبدأ!
ربط Bootstrap بـ Joomlaفي الواقع، ربط الإطار بالمحركات أمر بسيط للغاية. وفي حالة Joomla، يتم تضمين Bootstrap بالفعل في التجميع ويتم توصيله تلقائيًا. لذلك، يتم استخدامه في لوحات إدارة المحرك.
ومع ذلك، هناك واحد ولكن. إصدار إطار العمل المستخدم في نظام إدارة المحتوى هذا قديم. لذلك، يُنصح بتوصيل أحدث إصدار من Bootstrap. وهنا من المهم عدم استبدال القديم بآخر جديد، حيث أن لوحة الإدارة يمكن أن تطير، ولكن استخدامها معًا (لن يكون هناك تعارض).
لكي تعمل عناصر الإطار، عليك تنفيذ عدة إجراءات:
| 1 |
إذا كنت بحاجة أيضًا إلى إضافة برنامج نصي لمكتبة jQuery، فقم بإضافته قبل البرامج النصية المحددة.
هذا كل الخطوات اللازمة. لقد قدمت واحدة من أبسط الطرق وأكثرها فعالية، والتي لا تتطلب عددًا كبيرًا من الإعدادات والخطوات. من حيث المبدأ، يمكن توصيل الإطار بأي محرك معروف بنفس الطريقة تقريبًا.
ربط Bootstrap بالووردبريسمن أجل عدم تكرار الخيار السابق لتوصيل Bootstrap، سأخبرك بكيفية استخدام التخزين عبر الإنترنت. كما تعلمون بالفعل، ليس من الضروري تنزيل ملفات الأداة الموصوفة. في بعض الأحيان يكفي استخدام الروابط إلى CDN.
للقيام بذلك، في رأس الملف المسمى Index.php، تحتاج إلى اتباع نفس القواعد كما في الإصدار السابق (وصف النمط، البرامج النصية js و jQuery، البرامج النصية Bootstrap)، أدخل الأسطر التالية:
| 1 |
هناك طريقة أخرى لـ CMS WordPress:
| 1 2 3 4 | وظيفة add_bootstrap())( wp_enqueue_script('my_bootstrap_js', get_template_directory_uri().'/js/bootstrap.js'); wp_enqueue_style('my_bootstrap_css', get_template_directory_uri().'/css/bootstrap.css'); ) |
وظيفة add_bootstrap())( wp_enqueue_script('my_bootstrap_js', get_template_directory_uri().'/js/bootstrap.js'); wp_enqueue_style('my_bootstrap_css', get_template_directory_uri().'/css/bootstrap.css'); )
بضع كلمات حول التخصيص
في حالة معرفتك بالضبط لعناصر إطار العمل التي تحتاجها والتي لا تستخدمها على الإطلاق، أو عندما تريد في البداية تغيير القيم الأساسية للمعلمات، يجب عليك استخدام Customize (http://getbootstrap .com/تخصيص/).
بمساعدتها، يمكنك تحديد قائمة بالمكونات والأدوات المساعدة والمكونات الإضافية وإعدادات CSS والعناصر الأخرى من ملفات أقل. على سبيل المثال، يمكنك تعطيل الأيقونات والرموز المعروفة باسم Glyphicons (إذا كنت لا تعرف شكلها، فابحث عنها على Google أو هذا الرابط).
بالإضافة إلى ذلك، في مربعات الحوار المنفصلة، يمكنك تعيين قيم أخرى للألوان والخطوط والمسافات البادئة وما إلى ذلك، والتي ستصبح فيما بعد الإعدادات الافتراضية.
بهذا أختتم مقالتي. اشترك في تحديثات مدونتي التعليمية وأخبر أصدقاءك عنها. أتمنى لك حظا سعيدا! وداعا وداعا!
من المؤلف: أحييكم. في هذه المقالة، سأتحدث مرة أخرى عن كيفية تثبيت Bootstrap، ولكن هذه المرة سنولي المزيد من الاهتمام لتخصيص إطار العمل بنفسك. ستكون المقالة طويلة جدًا، لذا إذا كنت مهتمًا بالتخصيص، فيرجى التحلي بالصبر وقراءتها بالكامل. سيتم تقسيم المقالة إلى جزأين: تغيير إعدادات ومكونات Bootstrap والسمات، أي تغيير المظهر.
لقد قلت الكثير عن التثبيت القياسي في المقالات السابقة. كل شيء بسيط هنا. نذهب إلى الموقع الرسمي getbootstrap.com، وانقر على "البدء" وحدد الخيار الأول. وبالتالي، نقوم بتنزيل الإصدار الكامل من bootstrap بجميع مكونات js وcss.
يعد Bootstrap CDN فرصة لتوصيل إطار العمل من وحدة تخزين CDN دون تنزيل ملفاته على جهاز الكمبيوتر الخاص بك. وبطبيعة الحال، في هذه الحالة لا يمكن الحديث عن أي تخصيص.
تخصيص الإطارلكن الحقيقة هي أن bootstrap يحتوي بشكل افتراضي على العديد من المكونات، وقد لا يكون بعضها مفيدًا لك عند تطوير موقع معين. على سبيل المثال، أنت تقوم بتصميم متجر على الإنترنت. قد لا تحتاج إلى الوسائط وتلميحات الأدوات، وقد لا تحتاج إلى العديد من مكونات CSS. وفي هذه الحالة، سيكون من الحكمة عدم إدراج هذه المكونات في الإطار.
أو أنك تقوم بإنشاء مدونة بسيطة. لنفترض أنك لا تحتاج حقًا إلى أي شيء هناك على الإطلاق، لذا يمكنك ترك الشبكة فقط واثنين من المكونات الأكثر أهمية.
يعد اختيار ما تحتاجه فقط بمثابة أسلوب احترافي لإنشاء مواقع الويب واستخدام Bootstrap. افتراضيًا، يبلغ وزن الإصدار غير المضغوط من أنماط CSS الخاصة بإطار العمل في الإصدار الأخير 143 كيلو بايت. والسكربتات يزيد حجمها عن 60 كيلو بايت. نعم، إذا قمت بضغط الكود، فيمكنك تقليل الوزن بنسبة 20-40٪، لكن الملفات لن تكون الأخف وزنا.
على سبيل المثال، إذا قمت بتعطيل جميع المكونات وتركت الشبكة فقط (وهذا ما يتم في كثير من الأحيان)، فسيكون وزن CSS فقط 15-20 كيلو بايت، وفي شكل مضغوط بضعة كيلو بايت أقل. بهذه الطريقة ستحقق أقصى سرعة وتحسين لمشروعك.
حسناً، تلك كانت مجرد نظرية. لتخصيص الإطار، قم بزيارة نفس الموقع الرسمي وانتقل إلى عنصر التخصيص.
اختيار المكونات الضروريةالخطوة الأولى هنا هي تكوين المكونات التي تريد تضمينها في إصدار Bootstrap الخاص بك. لنبدأ مع CSS:
أنماط وسائط الطباعة – استعلامات الوسائط للطباعة. إذا كنت لا تخطط لطباعة صفحات الموقع، فيمكنك تعطيله.
الطباعة والتعليمات البرمجية والجداول والنماذج والأزرار كلها أشياء يمكنك تصميمها في CSS بنفسك إذا كنت تريد ذلك حقًا. بالطبع، سيستغرق هذا بعض الوقت، ولكن إذا كان تصميم عناصرك مختلفًا تمامًا عما يقدمه إطار العمل افتراضيًا، فيمكنك تعطيل جميع أنماط CSS هذه وكتابتها بنفسك.
نظام الشبكة هو في الواقع شبكة. لا أرى أي فائدة من تعطيله على الإطلاق، لأن هذه هي القوة الرئيسية للإطار. بفضل الشبكة، يمكنك بسهولة تكييف القوالب مع أي جهاز، واليوم في عصر حركة مرور الهاتف المحمول، يعد هذا أمرًا في غاية الأهمية. نحن لا نطفئه تحت أي ظرف من الظروف.
الأدوات المساعدة المستجيبة – الأدوات المساعدة التكيفية، أوصي أيضًا بعدم تعطيلها أبدًا. سنتحدث عن الأدوات المساعدة التكيفية في المقالة التالية، حيث سننظر في نظام الشبكة بالتفصيل. هذه هي الفئات التي تسمح لك بإخفاء عنصر أو جعله مرئيًا بعرض شاشة معين. مريحة للغاية ومفيدة.
هذه، على سبيل المثال، أشياء مثل مجموعات القوائم، وأشرطة الأزرار، والأيقونات، واللوحات، والتنبيهات، وترقيم الصفحات، ومسارات التنقل، وما إلى ذلك. يمكنك أيضًا تعطيل خط الرمز. من المفيد القيام بذلك في حالة عدم الحاجة إلى أيقونات على الموقع على الإطلاق، أو إذا كنت تقوم بتوصيل مجموعة أخرى. في الواقع، يجب عليك الجلوس والتفكير في ما تحتاجه من جميع المكونات المقدمة وما لا تحتاجه. سيكون لكل موقع فردي مجموعته الخاصة، لأن كل موقع له تصميم ووظيفة مختلفة.
مكونات جافا سكريبت
هذه هي القوائم المنسدلة، وتلميحات الأدوات، والنوافذ المشروطة، وشرائح التمرير. إذا لم تكن بحاجة إلى أي من هذا، قم بإيقاف تشغيله. في بعض الحالات، يمكن أن تكون جميع المكونات مفيدة حقًا عندما يحتوي موقعك على قائمة منسدلة، وشريط تمرير على الصفحة الرئيسية، ونوافذ مشروطة. في بعض الحالات، قد يكون من المفيد استخدام مكونين أو مكونين على الأكثر، فلا داعي لإطالة الكود أو تعطيل المكونات غير الضرورية.
الإضافات مسجهنا يمكنك تعطيل المكونات الإضافية لمكتبة jquery التي تساعد مكونات جافا سكريبت على العمل بشكل صحيح. وفقًا لذلك، إذا كنت لا تستخدم شريط التمرير على موقعك، فلن تحتاج إلى مكون إضافي لإنشاء الرف الدائري، وإذا لم تكن بحاجة إلى تلميحات الأدوات، فقم بتعطيل Tooltips.js، وما إلى ذلك.
يقوم البرنامج المساعد Scrollspy بمراقبة موضع النص، اعتمادا على ذلك، يسلط الضوء على عنصر قائمة واحد أو آخر. عادةً ما تكون هذه الميزة مطلوبة على الصفحات المقصودة، ولم أرها عمليًا على المواقع العادية. وهكذا. ألق نظرة جيدة على ما تحتاجه وما لا تحتاجه.
متغيرات أقلبعد ذلك، سيتم فتح عنصر ضخم أمامك، حيث سيكون هناك الكثير من العناصر الفرعية مع إعدادات لمتغيرات أقل. هنا يمكنك تغيير كل شيء تقريبًا: الألوان، وأحجام الخطوط، ونقاط التوقف، وعدد الأعمدة في الشبكة، والمسافات البادئة، وما إلى ذلك.
بالطبع، للقيام بذلك، يجب أن تعرف على الأقل أساسيات Less أو على الأقل التنقل بشكل حدسي في هذه النماذج.
على سبيل المثال، إذا رأيت المتغير @font-family-base، فأنت بحاجة إلى أن تفهم بشكل حدسي على الأقل أنه مسؤول عن اسم الخط، وهو الخط الأساسي في الموقع. حسنًا، يقوم المتغير @font-size-base بتعيين حجم الخط الأساسي. افتراضيًا في bootstrap يكون 14 بكسل.
يمكنك تعديل كل هذه الحقول. ما عليك سوى تغيير 14 إلى 20 ويمكنك الآن تنزيل إطار عمل يكون حجم الخط الافتراضي فيه 20 بكسل. وبناء على ذلك، يمكنك على الفور ضبط حجم العناوين، وما إلى ذلك.
إعداد الشبكةإعدادات نظام الشبكة مثيرة للاهتمام أيضًا بالنسبة لنا، وهي كالتالي:
كما ترى، يمكنك تغيير عدد الأعمدة وعرض المسافات البادئة بينها في بضع ثوانٍ. يقوم متغير نقطة توقف الشبكة العائمة بتعيين النقطة التي تنهار عندها قائمة الهاتف المحمول إلى رمز.
إطار عمل Bootstrap 4
تعرف على أساسيات Bootstrap 4 مع مثال عملي لتصميم مدونة من البداية
إذا قمت بتغيير القيمة، على سبيل المثال، إلى @screen-md-min، عند عرض 991 بكسل أو أقل، سيحدث الانهيار. يمكنك أيضًا إزالة هذا المتغير وكتابة القيمة بالبكسل. على سبيل المثال، 520 بكسل. وبعد ذلك، لن يحدث طي القائمة إلا على الهواتف الذكية والهواتف المحمولة.
في الواقع، تحتوي صفحة تخصيص Bootstrap على الكثير من الإعدادات، لكن بشكل عام طريقة التخصيص هذه (باستخدام صفحة التخصيص على الموقع الرسمي) ليست هي الأسرع والأكثر ملاءمة. وبعد ذلك سأريكم أسرع طريقة.
استخدم صفحة التخصيص عندما تحتاج إلى إجراء 2-10 تغييرات على إطار العمل، أو قم ببساطة بتعطيل المكونات الضرورية. إذا كنت ستقوم بتغيير العديد من القيم، فستحتاج إلى استخدام طريقة مختلفة.
في الواقع، عندما تقوم بإعداد إصدار إطار العمل الخاص بك، انقر فوق الزر الكبير الموجود في أسفل الصفحة. سيقوم بتجميع نسخة من Bootstrap لك وتنزيلها على جهاز الكمبيوتر الخاص بك. ثم كل ما عليك فعله هو الاتصال والاستخدام. لقد تحدثت بالفعل عن الاتصال في المقالات السابقة (بما في ذلك كيفية القيام بذلك على WordPress).
تنزيل مصادر أقل وتحريرهاكما قلت سابقًا، إذا كنت بحاجة إلى إجراء الكثير من التعديلات على الكود المصدري لإطار العمل وتريد رؤية التغييرات على الفور، فستحتاج إلى مصادر أقل. يمكنك تنزيلها في نفس مكان الإصدار الكامل لإطار العمل - في قسم "بدء الاستخدام".
للعمل مع مصادر أقل وتحريرها، تحتاج إلى:
على الأقل بعض المعرفة بـ CSS وأقل أو معالج مسبق آخر
مترجم أقل (يمكن تنزيله مجانًا)
في الواقع، لن أتطرق بالتفصيل إلى التخصيص من خلال مصادر أقل، ولكن هذه هي أفضل طريقة، لأنك لن تحتاج إلى الذهاب إلى صفحة التخصيص 100 مرة وتجميع المزيد والمزيد من الإصدارات الجديدة من إطار العمل.
يمكنك الاطلاع على مزيد من التفاصيل حول العمل باستخدام رموز مصدر أقل في الكود المدفوع الذي أنشأه Andrey Kudlay. هناك، تتم مناقشة العمل مع الإطار بمزيد من التفصيل.
تصميم Bootstrap أو تغيير مظهر العناصرافتراضيًا، في الإصدار الكامل من إطار العمل، يمكنك أيضًا العثور على ملف bootstrap-theme.css في مجلد css. ليس من الضروري توصيله بالموقع. ما هي الوظائف التي تؤديها؟ الملف مطلوب فقط، إذا لزم الأمر، لتغيير أنماط العناصر التي تحتاجها.
يمكن تنفيذ هذا الدور نفسه من خلال ملف style.css الخاص بك، والذي يمكنك من خلاله أيضًا تجاوز الأنماط. موضوع Bootstrap ليس ملفًا مطلوبًا، بل يتم استخدامه للطلب. على سبيل المثال، لديك 3 ملفات:
bootstrap.css – بالطبع، هذا هو رمز الإطار نفسه؛
bootstrap-theme.css – هنا يمكنك تجاوز أنماط عناصر bootstrap؛
style.css - اكتب أنماطًا لعناصرك في هذا الملف.
بعد ذلك سيكون لديك طلب في الكود وفي هيكل المشروع. لكن لا أحد يمنعك من تنفيذ جميع العمليات في ملف واحد - style.css وعدم استخدام ملف سمة على الإطلاق.
الشيء الأكثر أهمية هو تضمين ملف السمة وملف CSS الخاص بك في ترميز html بعد الملف الذي يحتوي على رمز إطار العمل، بحيث يتم تجاوز الأنماط بنجاح.
مثال على كيفية عمل السماتكما قلت من قبل، يتضمن Bootstrap بشكل افتراضي موضوع bootstrap. حاول توصيله. وألاحظ، الاتصال بعد الملف الرئيسي.
بشكل افتراضي، تبدو الأزرار في Bootstrap بالشكل التالي:
وهذه هي الطريقة التي يتغير بها مظهرها بعد ربط الملف بالموضوع:
كما ترون، يظهر تدرج طفيف. وفقًا لذلك، يمكنك إعادة كتابة التعليمات البرمجية في ملف bootstrap-theme والحصول على الأنماط الخاصة بك للأزرار. ولكن قد تتساءل، لماذا لا يتم إجراء هذه التغييرات مباشرة في bootstrap.css؟ حسنًا، الحقيقة هي أنه يتم إصدار إصدارات جديدة من إطار العمل باستمرار، وإذا قررت الترقية، فسيكون من الصعب تنفيذ تغييراتك في الإصدار الجديد. يعتبر عدم لمس كود المصدر نموذجًا جيدًا للمطور عندما يمكنك إنشاء ملف منفصل ووصف التغييرات هناك. إنه أكثر ذكاءً وأكثر ملاءمة.
كيفية تثبيت سمات Bootstrap الجديدة التي تم تنزيلها من الإنترنت؟هناك الكثير من المواقع، معظمها أجنبية، حيث يمكنك تنزيل مجموعة من السمات والقوالب مجانًا. لتجنب الالتباس، لنفكر في موقع ويب مصمم باستخدام Bootstrap كقالب، وموضوع كمجموعة من قواعد CSS التي تتجاوز المظهر القياسي للعناصر.
يمكن تنزيل هذه المواضيع، على سبيل المثال، من bootswatch.com/، وباستخدام محرك البحث يمكنك العثور على العشرات من المواضيع الأخرى.
يعتمد المبدأ العام لتثبيت مثل هذه السمات على الموقع نفسه الذي قمت بتنزيلها منه. إذا كان بإمكانك تنزيله بتنسيق bootstrap-theme، فهذا رائع، قم بتنزيله وتوصيله. في bootswatch، على سبيل المثال، تحتاج إلى تنزيل bootstrap.css واستبدال ملف نمط إطار العمل القياسي به. هناك أيضًا خيار بمصادر أقل.
خلاصة القولحسنًا، لقد نظرنا اليوم في كيفية تثبيت Bootstrap وتخصيصه. آمل أن تكون هذه المعلومات مفيدة لك. أعلاه، قمت بالفعل بتوفير رابط لدورة تدريبية حول التخطيط التكيفي باستخدام هذا الإطار. باستخدام Bootstrap، يمكنك إنشاء مواقع ويب بشكل أسرع بمعدل 3 إلى 4 مرات، وستكون النتيجة بنفس الجودة، أو حتى أفضل، لأنه عندما تكتب أنماط CSS بنفسك، يمكنك دائمًا ترك شيء ما وإحداث الفوضى في مكان ما.
بشكل عام، إذا كنت تريد التواصل مع Bootstrap على أساس الاسم الأول، فبالتأكيد قم بشراء الدورة التدريبية وابدأ في تعلمها. في الواقع، يمكنك الانتهاء منه في غضون يومين، وخلال هذا الوقت سوف تحصل على الكثير من التدريب. يمكن القول أن عدة أشهر من قراءة المقالات والكتب على Bootstrap ستفيدك أقل من يومين من الممارسة الفعلية لتطوير قوالب معقدة. حسنًا، هذا هو المكان الذي أنهي فيه المقالة وأتمنى لك التعلم السريع لإطار العمل.
إطار عمل Bootstrap 4
تعرف على أساسيات Bootstrap 4 مع مثال عملي لتصميم مدونة من البداية
تتمثل ميزة استخدام أطر عمل CSS في أن مصمم التخطيط لا يحتاج إلى التفكير في العديد من الفروق الدقيقة في التخطيط التي فكر فيها منشئو الأطر بالفعل. تتضمن هذه الفروق الدقيقة التوافق عبر المستعرضات ودعم دقة الشاشة المختلفة وغير ذلك الكثير. يشير مصمم التخطيط فقط إلى ماذا وكيف ومتى سيتم عرضه، والباقي يتم بواسطة الإطار نفسه. يمكن لهذا الأسلوب تسريع تخطيط موقع الويب بشكل كبير. تشمل مزايا Bootstrap شعبيته. وهذا يعني أنه سيكون من الأسهل على مصمم أكواد آخر الحفاظ على الكود الخاص بك.
عيب استخدام الأطر هو أن الصفحة يجب أن تحمل الأنماط الإضافية للإطار بأكمله، حتى لو كانت تستخدم جزءًا صغيرًا منها فقط. يعد إطار العمل أداة ممتازة لإنشاء النماذج الأولية وإنشاء الصفحات التي يكون تصميمها ثانويًا، مثل صفحات الإدارة. إذا كان لديك تصميمًا محددًا جدًا، فقد يكون تصميمه باستخدام إطار عمل أكثر صعوبة من استخدام الأدوات الأصلية. ومع ذلك، هذا ممكن أيضا.
حول استخدام Bootstrap توجد حاليًا عدة طرق للعمل مع أنماط Bootstrap دون استخدام LESS بالنسبة للمبتدئين، يوصي Bootstrap نفسه بالنهج التالي: تحتاج إلى تنزيل Bootstrap المترجم من الموقع ووضعه في مشروعك دون تغيير أي شيء. فأنت بحاجة إلى إنشاء ملف CSS فارغ خاص بك وإدراجه بعد bootstrap.css.
بعد ذلك، من أجل تغيير أنماط Bootstrap، يجب عليك تغييرها في ملف style.css الخاص بك بشيء من هذا القبيل:
أ (اللون: #beceda؛)
العيب الواضح لهذا الأسلوب هو أنه سيتعين عليك البحث يدويًا عن الأنماط الضرورية التي تريد مقاطعتها، ولن يكون هذا تافهًا دائمًا، لأن تنطبق بعض خيارات Bootstrap على العديد من المحددات في شكل معدل، مثل الصيغ. يمكن أن تكون أداة التخصيص مفيدة بعض الشيء هنا؛ فهي ستساعدك في تجميع التغييرات بشكل صحيح، ولكن مرة واحدة فقط. إذا كنت تريد تغيير بعض المعلمات في المستقبل، فسيتعين عليك إعادة إدخال القيم المتغيرة لجميع الحقول لتجميع الأنماط الخاصة بك.
هناك عدد كبير من الطرق لتجميع ملفات أقل ويترك Bootstrap هذا الأمر لتقدير المطور. يستخدم Bootstrap نفسه Grunt للتجميع، وقد تفضل مكونًا إضافيًا لمنتجات JetBrains، وبما أن المقالة تستهدف المبتدئين، فسوف نتطلع إلى حلول أبسط. مثل هذه الحلول هي WinLess لنظام التشغيل Windows أو SimpLESS لنظام التشغيل Mac أو Koala لنظام التشغيل Linux. تفعل كل هذه البرامج نفس الشيء تقريبًا: فهي تتلقى مجلدًا يحتوي على ملفات أقل كمدخلات وتستمع إلى التغييرات التي تطرأ عليها. بمجرد إجراء تغييرات على أي ملف، يتم تجميعه على الفور في ملف CSS المحدد. بهذه الطريقة لن تحتاج إلى تشغيل التجميع اليدوي بعد كل تغيير. يمكنك تغيير الملف LESS وحفظه ورؤية التغييرات على الموقع على الفور في نموذج مضغوط تم تجميعه بالفعل.
إنشاء مشروع الخطوة الأولى هي إنشاء بنية ملف بسيطة لمشروعنا.
الفحص الأولي بعد إنشاء بنية الملف، افتح ملف psd في Photoshop. من المهم فحص القالب بعناية وتقييمه. علينا أن نفهم الأمور التالية: - كيف سيتم قطع الصور؟
- ما هي المكونات التي سيتم استخدامها؟
- ماذا ستكون الأنماط الرئيسية؟
- ما هو تخطيط الصفحة الذي سنحصل عليه؟
حفظ صورة الخريطة:
دعونا نحفظ الشعارات على النحو التالي:
الصور/الشعار.png
الصور/تذييل الشعار.png
يجب قطع صور الخلفية المتكررة إلى قطعة صغيرة كافية لتكوين صورة كاملة عن طريق التكرار عموديًا وأفقيًا.
/صور/bg.png
/images/h1-bg.png
من السهل حفظ أيقونات الشبكات الاجتماعية بنفس الأحجام في ملف واحد واستخدامها كصور متحركة للتحميل بشكل أسرع. مزيد من التفاصيل حول لصق الصور موصوفة في الجزء الأول. وستكون النتيجة ملفين:
/صور/social.png
/images/social-small.png
إذا ألقيت نظرة على القالب الخاص بنا، يمكنك أن ترى أننا سنحتاج إلى المكونات التالية:
أولاً، تحتاج إلى إضافة متغيرات غير موجودة في إعدادات Bootstrap حتى تتمكن من استخدامها في المستقبل. بالنسبة لنا، هذا مجرد خط تصميم محدد.
@brand-font: "أوزوالد"،sans-serif;
إذا كنت ترغب في استخدام قالب للمواقع الروسية، فيمكنك محاولة استبدال خط Oswald بأقرب خط Cuprum، والذي يدعم السيريلية.
لنستبدل الآن إعدادات Bootstrap بإعداداتنا:
الآن بعد أن انتهينا من المتغيرات، فلنبدأ بتصميم تصميمنا في ملف style.less. أولاً، دعونا نربط Bootstrap نفسه ومتغيراتنا:
@import "bootstrap/bootstrap.less"; @import "variables.less";
لا يمكن تغيير جميع أنماط Bootstrap الافتراضية باستخدام المتغيرات، لذا فلنفعل ذلك يدويًا:
P ( الهامش: 20 بكسل 0; ) .form-control ( مربع الظل: لا شيء; ) .btn ( عائلة الخط: @brand-font; )
قمنا هنا بإزالة الظل من عناصر النموذج، وأعطينا النص الموجود في الأزرار خط صفحة محددًا.
ثم نقوم بوصف خلفية الصفحة والشريط العلوي:
الجسم ( الحد العلوي: 5 بكسل صلب #7e7e7e؛ صورة الخلفية: url(../images/bg.png); )
علاوة على ذلك، لن يتم الإشارة في النص إلى الملف الذي كتبت فيه الأنماط. فقط تذكر أننا نحفظ جميع المتغيرات في الملفvariables.less، وسيتم تخزين أنماط CSS في style.less.
وايت سكوير
تقوم هذه الكتلة بإنشاء بنية مستند HTML5. في العنوان نشير إلى اسم صفحتنا – Whitesquare. باستخدام العلامة الوصفية لإطار العرض، نشير إلى أن عرض الصفحة على الأجهزة المحمولة سيكون مساويًا لعرض الشاشة وسيكون المقياس الأولي 100%. ثم يتم تضمين ملف الأنماط. وبالنسبة لإصدارات Internet Explorer الأقل من الإصدار التاسع، فإننا نقوم بتضمين نصوص برمجية تسمح لنا بعرض تخطيطنا بشكل صحيح.
دعنا نضيف الكود التالي إلى الجسم:
هنا نواجه أول مكون في Bootstrap - الأعمدة. يتم إعطاء العنصر الأصلي للأعمدة فئة "صف"، وتبدأ فئات الأعمدة بالبادئة "col-"، ثم حجم الشاشة (xs، sm، md، lg)، وتنتهي بالعرض النسبي للعمود .
يمكن تخصيص عمود لفئات مختلفة في نفس الوقت مع قيم للشاشات، على سبيل المثال class="col-xs-12 col-md-8". تقوم هذه الفئات ببساطة بتعيين عرض العمود كنسبة مئوية لحجم شاشة معين. إذا لم يتم إعطاء العمود فئة شاشة محددة، فسيتم تطبيق فئة الحد الأدنى للشاشة المحددة، وإذا لم يتم تحديدها، فلن يتم تطبيق أي عرض وستشغل الكتلة أقصى عرض ممكن.
تشير فئتنا "col-md-7" و"col-md-17" إلى أن الكتل عبارة عن أعمدة بعرض 7 و17 بالنسبة إلى الحاوية الأصلية. افتراضيًا، يكون مجموع عرض الأعمدة في Bootstrap هو 12، لكننا ضاعفنا هذا الرقم لتحقيق المرونة التي نحتاجها.
النص (... .المغلف (الحشوة: 0 0 50px 0; ) الرأس (الحشوة: 20px 0;))
لقد وضعنا هذا الهيكل داخل الجسم. يسمح لك بناء الجملة LESS بدمج القواعد داخل بعضها البعض، والتي يتم بعد ذلك تجميعها في البنيات التالية:
الجسم .المغلف (...) رأس الجسم (...)
يتيح لك هذا الأسلوب رؤية بنية HTML مباشرة داخل CSS ويعطي بعض "النطاق" للقواعد.
أدخل الشعار في علامة الرأس:
لا توجد أنماط إضافية مطلوبة.
يبحثلإنشاء بحث، سنحتاج إلى مكونات Bootstrap التالية: النموذج المضمن وعناصر التحكم المجمعة والزر.
في علامة الرأس، نقوم بإنشاء نموذج مضمن، محاذاة إلى اليمين. يجب أن تحتوي حقول هذا النموذج على فئة "التحكم في النموذج" وتسمية.
نضع مكون "عناصر التحكم المجمعة" في النموذج. تتيح لك عناصر التحكم في التجميع إزالة المسافة بين إدخال النص والزر ودمجهما في عنصر واحد.
وهو عبارة عن div مع فئة وحقول "input-group"، ويتم وضع زر هذا المكون في كتلة مع فئة "input-group-btn".
نظرًا لأننا لا نحتاج إلى إظهار التسمية لحقل البحث، فسنقوم بإخفائها باستخدام الفئة "sr-only". وهذا مطلوب لقارئات الشاشة المخصصة.
تمت إضافة الفئة "btn-primary" إلى الزر، مما يعني أن هذا هو الزر الأساسي لهذا النموذج.
…ابحث عن GO
كل ما تبقى لنا هو ضبط عرض نموذج البحث في الأنماط.
النص الأساسي ( … .المغلف ( … الرأس ( … .البحث عن النموذج ( العرض: 200 بكسل؛ ) ) ) )
قائمة طعاملعرض القائمة، خذ مكون "لوحة التنقل" وقم بوضع مكون "التنقل" فيه، وهو عبارة عن قائمة تحتوي على روابط. بالنسبة للتنقل، تتم إضافة فئة "navbar-nav"، والتي تطبق أنماط تنقل خاصة داخل شريط التنقل.
من أجل جلب هذه القائمة إلى تصميمنا، سوف نقوم بتعيين القيم التالية للمتغيرات:
/*ارتفاع شريط التنقل*/ @navbar-height: 37px; /*ضبط المزيد من الحشو الأفقي*/ @nav-link-padding: 10px 30px; /*خلفية لعناصر القائمة*/ @navbar-default-bg: @panel-bg; /*لون النص في عناصر القائمة*/ @navbar-default-link-color: #b2b2b2; /*وعند تحريك الماوس - نفس الشيء*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*خلفية عنصر القائمة النشط هي اللون الأزرق المحدد لدينا*/ @navbar-default-link-active-bg: @brand-primary; /*لون نص عنصر القائمة النشط*/ @navbar-default-link-active-color: #fff;
بالإضافة إلى المعلمات القابلة للتخصيص، سنصف معلمات إضافية في الأنماط - وهذا نص كبير وخطنا المحدد:
النص الأساسي ( … .wrapper ( … .navbar a ( تحويل النص: أحرف كبيرة؛ الخط: 14px @brand-font; ) ) )
عنوان الصفحةيتم وضع عنوان الصفحة في div مع فئة "العنوان".
معلومات عنا
ولها الأنماط التالية:
النص (... .wrapper ( ... .heading ( الارتفاع: 40 بكسل؛ الخلفية: عنوان URL شفاف (../images/h1-bg.png)؛ الهامش: 30 بكسل 0؛ الحشو على اليسار: 20 بكسل؛ h1 ( العرض: كتلة مضمّنة؛ اللون: #7e7e7e؛ الخط: عادي 40px/40px "Oswald"، الخلفية: url(../images/bg.png);
نحن هنا نرسم شريطًا رماديًا كخلفية على div، ونقوم بإدراج h1 مضمّنًا فيه مع الخط المطلوب وخلفية لون الصفحة لإنشاء انطباع بوجود خلفية شفافة لـ h1.
عند إنشاء قائمة فرعية، لن نستخدم مكون "التنقل"، لأنه ليس مناسبًا جدًا لنا من حيث الأسلوب؛ أما مكون "القائمة المجمعة" فهو أكثر ملاءمة لنا. يحتوي كل عنصر في هذا المكون على فئة "list-group-item".
يجب وضع القائمة الفرعية في العلامة الجانبية. نقوم بإنشاء قائمة الروابط بنفس طريقة القائمة الرئيسية.
في إعدادات المكون، نشير إلى أن جميع القوائم المجمعة يجب أن تظهر مع خلفية وإطار مكون "اللوحة":
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
وقم بتطبيق الأنماط التالية على القائمة الفرعية:
النص (... .wrapper (... .القائمة الفرعية ( الهامش السفلي: 30 بكسل؛ li ( العرض: عنصر القائمة؛ الخط: 300 14 بكسل @brand-font؛ موضع نمط القائمة: من الداخل؛ نوع نمط القائمة: مربع؛ الحشو : 10 بكسل؛ تحويل النص: أحرف كبيرة؛ &.active (اللون: @brand-primary;) أ (اللون: @text-color؛ زخرفة النص: لا شيء؛ &:hover (اللون: @text-color;))) ))
أولاً، نعيد الأنماط القياسية إلى عناصر القائمة، حيث استبدلها Bootstrap بعناصره الخاصة. أضف حشوة في الأسفل. تستخدم القوائم الفرعية خطوطًا رفيعة وعلامات مربعة. وبالنسبة للروابط، نقوم بتعيين الألوان والأحرف الكبيرة وإزالة التسطير. سيتم استبدال علامة الضم الموجودة في الكود "&.active" بالمحدد الأصلي في وقت الترجمة باستخدام بناء الجملة الأقل: ".submenu li.active".
لعرضه، سنستخدم مكون "اللوحة"، أو بالأحرى شكله "اللوحة الأساسية" لتلوين العنوان. يحتوي هذا المكون على كتلة رأسية (رأس اللوحة) وكتلة محتوى اللوحة (جسم اللوحة). نضيف فئة "img-response" إلى صورة الخريطة، مما سيسمح للصورة بالانكماش عندما يكون عرض الشاشة صغيرًا.
…مكاتبنا 
في متغيرات Bootstrap، قمنا بالفعل بتعيين لون خلفية اللوحة (panel-bg)، والآن سنشير إلى أن اللوحة "الأساسية" ستحتوي على الحد الرمادي للوحة الافتراضية، بدلاً من الحد الأزرق الافتراضي:
@panel-primary-border: @panel-inner-border;
الآن في أنماط الموقع تحتاج إلى تغيير إعدادات اللوحة القياسية، والتي لا تتغير من خلال المتغيرات:
اللوحة ( ظل الصندوق: لا شيء؛ .عنوان اللوحة ( الخط: 14 بكسل @brand-font؛ تحويل النص: أحرف كبيرة؛ الحشو: 10 بكسل؛ ) .لوحة الجسم ( الحشو: 10 بكسل؛ ))
قمنا هنا بإزالة الظل من اللوحات، وأضفنا المسافات البادئة الخاصة بنا وقمنا بتعيين خط العنوان الخاص بنا.
يشبه عنصر الصفحة هذا مكون Jumbotron. دعنا نضيفه إلى عمود المحتوى:
"Quisque in enim velit، at dignissim est." nulla ul body, dolor ac pellentesque placerat, justo Tellus gravida erat, vel porttitor libero erat.
جون دو، لوريم إيبسومباستخدام متغيرات مكون jumbotron، سنقوم بتعيين لون النص إلى الأبيض والخلفية الزرقاء المميزة:
@jumbotron-bg: @brand-primary؛ @jumbotron-color: #fff;
ودعونا نصف أنماطنا:
الجسم ( … .wrapper ( … .jumbotron ( نصف قطر الحدود: 0؛ الحشو: 0؛ الهامش: 0؛ علامة الاقتباس (الحدود اليسرى: لا شيء؛ p ( الخط: 300 مائل 33px @brand-font؛ تحويل النص: أحرف كبيرة؛ الهامش السفلي: 0) صغير (محاذاة النص: لليمين؛ اللون: #1D8EA6؛ الخط: 300 20 بكسل @brand-font; &:before (المحتوى: ""; ) ) ) )
فيها، نقوم بإزالة تقريب الزوايا وحشو المكونات وزخارف الاقتباس التي تم تعيينها بواسطة Bootstrap افتراضيًا. سنضيف أيضًا أنماطًا لخطوطنا.
لوريم إيبسوم دولور يجلس أميت…
دونيك فيل نيسل نيبه…
دونيك فيل نيسل نيبه…
الخطوة التالية هي إضافة صورتين في نهاية نص المحتوى. ويتم ذلك باستخدام عمودين:
تقوم فئة "الصورة المصغرة" بتحويل الصور إلى مكون "صورة مصغرة". سوف يقوم بكل أعمال تصميم الصور لنا. الشيء الوحيد المتبقي لنا هو ضبط لون الحشو والحدود في متغيرات هذا المكون:
@ حشوة الصورة المصغرة: 1 بكسل؛ @thumbnail-border: #c9c9c9;
حظر "فريقنا"
عند تخطيط هذه الكتلة، دعونا أولاً نضيف عنوانًا:
فريقنا
مع الاسلوب:
النص ( … .wrapper ( … h2 ( الخلفية: لا يوجد تكرار للتمرير 0 0 #29C5E6؛ اللون: #fff؛ الخط: 300 30 بكسل @brand-font؛ الحشو: 0 10 بكسل؛ تحويل النص: أحرف كبيرة؛ ) ) )
وبعد ذلك، سنضيف كتلة تحتوي على فئة "الفريق"، والتي تتكون من سطرين يحتويان على بطاقات الموظفين. كل بطاقة عبارة عن عمود. عرض البطاقة يساوي أربعة أعمدة من الشبكة. تحتوي جميع البطاقات باستثناء البطاقة الأولى في السطر على مسافة بادئة يسرى، والتي يتم إنشاؤها بواسطة فئة "col-md-offset-1". يتكون محتوى البطاقة من صورة ووصف (.caption)
جون دو 
ساندرا بيتسلي
قائد الفريق
…
إريكا نوبريجا مدير فني
كودي روسيل كبير مصمم واجهة المستخدم
…بعد إنشاء العلامة، دعونا نعطي هذه العناصر الأنماط التالية:
النص الأساسي ( … .wrapper ( … .team ( .row ( الهامش العلوي: 20px؛ .col ( المسافة البيضاء: nowrap؛ .thumbnail ( الهامش السفلي: 5px؛ ) ) .col-md-offset-1 ( هامش- اليسار: 3.7%; ) .caption ( h3 ( الخط: 300 16 بكسل @brand-font; الهامش: 0; ) p ( الخط: 300 14 بكسل @brand-font; اللون: @brand-primary; الهامش: 0; ) ) ))
بالإضافة إلى المسافات البادئة وأنماط الخطوط التي تم تعيينها هنا، قمنا بتغيير فئة "col-md-offset-1". كان عليه أن يضبط المسافة البادئة على 3.7% لأن... كانت المسافة البادئة القياسية كبيرة جدًا.
أولاً، لنقم بإنشاء حاوية تذييل تحتوي على هذه الكتل:
وتطبيق التصميم عليه:
تذييل الصفحة ( الخلفية: #7e7e7e؛ اللون: #dbdbdb؛ حجم الخط: 11 بكسل؛ .container ( الارتفاع: 110 بكسل؛ الحشو: 10 بكسل 0؛))
تحدد علامة التذييل منطقة رمادية عبر عرض الشاشة بالكامل، وتعرض الحاوية الموجودة بداخلها منطقة مركزية على الشاشات الأكبر حجمًا وتحدد ارتفاع التذييل وحشوه. نستخدم الأعمدة لمحاذاة الكتل داخل التذييل.
تغذية تويتر 23 أكتوبر
في ultricies pellentesque Massa a Porta. Aliquam ipsum enim، hendrerit ut porta nec، ullamcorper et nulla. في eget mi dui، اجلس amet scelerisque nunc. ايني أغسطس
الأنماط:
الجسم ( ... تذييل ( ... .container ( ... h3 ( الحد السفلي: 1 بكسل صلب #919191؛ اللون: #ffffff؛ حجم الخط: 14 بكسل؛ ارتفاع الخط: 21 بكسل؛ عائلة الخط: @brand -الخط: 0 0 10 بكسل؛ تحويل النص: أحرف كبيرة؛ ) p (الهامش: 5 بكسل 0؛) .twitter (p (الحشو على اليمين: 15 بكسل؛) الوقت أ (اللون: #b4aeae؛ زخرفة النص: تسطير؛ ) ) )
بالنسبة لجميع عناوين التذييل، نقوم بتعيين الخطوط والمسافات البادئة، كما نقوم أيضًا بإنشاء خط تسطير من خلال الإطار السفلي. بالنسبة للفقرات، قم بالإشارة إلى المسافة البادئة. بالنسبة للارتباط الذي يعرض التاريخ، قم بتعيين اللون والتسطير.
خريطة الموقع بيت
عن
خدمات
الشركاء
يدعم
اتصال
قمنا بتعيين الروابط على اللون والخط والمسافة بينهما.
النص الأساسي ( ... التذييل ( ... .container ( ... a ( اللون: #dbdbdb؛ ) .خريطة الموقع a ( العرض: كتلة؛ حجم الخط: 12 بكسل؛ الهامش السفلي: 5 بكسل؛ ) ) )
الروابط الاجتماعية
نقوم بإدراج مجموعة من الروابط في كتلة ذات فئة "اجتماعية".
الشبكات الاجتماعية
ودعونا نصممها:
النص ( ... التذييل ( ... .container ( ... .social ( .social-icon ( العرض: 30 بكسل؛ الارتفاع: 30 بكسل؛ الخلفية: url(../images/social.png) بدون تكرار؛ العرض: كتلة مضمنة؛ هامش -اليمين: 10 بكسل؛ .social-icon-small (العرض: 16 بكسل؛ الارتفاع: 16 بكسل؛ الخلفية: url(../images/social-small.png) بدون تكرار؛ العرض: كتلة مضمّنة؛ الهامش: 5 بكسل 6 بكسل 0 0; ) .twitter ( موضع الخلفية: 0 0; ) .facebook ( موضع الخلفية: -30px 0; ) .google-plus ( موضع الخلفية: -60px 0; ) .vimeo ( موضع الخلفية: 0 0 ; ) .youtube ( موضع الخلفية: -16 بكسل 0; ) .flickr ( موضع الخلفية: -32 بكسل 0; ) .instagram ( موضع الخلفية: -48 بكسل 0; ) .rss ( موضع الخلفية: -64 بكسل 0; ) ) ) ) )
استخدمنا هنا تقنية الصور المتحركة - عندما يتم استخدام ملف صورة واحد لصور مختلفة. تنقسم جميع الروابط إلى أيقونات كبيرة (.social-icon) وأيقونات صغيرة (.social-icon-small). لقد قمنا بتعيين هذه الفئات لعرضها ككتلة مضمّنة ذات أبعاد ثابتة ونفس الخلفية. ومن ثم باستخدام CSS قمنا بنقل هذه الخلفية بحيث يتم عرض الصورة المقابلة على كل رابط.
حقوق الطبع والنشر لعام 2012 لـ Whitesquare. إنشاء pcklab
يتم تنفيذ الأنماط بشكل مشابه للكتل السابقة، مع الاختلاف الوحيد وهو أن الكتلة مثبتة على الحافة اليمنى وتكون المحاذاة بداخلها أيضًا على اليمين:
النص الأساسي ( … .تذييل ( … .container ( … .شعار التذييل ( تعويم: يمين؛ الهامش العلوي: 20 بكسل؛ حجم الخط: 10 بكسل؛ محاذاة النص: يمين؛ أ ( زخرفة النص: تسطير؛ ) ) ) ) )
هذا يكمل التخطيط. يمكن تنزيل المشروع النهائي
يا رفاق، أعتقد أن Bootstrap شيء رائع جدًا. سأحاول شرح سبب ذلك في هذه المقالة. حسنا، دعنا نذهب، أعتذر على الفور عن حقيقة أن النصف الأول بأكمله تقريبا من المقال مكتوب بدون صور، لا يوجد سوى نظرية، شرح لكيفية عمل الشبكة. ولكن هذا مهم جدا!
ومن يحتاجه منكم فليأخذه بين يديه، ويقرأه، وأرجو أن يفهمه. يُنظر إلى النصف الثاني من المقالة بشكل أكثر بساطة بالفعل، وهناك المزيد من الأمثلة مع لقطات الشاشة.لذلك دعونا نبدأ بسؤال مهم. Bootstrap هو إطار عمل CSS وJS، وهو في الأساس مجموعة من الملفات ذات التعليمات البرمجية المكتوبة الجاهزة. هدف مطوري أي إطار عمل تقريبًا هو تبسيط عملية تطوير موقع الويب لأنفسهم وللآخرين الذين سيتمكنون من الوصول إلى الأداة. في حالة Bootstrap، فهو مجاني تمامًا، لذا يمكنك استخدامه بأي طريقة، وتحرير الكود المصدري وتخصيص إطار العمل بأي طريقة تريدها. هذا عظيم.
تثبيت بوتسترابإذا كنت بحاجة فقط إلى توصيل ملفات إطار العمل بمستند HTML (على سبيل المثال، للتمرين)، فما عليك سوى تنزيل إطار العمل من الموقع الرسمي getbootstrap.com، ونسخ ملفاته إلى المشروع وتوصيل الملفات التي تحتاجها. اسمحوا لي أن أقدم نبذة مختصرة عن هذه الملفات:
هذه هي المجموعة القياسية للإطار. في الواقع، يمكنك بسهولة تخصيصه وتغييره بما يناسبك. على سبيل المثال، لا تستخدم البرامج النصية على الإطلاق أو قم بتوصيل شبكة واحدة فقط. بشكل عام، سنتحدث أيضا عن هذا.
وثائق Bootstrap الروسيةعند زيارتك لموقع getbootstrap، ربما لاحظت أن كل شيء هنا باللغة الإنجليزية. يمكننا الاستعانة بالمساعدة الروسية في هذا الإطار. من السهل العثور عليه. للقيام بذلك، انتقل من الصفحة الرئيسية إلى قسم البدء. انتقل إلى الأسفل، سيكون هناك رابط للترجمات. ابحث عن اللغة الروسية هناك وانقر عليها. هذا كل شيء، أنت الآن على النسخة الروسية من الموقع. صحيح أنه لم تتم ترجمة كل شيء هنا، ولكن حوالي 70-80% دقيقة، لذلك ستفهم كل شيء.
شبكة التمهيدبغض النظر عما قد يقوله المرء، فإن العنصر الرئيسي في Bootstrap هو الشبكة سريعة الاستجابة. بشكل عام، بدونها، سيفقد الإطار كل قيمته تقريبًا، لأنه بفضل الشبكة يمكنك إنشاء قوالب قابلة للتكيف بسرعة. في الوقت نفسه، قد لا تكون على دراية باستعلامات الوسائط على الإطلاق، ولا تحتاج إليها، لأن إطار العمل يعتني بتنفيذ القدرة على التكيف، وتحتاج فقط إلى تعيين الفئات الصحيحة للكتل.
ما هي هذه الفئات؟ فلننتقل إلى الوثائق، فهي ستساعدنا كثيرًا. انتقل إلى قسم CSS - نظام الشبكة. القواعد العامة للعمل مع الشبكة بسيطة؛
كيفية العمل مع الشبكة؟فكر في الأمر كجدول HTML. إذا سبق لك أن كتبت كود HTML للجداول، فأنت تعلم أن كل المحتوى يتم وضعه في علامة الجدول، ويتم وضع صف واحد في علامة tr، ثم يتم وضع الخلايا فيه - td .
لذلك، كل شيء مماثل في الشبكة. تعمل فئة الحاوية كحاوية عامة للشبكة. هناك خياران لشبكة التمهيد - مطاطية بالكامل ولا يزال لها أقصى عرض محدود. لذلك، عندما يتم إعطاء الكتلة العامة فئة الحاوية، سيكون الحد الأقصى لعرض الموقع هو 1170 بكسل. ولن يتوسع أكثر. وبطبيعة الحال، سيتم توسيط المحتوى.
إذا قمت بتعيين فئة حاوية السوائل، فستكون الشبكة مطاطية بالكامل، أي أنه لن تكون هناك قيود على الحجم. على سبيل المثال، إذا قام أحد الأشخاص بفتح موقع ويب على شاشة بعرض 1920 بكسل، فسوف يراه بالعرض الكامل.
وبناء على ذلك، فإن أول شيء عند تطوير موقع على شبكة الإنترنت هو تحديد الشكل الذي سيكون عليه القالب - مطاطي بالكامل، أو أن عرضه لا يزال بحاجة إلى أن يكون محدودًا.
عظيم، يجب أن تحتوي كتلة الحاوية على صف من الشبكة. تحتاج إلى وضع جميع الكتل الموجودة على سطر واحد فيه. وهذا هو، إذا أخذنا القالب الأكثر نموذجية: الرأس، الجزء الرئيسي، العمود الأيمن والتذييل، فهناك 3 أعمدة. الأول سيحتوي على الرأس فقط، والثاني سيحتوي على المحتوى والشريط الجانبي، والأخير سيحتوي على التذييل. سيكون الترميز لمثل هذا الموقع كالتالي:
محتوى الرأس... والشريط الجانبي للتذييل
لكن في الوقت الحالي هذا هو الترميز الخاطئ، لأنه مفقود... ماذا؟ هذا صحيح، الخلايا! في حالة Bootstrap، يُطلق عليها أيضًا اسم الأعمدة. تتكون شبكة التمهيد من 12 عمودًا. يمكن تضمينه في أي كتلة بأي عرض، على الأقل 1200 بكسل، على الأقل 100 بكسل. كل هذا لأن عرض الأعمدة محدد ليس بالبكسل، ولكن بالنسب المئوية.
كيف يعمل هذا النظام المكون من 12 عمودًا؟لذلك، نأتي إلى القضية الأكثر أهمية المتعلقة بالإطار. صدقني، إذا فهمت هذا، فكل شيء آخر هو هراء. الشيء الرئيسي هو فهم كيفية عمل الشبكة، وسيكون الطريق إلى التخطيط التكيفي السريع مفتوحًا أمامك.
للقيام بذلك، قم بالتمرير خلال الوثائق الموجودة أدناه، حيث ستجد جدولًا يحتوي على خصائص الشبكة المهمة.
بالمناسبة، تم وضع علامة على الأعمدة نفسها في Bootstrap باستخدام فئة col-، ولكن هذه فئة مركبة، لذا فهي لا تكتب أبدًا col-. يحتوي Bootstrap على 4 فئات خاصة مصممة للتحكم في حجم الكتل ذات العروض المختلفة، وهي:
هذه هي الفئات الأربعة، ولكن للتحكم في حجم العناصر، يتم استخدام الأرقام من 1 إلى 12، لأنه، كما تتذكر، يوجد بالضبط 12 عمودًا في الشبكة.
تذييل الشريط الجانبي لمحتوى الرأس
من السهل أن نفهم. أولاً، نقوم بإنشاء رأس، وليس من الضروري وضعه في الشبكة على الإطلاق، لأنه سيشغل على أي حال 100% من العرض (عادة). لكننا سنضعها على أي حال. ما هو هذا الفصل col-md-12؟ كما أخبرتك من قبل، لا أحد يكتب ببساطة col-، مع هذا الفصل نخبر المتصفح بشكل أساسي:
هذه خلية | عمود
على الأجهزة المتوسطة (فئة md)، يجب أن يكون عرضه 12 عمودًا من أصل 12، أي 100% من عرض الصف.
ولكن ماذا عن العرض على الأجهزة الأخرى؟ وعلى الشاشات الكبيرة (إل جي) ستكون أيضًا 100%، لأن قيم الشاشات الكبيرة موروثة، أما بالنسبة للشاشات الأصغر فهي ليست كذلك. الأمر بسيط: إذا كتبت col-xs-4، فسيكون عرض العمود 33% على جميع الأجهزة، وإذا كتبت col-lg-4، فسيكون ذلك على الأجهزة الكبيرة فقط. هذه هي الميزة، تذكرها.
حسنًا، إذا لم يتم حفظ قيمة العرض على الشاشات الأصغر، فماذا يحدث؟ تمت إعادة تعيينه. وإليك كيف يحدث ذلك:
col-sm-4 - على الشاشات الصغيرة، ستشغل الكتلة 33% من العرض، وستكون هي نفسها على شاشات MD وLG، ولكن على شاشات XS، أي الأصغر، سيتم إعادة تعيين العرض إلى 100%. لذا، تذكر قاعدة أخرى بسيطة: إذا لم يتم تحديد أي شيء للشاشات الأصغر حجمًا، فسيتم عرض الكتلة عليها بعرض 100٪.
الشريط الجانبي للمحتوى
في الأساس نحن نقول للمتصفح:
دع كتلة المحتوى تكون 8 من 12 عمودًا عرضًا وسيكون هذا الوضع على الشاشات الصغيرة والمتوسطة والكبيرة (يكفي تحديد الشاشات الصغيرة والكبيرة، كما تتذكر، القيمة موروثة). ولكن على الشاشات الصغيرة، سيتم شغل الكتلة بنسبة 100%. هذا صحيح؛ عادةً، تظهر المواقع على الأجهزة المحمولة في عمود واحد.
دع العمود الجانبي يكون ثلث عرض الصف على نفس الشاشات الصغيرة والمتوسطة والكبيرة، حسنًا، على أصغر الشاشات، كما فهمت بالفعل، يتم إعادة تعيين عرضه أيضًا إلى 100٪. الأمر بهذه البساطة.
حسنًا، لا يوجد شيء للتعامل مع التذييل. حسنًا، لقد قمنا بتغطية المبادئ الأساسية لكيفية عمل الشبكة، لكننا ما زلنا بحاجة إلى معرفة كيفية عملها...
شبكة Bootstrap المتداخلةوالحقيقة هي أننا قمنا الآن بتقسيم القالب إلى كتل رئيسية فقط، ولكن في الداخل يمكن أيضًا تقسيمها إلى أعمدة. على سبيل المثال، قد يعرض المحتوى المنتجات في عدة أعمدة. ماذا علي أن أفعل؟ الأمر بسيط جدًا - نقوم بإنشاء نفس الشبكة تمامًا بالداخل. سيكون متداخلاً، ولكنه يحتوي أيضًا على 12 عمودًا. وإذا لخصنا كل هذا، نصل إلى هذه النتيجة:
يمكن أن يكون هناك عدد غير محدود من الشبكات داخل أي كتلة. على سبيل المثال، في الكتلة التي تحتوي على المنتجات توجد شبكة لفصل المنتجات؛ وفي الكتلة التي تحتوي على منتج واحد نفسه، يمكنك إنشاء شبكة أخرى، على سبيل المثال، لفصل الأسعار ومعلومات التوفر والمعلومات الإضافية. معلومة.
سنحاول الآن إنشاء شبكة أخرى داخل كتلة المحتوى لترتيب المنتجات في 3 أعمدة. لذلك، دعونا نأخذ الكتلة التي لدينا المحتوى:
محتوى
ونكتب فيه:
كتالوج المنتجات: اسم المنتج 
وصف المنتج
كما ترون، أنشأنا شبكة جديدة داخل المحتوى - وضعنا صفًا بالداخل، وفي الصف سيكون هناك بالفعل 3 كتل تحتوي على منتجات. ما عليك سوى نسخ كتلة col-sm-4 مع بطاقة المنتج ولصقها مرتين أخريين، وهذا ما تحصل عليه (يمكنك التقاط أي صورة للمنتج، لقد التقطت صورة كبيرة):
فاتني نقطة أخرى مهمة: لكي تتكيف الصور مع الكتل التي توجد بها، يجب إعطاء كل منها فئة img-response. إذا كنت، مثلي، تعتقد أن القيام بذلك غير مريح، فما عليك سوى الكتابة بأسلوبك الخاص.css مثل هذا:
Img (الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛)
هذا كل شيء، احفظ هذا الرمز وقم بتوصيل ملف CSS الخاص بك بالمشروع. الآن سوف تكون الصور قابلة للتكيف بشكل افتراضي.
حسنًا، هل سار الأمر بسلاسة تامة؟ نعم، ولكن بدون التمهيد، سيكون عليك أن تعاني لفترة أطول. الشيء الوحيد هو أنه عند إنشاء شبكة داخل أي كتلة، لم تعد بحاجة إلى إنشاء كتلة تحتوي على فئة الحاوية فيها. لماذا هذا ليس ضروريا؟ نعم، لأن الكتلة التي تم إنشاء الشبكة فيها تعمل كحاوية.
وبالتالي، يمكنك إنشاء أي عدد تريده من الأعمدة في أي كتلة وإنشاء قالب بأي تعقيد. وكل هذا أسرع بكثير من دون استخدام Bootstrap، لأنه سيتعين عليك كتابة كل ملفات CSS من البداية.
المرافق المستجيبةهذه ميزة أخرى رائعة لـ bootstrap. ويتكون من حقيقة أنه يمكنك إخفاء أو إظهار أي كتل بالعرض الذي تحتاجه. على سبيل المثال، إخفاء العمود الجانبي تمامًا على الشاشات الضيقة، وإضافة بعض العناصر الجديدة على الأجهزة المحمولة، وإضافة عمود على الشاشات العريضة، وما إلى ذلك.
هناك الكثير من خيارات التطبيق، لكنني لم أخبرك عن الشيء الأكثر أهمية: كيفية استخدام هذه الأدوات المساعدة؟ للقيام بذلك، فقط أضف فئات إلى الكتلة المطلوبة. إذا كنت تريد إخفاءه، فقط حدد الفئة التالية:
تذييل
ماذا ستفعل فئة Xs المخفية في هذه الحالة؟ سوف يخفي التذييل على الأجهزة الصغيرة جدًا. على جميع الآخرين سوف تكون الكتلة مرئية.
على العكس من ذلك، إذا كنت بحاجة إلى إظهاره فقط على أصغر الشاشات، فأنت بحاجة إلى استخدام فئة visual-xs-block. في هذه الحالة، سيتم إخفاء الكتلة على جميع الشاشات باستثناء أضيقها. لذلك، يتم كتابة فئات المرافق التكيفية مثل هذا:
حسنًا، بعض الأمثلة لتوضيح الأمر:
هذه هي الطريقة التي يعمل بها كل شيء. هذا هو بالضبط وليس هناك طريقة أخرى. أتمنى أن تفهم هذا. دعونا نضع ذلك موضع التنفيذ. لدينا نموذج اختبار، وإن كان بدائيًا للغاية.
المهمة: اختفاء العمود الجانبي على الشاشات الصغيرة، وكذلك منتج واحد على الشاشات الصغيرة. وبذلك تكون المنتجات على أجهزة xs موجودة بالفعل في عمودين، وليس 3.
حاول أن تفعل ذلك بنفسك، وتحرير كود HTML فقط. ما الذي يجب القيام به؟ أولا، دعونا نلقي نظرة على العمود، لإخفائه على شاشات sm، تحتاج فقط إلى إضافة فئة Hidden-sm إليه.
رائع، الآن يحتاج المنتج الثالث إلى إضافة فئة Hidden-xs وستختفي على أصغر الشاشات. حسنًا، ستكون أصناف السلعتين المتبقيتين على النحو التالي:
أي أنه على الأجهزة المتوسطة، ستشغل الكتلة 4 أعمدة من أصل 12، والتي يمكن ترجمتها إلى 33.33% من العرض، وعلى الأجهزة الصغيرة جدًا - 50%. وبما أن كتلة واحدة تحتوي على منتج ستختفي بهذا العرض، فسيتم ترتيب كلا الكتلتين اللتين تحتويان على المنتجات بشكل أنيق في صف واحد، على النحو التالي:
عظيم! بعد أن فهمت هذا، يمكنك بالفعل التعامل مع الكتل الموجودة على صفحة الويب بأي طريقة تريدها تقريبًا. حاول أن تتوصل إلى مهام لنفسك وتنفذها.
حركني على طول الطريقبعد ذلك، سأعرض لك خدعة أخرى جيدة جدًا - وهي القدرة على تحريك كتلة إلى اليمين أو اليسار. لنفترض أنه ليس لدينا 3 منتجات متتالية، بل منتج واحد. ولا يشغل العرض بالكامل. ومهمتك هي محاذاتها في المركز. من السهل القيام بذلك إذا كنت تضع في اعتبارك أنك تعمل بنظام مكون من 12 عمودًا.
دعونا نترك كتلة واحدة مع المنتج:
يكفي إجراء حسابات بسيطة لفهم المقدار الذي تحتاجه لتحريك الكتلة من أجل توسيطها. ويجب تحريكها 4 أعمدة إلى اليسار على الشاشات المتوسطة والكبيرة، و3 أعمدة على الصغيرة. هذا هو ما يبدو:
تقول الفئة col-md-offset-4: على الشاشات المتوسطة والكبيرة، قم بإزاحة الكتلة إلى اليسار بنسبة 33% من عرض الحاوية الأصلية (إزاحة 1/3 يسار، 1/3 عرض كتلة، ⅓ إزاحة يمين، مما يؤدي إلى التمركز).
فئة col-xs-offset-6: على الشاشات الصغيرة جدًا والصغيرة، قم بالإزاحة لليسار بنسبة 25% (¼ مساحة لليسار، ½ عرض الكتلة، ¼ مساحة لليمين).
أتمنى أن تفهم الجوهر وأن تستخدم هذه الفئات إذا لزم الأمر.
مكونات Bootstrap وأمثلة على استخدامهاأهنئك. لقد تناولنا للتو الموضوع الأكثر أهمية المتعلق بالإطار. إنها الشبكة والعمل معها هو المهم. إن العمل مع المكونات يعني بالفعل أنه يمكنك ببساطة الانتقال إلى الوثائق ونسخ رمز المكون المطلوب هناك وتغييره ليناسب احتياجاتك إذا لزم الأمر. لكنني سأقدم أدناه بعض الأمثلة حول كيفية استخدام المكونات.
عوامات سريعة وإلغاء اللفتسمح لك فئتي السحب لليسار والسحب لليمين بجعل أي كتلة تطفو بسرعة عن طريق إرسالها إلى اليسار أو اليمين. لا تنسى إلغاء التدفق. يمكنك استخدام فئة Clearfix لهذا الغرض.
Bootstrap: قائمة الاستجابة الأفقية (الجوّال).سنقوم بإضافة المكونات التالية مباشرة إلى القالب، لذلك إذا كنت تريد العمل مع الكود وليس القراءة فقط، فاتبع جميع الخطوات بعدي.
في الواقع، باستخدام Bootstrap، يمكنك بسهولة إنشاء ليس فقط قائمة قابلة للتكيف، ولكن ما يسمى بقائمة الهاتف المحمول، والتي يتم طيها بالكامل على شاشات صغيرة وإخفائها تحت زر واحد. يمكن رؤية هذه التقنية في العديد من القوالب سريعة الاستجابة وهي في الواقع سهلة التنفيذ للغاية. مثال رمز قائمة الهاتف المحمول موجود في الوثائق، وسوف آخذه من هناك وأعيده قليلاً.
لذلك، أول شيء سأفعله هو إزالة الكتلة بالرأس، لأن قائمتنا، في الواقع، ستكون الرأس في حالة القالب الخاص بي. يجب وضع رمز القائمة قبل كل محتوى الموقع، حتى قبل كتلة الحاوية. لماذا؟ نعم، ستلاحظ الآن بنفسك أن الشبكة مدمجة بالفعل في شريط التنقل. إذن هذا هو الكود:
شعار/اسم زر التبديل
يبحث
لا تنزعج من حقيقة وجود الكثير من التعليمات البرمجية. وهذا هو شكل الموقع الآن:
ولكن إذا كانت القائمة الخاصة بك لا تشغل عرض الشاشة بالكامل، فمن المنطقي وضعها في المنتصف. للقيام بذلك، يجب عليك بعد ذلك إنشاء كتلة مجمعة إضافية للقائمة، والتي يجب وضعها بعد الكتلة مع فئة سائل الحاوية. لا تنس إغلاق هذه الكتلة. لقد أعطيته فئة التفاف شريط التنقل. فيما يلي الأنماط لذلك:
أي أنه يمكنك ببساطة تحديد العرض وتوسيطه. أو في البداية استبدل حاوية السوائل بالحاوية .
كما ترون، أضفنا شعارًا وعنصرين بسيطين وعنصرًا منسدلًا ونموذج بحث إلى القائمة. أي أن هناك عناصر كثيرة. يمكنك بسهولة تخصيص القائمة لنفسك عن طريق إضافة الفصول الدراسية الخاصة بك إليها. لكن هدفي الآن هو ببساطة أن أعرض لكم هذا المكون.
هكذا ستظهر القائمة على الأجهزة التي يقل عرض شاشتها عن 768 بكسل:
كما ترون، انهارت القائمة. يتم فتحه عند النقر فوق الزر الموجود في الزاوية اليمنى العليا. بقي الشعار فقط على الشاشة.
القائمة المنسدلةفي الوقت نفسه، من المثال أعلاه، يمكنك فهم كيفية إنشاء عنصر القائمة المنسدلة في Bootstrap، فلنستخرج هذا الرمز لإلقاء نظرة أكثر تفصيلاً:
لذا، فإن حاوية عنصر القائمة المنسدلة هي عنصر قائمة عادي مع فئة القائمة المنسدلة. يوجد بداخله الرابط الرئيسي، حيث يؤدي النقر عليه إلى فتح القائمة المنسدلة. من المهم جدًا تعيين سمة بيانات لها، والتي تراها في الكود؛ وبدونها، لن يعمل أي شيء. يجب عليك أيضًا التأكد من أن ملف bootstrap.js متصل بصفحات الويب.
لا يعد النطاق مع فئة علامة الإقحام أكثر من مجرد سهم، بفضله يمكنك أن تفهم أن العنصر عبارة عن عنصر منسدل، ويتم تشكيل القائمة نفسها باستخدام قائمة ذات تعداد نقطي قياسي. هذا كل شيء، كل شيء بسيط للغاية، يمكنك استخدام هذا الرمز لتنفيذ العناصر المنسدلة.
إضافة فتات الخبز (Breadcrumbs) باستخدام Bootstrapفي العديد من المتاجر، يمكنك العثور على ما يسمى كتلة فتات الخبز، والتي تحتوي على المسار الكامل إلى الصفحة الحالية. من السهل أيضًا القيام بذلك باستخدام إطار العمل، راجع الكود:
في الواقع، يكفي تحديد فئة مسار التنقل لقائمة مرقمة، وإدخال عناصر القائمة المعتادة فيها. بالمناسبة، سأقوم بتوسيط عناوين المستوى الثاني في القالب (يجب كتابة هذا في ملف CSS):
H2 (محاذاة النص: المركز؛)
إذا كنت تريد تغيير مظهر مسارات التنقل بطريقة أو بأخرى، فما عليك سوى استخدام محدد .breadcrumb في CSS. على سبيل المثال، هذه هي الطريقة التي يمكنك بها إزالة لون الخلفية:
مسار التنقل (الخلفية: شفاف؛)
وهذا هو شكل الموقع الآن:
بشكل افتراضي، سيمتد الجدول عبر النافذة بأكملها، لذا قم بتغليفه في مربع بعرض محدود للحد من الأبعاد. افتراضيًا، يبدو الأمر فظيعًا، ولكن إذا أضفت فئة الجدول إلى علامة الجدول، فسيكون كل شيء أجمل بكثير:
