Bootstrap RTL

Alsadi

العناصر الأسياسية

يتكون Bootstrap من شبكة ذات 12 عمود وعدد من المخططات والنماذج والمكونات

انتبه! هذه وثائق الإصدار 2.3.2 القديم. انظر أحدث إصدار هنا

نظام الشبكة

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

يتكون نظام الشبكة من 12 عمود. تحتل بالمجمل 940 بكسل دون تفعيل الاستجابة. في طور الاستجابة يصبح عرضه 724 أو 1170 بكسل تبعا لعرض نافذة المتصفح. إن كان عرض نافذة العرض أقل من 767 فإنها تتراكب فوق بعضها.

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

اساسيات نظام الشبكة

لعمل مخطط من عمودين اعمل .row وفيه صندوقان كل واحد منهما span* بالعدد المناسب للنسبة التي تريدها. تذكر لديك 12 وحدة في كل سطر يعني يمكنك عمل النضف بالنصف من خلال span6-span6 ويمكنك عمل ثلث وثلثين من خلال span4-span8 وربع وثلاث أرباع من خلال span3-span9 وغيرها من النسب 

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

الإزاحة

يمكن عمل إزاحة عبر offset* وذلك بإزاحة مقدار عدد من الأعمودة

4 أعمدة دون إزاحة
3 أعمدة بإزاحة عمودين
3 أعمدة بإزاحة عمود
3 أعمدة بإزاحة عمودين
6 أعمدة بإزاحة 3
<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

التداخل

يمكن وضع جداول داخل بعضها من خلال وضع row داخله أكثر من span وكلاهما داخل span لكن لاحظ أن مجموع الداخلية هو 9 وليس 12 وهو حجم الخارجية

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

الشبكة المائعة المستجيبة

عوضا عن الجم الثابت المقيد للعمود يمكن استعمال النسب وذلك من خلال استعمال row-fluid عوضا عن row.

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

ويمكن أن توضع داخل بعضها كل row-fluid فيه 12 عمود

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

المخطط العام

جرت العادة أن يحمل الموقع ثابت العرض الفئة container أو container-fluid

<body>
  <div class="container">
    ...
  </div>
</body>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

التصميم المستجيب

هناك ملف css منفصل لتفعيل التصميم المستجيب وهناك أصناف تساعدك على التصميم مثل

  • visible-phone
  • visible-tablet
  • visible-desktop
  • hidden-phone
  • hidden-tablet
  • hidden-desktop 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">