التمهيد

سقالات

تم تصميم Bootstrap على شبكات وتخطيطات ومكونات سريعة الاستجابة مكونة من 12 عمودًا.

الاعدادات العامة

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

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

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

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

يعيّن Bootstrap أنماط العرض والطباعة والارتباط العالمية الأساسية. على وجه التحديد ، نحن:

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

يمكن العثور على هذه الأنماط داخل السقالات .

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

مع Bootstrap 2 ، تم إسقاط كتلة إعادة التعيين القديمة لصالح Normalize.css ، وهو مشروع قام به نيكولاس غالاغر وجوناثان نيل والذي يعمل أيضًا على تشغيل HTML5 Boilerplate . بينما نستخدم الكثير من Normalize داخل reset.less ، فقد أزلنا بعض العناصر خصيصًا لـ Bootstrap.

نظام الشبكة الافتراضي

مثال على الشبكة الحية

يستخدم نظام شبكة Bootstrap الافتراضي 12 عمودًا ، مما يجعل الحاوية بعرض 940 بكسل دون تمكين الميزات سريعة الاستجابة . مع إضافة ملف CSS سريع الاستجابة ، تتكيف الشبكة لتكون 724 بكسل وعرض 1170 بكسل اعتمادًا على منفذ العرض الخاص بك. تحت إطارات العرض 767 بكسل ، تصبح الأعمدة مرنة ومكدسة عموديًا.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

شبكة HTML الأساسية

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

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

.span4بالنظر إلى هذا المثال ، لدينا .span812 عمودًا إجماليًا وصفًا كاملاً.

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

انقل الأعمدة إلى اليمين باستخدام .offset*الفئات. تزيد كل فئة الهامش الأيسر للعمود بعمود كامل. على سبيل المثال ، .offset4يتحرك .span4على أربعة أعمدة.

4
3 تعويض 2
3 الإزاحة 1
3 تعويض 2
6 الإزاحة 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

لتداخل المحتوى الخاص بك مع الشبكة الافتراضية ، أضف مجموعة جديدة .rowومجموعة من .span*الأعمدة داخل عمود موجود .span*. يجب أن تتضمن الصفوف المتداخلة مجموعة من الأعمدة التي تضيف ما يصل إلى عدد الأعمدة التابعة لها.

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

نظام شبكة السوائل

مثال على شبكة السوائل الحية

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

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

أساسيات الشبكة السائلة HTML

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

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

موازنة السوائل

تعمل بنفس طريقة إزاحة نظام الشبكة الثابتة: أضف .offset*إلى أي عمود للتعويض عن طريق العديد من الأعمدة.

4
4 تعويض 4
3 تعويض 3
3 تعويض 3
6 الإزاحة 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

السائل 12
السائل 6
السائل 6
السائل 6
السائل 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     السائل 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         السائل 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > السائل 6 </div> 
  9.           <div class = "span6" > السائل 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > السائل 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

التخطيطات

تخطيط ثابت

يوفر تخطيطًا مشتركًا بعرض ثابت (ومتجاوب اختياريًا) مع <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 سريع الاستجابة في مشروعك عن طريق تضمين العلامة الوصفية المناسبة وورقة الأنماط الإضافية في <head>مستندك. إذا كنت قد جمعت Bootstrap من صفحة التخصيص ، فأنت تحتاج فقط إلى تضمين العلامة الوصفية.

  1. <meta name = "viewport" content = "width = device-width، initial-scale = 1.0" >  
  2. <link href = "الأصول / css / bootstrap-responsive.css" rel = "stylesheet" >

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

حول Bootstrap سريع الاستجابة

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

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

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

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

اجهزة مدعومة

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

مُلصَق عرض التخطيط عرض العمود عرض مزراب
شاشة كبيرة 1200 بكسل وما فوق 70 بكسل 30 بكسل
تقصير 980 بكسل وما فوق 60 بكسل 20 بكسل
أقراص رأسية 768 بكسل وما فوق 42 بكسل 20 بكسل
الهواتف والأجهزة اللوحية 767 بكسل وما دون أعمدة انسيابية ، بدون عروض ثابتة
الهواتف 480 بكسل وأقل أعمدة انسيابية ، بدون عروض ثابتة 
  1. / * سطح مكتب كبير * /
  2. media ( الحد الأدنى - العرض : 1200 بكسل ) { ... }     
  3.  
  4. / * جهاز لوحي عمودي إلى أفقي وسطح المكتب * /
  5. media ( الحد الأدنى - العرض : 768 بكسل ) و ( الحد الأقصى - العرض : 979 بكسل ) { ... }        
  6.  
  7. / * هاتف أفقي إلى جهاز لوحي عمودي * /
  8. media ( أقصى عرض : 767 بكسل ) { ... }     
  9.  
  10. / * هواتف أفقية وأسفل * /
  11. media ( أقصى عرض : 480 بكسل ) { ... }

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

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

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

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

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

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

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

مرئي على ...

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

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

مخفي في ...

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

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