التمهيد

سقالات

تم تصميم Bootstrap على شبكة متجاوبة مكونة من 12 عمودًا. لقد قمنا أيضًا بتضمين تخطيطات ذات عرض ثابت وثابت بناءً على هذا النظام.

الأنماط العامة لإعادة تعيين CSS والطباعة والروابط

يتطلب نوع مستند HTML5

يستخدم Bootstrap عناصر HTML وخصائص CSS التي تتطلب استخدام نوع مستند HTML5. تأكد من تضمينه في بداية كل صفحة Bootstrapped في مشروعك.

  1. <! DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

الطباعة والروابط

ضمن ملف scaffolding.less ، قمنا بتعيين أنماط العرض والطباعة والارتباط العالمية الأساسية. على وجه التحديد ، نحن:

  • قم بإزالة الهامش الموجود على الجسم
  • تعيين background-color: white;علىbody
  • استخدم @baseFontFamily، @baseFontSizeو ، @baseLineHeightوالسمات كقاعدة للطباعة لدينا
  • قم بتعيين لون الارتباط العام عبر @linkColorوتطبيق تسطير الارتباط فقط على:hover

إعادة التعيين عبر التطبيع

اعتبارًا من Bootstrap 2 ، تطورت إعادة تعيين CSS التقليدية للاستفادة من عناصر من Normalize.css ، وهو مشروع قام به نيكولاس غالاغر والذي يعمل أيضًا على تشغيل HTML5 Boilerplate .

لا يزال من الممكن العثور على إعادة الضبط الجديدة في reset.less ، ولكن مع إزالة العديد من العناصر من أجل الإيجاز والدقة.

نظام الشبكة الافتراضي 12 عمودًا مع تطور سريع الاستجابة

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

نظام الشبكة الافتراضي المقدم كجزء من Bootstrap هو شبكة بعرض 940 بكسل ، مكونة من 12 عمودًا .

كما أن لديها أربعة أشكال متجاوبة لمختلف الأجهزة والدقة: الهاتف ، والكمبيوتر اللوحي ، والمناظر الطبيعية للجهاز اللوحي ، وأجهزة الكمبيوتر المكتبية الصغيرة ، وأجهزة الكمبيوتر المكتبية الكبيرة ذات الشاشة العريضة.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


موازنة الأعمدة

4
4 تعويض 4
3 تعويض 3
3 تعويض 3
8 تعويض 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

أعمدة التعشيش

مع نظام الشبكة الثابت (غير السائل) في Bootstrap ، يكون التعشيش أمرًا سهلاً. لتداخل المحتوى الخاص بك ، ما عليك سوى إضافة مجموعة جديدة .rowومجموعة من .span*الأعمدة داخل عمود موجود .span*.

مثال

يجب أن تتضمن الصفوف المتداخلة مجموعة من الأعمدة التي تضيف ما يصل إلى عدد الأعمدة التابعة لها. على سبيل المثال ، .span3يجب وضع عمودين متداخلين داخل ملف .span6.

المستوى 1 من العمود
المستوي 2
المستوي 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     المستوى 1 من العمود
  4.     <div class = "row" > 
  5.       <div class = "span6" > المستوى 2 </div> 
  6.       <div class = "span6" > المستوى 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

نظام شبكة السوائل 12 عمودًا متجاوبًا قائمًا على النسبة المئوية

أعمدة السوائل

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

النسب المئوية وليس وحدات البكسل

يستخدم نظام شبكة السوائل النسب المئوية لعرض العمود بدلاً من وحدات البكسل الثابتة. كما أن لديها نفس الاختلافات المتجاوبة مثل نظام الشبكة الثابتة لدينا ، مما يضمن النسب المناسبة لدقة الشاشة والأجهزة الرئيسية.

صفوف السوائل

اجعل أي صف سائلًا ببساطة عن طريق التغيير .rowإلى .row-fluid. تظل الأعمدة كما هي تمامًا ، مما يجعل من السهل جدًا التنقل بين التخطيطات الثابتة والسوائل.

وضع علامة على

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

تداخل السوائل

يختلف التداخل مع الشبكات المرنة قليلاً: لا يلزم أن يتطابق عدد الأعمدة المتداخلة مع الأصل. بدلاً من ذلك ، تتم إعادة تعيين الأعمدة الخاصة بك في كل مستوى لأن كل صف يشغل 100٪ من العمود الأصلي.

السائل 12
السائل 6
السائل 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     المستوى 1 من العمود
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > المستوى 2 </div> 
  6.       <div class = "span6" > المستوى 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

تخصيص الشبكة

عامل القيمة الافتراضية وصف
@gridColumns 12 عدد الأعمدة
@gridColumnWidth 60 بكسل عرض كل عمود
@gridGutterWidth 20 بكسل مسافة سلبية بين الأعمدة

المتغيرات في أقل

يوجد في Bootstrap عدد قليل من المتغيرات لتخصيص نظام الشبكة الافتراضي 940 بكسل ، الموثق أعلاه. يتم تخزين جميع متغيرات الشبكة في متغيرات.

كيفية التخصيص

