السقالات · Bootstrap باللغة العربية

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

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

<! DOCTYPE html>
<html lang = "en" > 
  ...
</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 بكسل ، تصبح الأعمدة مرنة ومكدسة عموديًا.

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

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

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

3 تعويض 2

3 الإزاحة 1

3 تعويض 2

6 الإزاحة 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

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

عمود المستوى 1

المستوي 2

<div class = "row" > 
  <div class = "span9" > 
    عمود المستوى 1
    <div class = "row" > 
      <div class = "span6" > المستوى 2 </div> 
      <div class = "span3" > المستوى 2 </div> 
    </div>
  </div>
</div>

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

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

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

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

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

4 تعويض 4

3 تعويض 3

6 الإزاحة 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

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

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

السائل 12

السائل 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    السائل 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        السائل 6
        <div class = "row-fluid" > 
          <div class = "span6" > السائل 6 </div> 
          <div class = "span6" > السائل 6 </div> 
        </div>
      </div>
      <div class = "span6" > السائل 6 </div> 
    </div>
  </div>
</div>

تخطيط ثابت

يوفر تخطيطًا مشتركًا بعرض ثابت (ومتجاوب اختياريًا) مع <div class="container">المطلوب فقط.

<الجسم>
  <div class = "container" > 
    ...
  </div>
</body>

تخطيط مرن

قم بإنشاء صفحة مرنة من عمودين باستخدام <div class="container-fluid">—رائعة للتطبيقات والمستندات.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <! - محتوى الشريط الجانبي ->
    </div>
    <div class = "span10" > 
      <! - محتوى الجسم ->
    </div>
  </div>
</div>

تمكين الميزات سريعة الاستجابة

قم بتشغيل CSS سريع الاستجابة في مشروعك عن طريق تضمين العلامة الوصفية المناسبة وورقة الأنماط الإضافية في <head>مستندك. إذا كنت قد جمعت Bootstrap من صفحة التخصيص ، فأنت تحتاج فقط إلى تضمين العلامة الوصفية.

<meta name = "viewport" content = "width = device-width، initial-scale = 1.0" >  
<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 بكسل وأقل	أعمدة انسيابية ، بدون عروض ثابتة

/ * سطح مكتب كبير * /
media ( الحد الأدنى - العرض : 1200 بكسل ) { ... }     
 
/ * جهاز لوحي عمودي إلى أفقي وسطح المكتب * /
media ( الحد الأدنى - العرض : 768 بكسل ) و ( الحد الأقصى - العرض : 979 بكسل ) { ... }        
 
/ * هاتف أفقي إلى جهاز لوحي عمودي * /
media ( أقصى عرض : 767 بكسل ) { ... }     
 
/ * هواتف أفقية وأسفل * /
@media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Responsive utilities test case

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

مرئي على ...

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

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

مخفي في ...

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

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

سقالات

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