يعني تعديل الشبكة تغيير @grid*المتغيرات الثلاثة وإعادة تجميع Bootstrap. قم بتغيير متغيرات الشبكة في variables.less واستخدم إحدى الطرق الأربعة الموثقة لإعادة التحويل البرمجي . إذا كنت تضيف المزيد من الأعمدة ، فتأكد من إضافة CSS لمن هم في الشبكة.

البقاء متجاوبا

تخصيص الشبكة يعمل فقط على المستوى الافتراضي ، شبكة 940 بكسل. للحفاظ على جوانب الاستجابة في Bootstrap ، سيتعين عليك أيضًا تخصيص الشبكات في response.less.

قوالب التخطيطات الأساسية لإنشاء صفحات الويب

تخطيط ثابت

التصميم الافتراضي والبسيط الذي يبلغ عرضه 940 بكسل والمتمركز في أي موقع ويب أو صفحة يتم توفيرها بواسطة شخص واحد <div class="container">.

  1. <الجسم>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

تخطيط مرن

<div class="container-fluid">يعطي بنية صفحة مرنة ، والحد الأدنى والحد الأقصى للعرض ، والشريط الجانبي الأيسر. إنه رائع للتطبيقات والمستندات.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <! - محتوى الشريط الجانبي ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - محتوى الجسم ->
  8.     </div>
  9.   </div>
  10. </div>

استعلامات وسائط التصميم المتجاوب لمختلف الأجهزة والحلول

أجهزة مستجيبة

ماذا يفعلون

تسمح استعلامات الوسائط باستخدام CSS مخصص بناءً على عدد من الشروط - النسب ، والعرض ، ونوع العرض ، وما إلى ذلك - ولكنها تركز عادةً حول min-widthو max-width.

  • قم بتعديل عرض العمود في شبكتنا
  • كدس العناصر بدلاً من الطفو حيثما كان ذلك ضروريًا
  • قم بتغيير حجم العناوين والنصوص لتكون أكثر ملاءمة للأجهزة

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

اجهزة مدعومة

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

مُلصَق عرض التخطيط عرض العمود عرض مزراب
الهواتف الذكية 480 بكسل وأقل أعمدة انسيابية ، بدون عروض ثابتة
الهواتف الذكية على الأجهزة اللوحية 767 بكسل وما دون أعمدة انسيابية ، بدون عروض ثابتة
أقراص رأسية 768 بكسل وما فوق 42 بكسل 20 بكسل
تقصير 980 بكسل وما فوق 60 بكسل 20 بكسل
شاشة كبيرة 1200 بكسل وما فوق 70 بكسل 30 بكسل

يتطلب علامة وصفية

لضمان عرض الأجهزة للصفحات سريعة الاستجابة بشكل صحيح ، قم بتضمين العلامة الوصفية لإطار العرض.

  1. <meta name = "viewport" content = "width = device-width، initial-scale = 1.0" >

استخدام الاستعلامات الإعلامية

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

  1. استخدم الإصدار المجمع المتجاوب ، bootstrap-responsive.css
  2. أضفimport "responseive.less" وأعد ترجمة Bootstrap
  3. عدّل وأعد ترجمة response.less كملف منفصل

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

  1.   // هواتف أفقية وأسفل
  2.   media ( أقصى عرض : 480 بكسل ) { ... }     
  3.  
  4.   // هاتف أفقي إلى جهاز لوحي عمودي
  5.   media ( أقصى عرض : 767 بكسل ) { ... }     
  6.  
  7.   // جهاز لوحي عمودي إلى أفقي وسطح المكتب
  8.   media ( الحد الأدنى - العرض : 768 بكسل ) و ( الحد الأقصى - العرض : 979 بكسل ) { ... }        
  9.  
  10.   // سطح مكتب كبير
  11.   media ( الحد الأدنى - العرض : 1200 بكسل ) { ... }

فئات المرافق المستجيبة

ما هم

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

متى يجب استخدام

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

على سبيل المثال ، قد تعرض <select>عنصرًا للتنقل في تخطيطات الأجهزة المحمولة ، ولكن ليس على الأجهزة اللوحية أو أجهزة سطح المكتب.

فصول الدعم

يظهر هنا جدول بالفئات التي ندعمها وتأثيرها على تخطيط استعلام وسائط معين (مُسمى حسب الجهاز). يمكن العثور عليها في responsive.less.

فصل الهواتف480 بكسل وأقل أجهزة لوحية767 بكسل وما دون أجهزة الكمبيوتر المكتبية768 بكسل وما فوق
.visible-phone مرئي
.visible-tablet مرئي
.visible-desktop مرئي
.hidden-phone مرئي مرئي
.hidden-tablet مرئي مرئي
.hidden-desktop مرئي مرئي

حالة اختبار

قم بتغيير حجم متصفحك أو تحميله على أجهزة مختلفة لاختبار الفئات المذكورة أعلاه.

مرئي على ...

تشير علامات الاختيار الخضراء إلى أن الفصل الدراسي مرئي في منفذ العرض الحالي.

  • هاتف✔ الهاتف
  • لوح✔ جهاز لوحي
  • سطح المكتب✔ سطح المكتب

مخفي في ...

هنا ، تشير علامات الاختيار الخضراء إلى أن الفصل مخفي في منفذ العرض الحالي.

  • هاتف✔ الهاتف
  • لوح✔ جهاز لوحي
  • سطح المكتب✔ سطح المكتب