اجعل Bootstrap في متناول اليد


الدرس: الشبكة؟


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

عرض


مبدأ الشبكة
الشبكة عبارة عن تقسيم إلى خلايا:
jQuery web
شبكة
يمكننا بعد ذلك أن نقرر تنظيم المحتوى باستخدام لكل عنصر خلية واحدة أو أكثر:
jQuery web
يمكننا وضع العناصر على الشبكة
تحتوي شبكة Bootstrap على 12 عمودًا كما في الرسم التوضيحي السابق. ربما تكون قد بدأت في فهم فائدة هذه المنظمة.
مصطلحات
تقسم الشبكة إلى صفوف (تسمىrow ، لأن كل شيء باللغة الإنجليزية) والأعمدة (col) :
jQuery web
تتكون الشبكة من صفوف وأعمدة
شبكة BOOTSTRAP
شبكة Bootstrap ليست مثالية مثل الشبكة المعروضة مسبقًا. التقسيم إلى أعمدة هو مجرد تقسيم في نسبة مئوية من عرض نافذة العرض ويتوافق مع ما رأيناه للتو. من ناحية أخرى ، ليس الأمر نفسه بالنسبة للصفوف. هذه الأخيرة لها ارتفاع محتوياتها:
jQuery web
الصفوف لها ارتفاع محتوياتها
الأخلاق ، يأخذ الصف ارتفاع العنصر الأكبر الذي يحتوي عليه. نظرًا لأن عرض الأعمدة مقيد ، فإن تدفق البيانات يتدفق عموديا ، وهو سلوك HTML كلاسيكي. يجب أن يؤخذ هذا في الاعتبار عند التنسيق.
تنظيم الشبكة
Bootstrap هو في الأساس ملف CSS . لديه العديد من الفئات التي يمكن استخدامها مباشرة في علامات HTML . الطبقة الأولى التي يجب معرفتها هي row التي تمثل صفًا. تحدد هذه الفئة هوامش سالبة على اليمين وعلى اليسار:

.row {
  margin-right: -15px;
  margin-left: -15px;
} 
ثم يتعين عليك تحديد عدد الأعمدة لكل عنصر مع العلم أن هناك 12 على الأكثر. لتحديد عدد الأعمدة المستخدمة لكل عنصر ، لدينا أربع بطاريات من 12 فئة:
  • col-xs-1  أو col-sm-1  أو col-md-1  أو col-lg-1
  • col-xs-2  أو col-sm-2  أو col-md-2  أو col-lg-2
  • ...
  • col-xs-12 أو col-sm-12 أو col-md-12 أوcol-lg-12
لماذا 4 أنواع من الطبقات للأعمدة؟
لقد أخبرتك بالفعل أن Bootstrap "سريع الاستجابة" ، مما يعني أنه يتكيف مع حجم الشاشة. يسمح بعرض على شاشة عملاقة وكذلك على هاتف ذكي. ولكن ماذا يحدث لعناصر صفحة الويب عندما تصغر النافذة أو تتوسع؟ يمكن تصور فرضيتين: العناصر تغيّر حجمها بينما تظل في وضعها ، أو تتراكم عندما تصبح النافذة أضيق وتضع نفسها جنبًا إلى جنب عندما تتسع. فيما يلي مثال على الصفحة الرئيسية لـ ArabClassroom التي توضح هذه الظاهرة بثلاثة مواقف (شاشة عريضة وشاشة متوسطة وشاشة صغيرة):
jQuery web
جانب الشاشة الكبيرة

jQuery web
المظهر على الشاشة المتوسطة

jQuery web
الجانب على الشاشة الصغيرة

بدلاً من تقليل العناصر إلى خطر جعلها غير مقروءة ، تم اختيار تكديسها شيئًا فشيئًا عندما تصبح النافذة أضيق. قد يكون هناك خيار آخر لحذف بعض العناصر غير المفيدة حقًا ، لكننا سنعود إليها لاحقًا. في الوقت الحالي ، سوف نتساءل فقط كيف يمكننا الاختيار بين الخيارين المعروضين في الشكل التالي.
jQuery web
التراص أم التخفيض؟
هذا هو المكان الذي تدخل فيه الأنواع الأربعة للفصول التي سبق رؤيتها للأعمدة. يأخذ Bootstrap في الاعتبار 4 أنواع من الوسائط: صغيرة ، مثل الهواتف الذكية (أقل من 768 بكسل) ، يعني ، مثل الأجهزة اللوحية (أقل من 992 بكسل) وشاشات متوسطة (أقل من 1200 بكسل) وأخيرًا شاشات كبيرة (أكثر من 1200 بكسل ). يوضح الشكل التالي جدولًا يوضح اختلافات التفاعل حسب الفئة.
jQuery web
اسم الفئة هي بديهية
  • xs    هي x-small و تعني صغيرة جدا
  • sm هي small و تعني صغيرة
  • md هي meduim و تعني متوسطة
  • lg هي large و تعني واسعة
منذ Bootstrap 4 يوجد الآن 5 أحجام شبكات ممكنة ؛ صغيرة جدا ، صغيرة ، متوسطة ، على نطاق واسع و على نطاق واسع خارج xl .
مثال صغير؟
للحصول على عنصر من 4 أعمدة كبيرة إلى جانب عنصر من 8 أعمدة عرض على الهاتف الذكي ، واحد لديه:

<div class="row">
  <div class="col-xs-4">Largeur 4</div>
  <div class="col-xs-8">Largeur 8</div>
</div> 
يوضح الشكل التالي هذا الرمز مع التأثير عند التبديل إلى شاشة أكبر
jQuery web
عنصر مكون من 4 أعمدة بجانب عنصر مكون من 8 أعمدة
هنا هو الإصدار اللوحي:

<div class="row">
  <div class="col-sm-4">Largeur 4</div>
  <div class="col-sm-8">Largeur 8</div>
</div> 
يوضح الشكل التالي هذا الرمز مع التأثير عند التبديل إلى شاشة أصغر أو أكبر.
jQuery web
تتغير الشاشة حسب حجم الشاشة
لاحظت أنه عند التكديس ، تشغل الأعمدة كل المساحة المتاحة.
وأخيرًا ، إليك نسخة الشاشة الكبيرة:

<div class="row">
  <div class="col-lg-4">Largeur 4</div>
  <div class="col-lg-8">Largeur 8</div>
</div> 
يوضح الشكل التالي هذا الكود مع التأثير عند التبديل إلى شاشة أصغر وأصغر.
jQuery web
نسخة الشاشة الكبيرة
يتم حساب عرض عناصر الشبكة بنسبة مئوية وفقًا لإطار التصور. من الواضح أنه لا يوجد ما يحظر خلط فئات الفئات الثلاث لإنشاء تأثيرات معينة مع عناصر معينة يجب تكديسها وليس غيرها (إنها حتى الإستراتيجية المستخدمة للتخطيط "المتجاوب responsive" كما سنرى قريبًا)…
بعد هذا الإحماء الصغير الذي يعرفك بمفهوم الشبكة في Bootstrap ، سنراجع الاحتمالات بالتفصيل. ولكن لتصور جميع الأمثلة التالية ، أقترح إضافة نمط بسيط ، فقط لعرض العناصر بشكل صريح. لتجنب تلويث كود HTML ، سنضع هذا النمط المحدد في ملف CSS معين (سيتم تسمية هذا الملف tuto.css في الكود) :

body {
  padding-top: 10px;
}
[class*="col-"], footer {
  background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
} 
الغرض الوحيد من قواعد النمط هذه هو إظهار العناصر على الشاشة. هامش داخلي صغير في الجزء العلوي من الجسم ، لمنع كل شيء من الوقوع في الجزء العلوي من الشاشة. حدود (مع زوايا دائرية للجماليات) وخلفية ملونة لتمييز العناصر. يتم تعيين ارتفاع عند 40 بكسل ، لأنه نظرًا لأن ارتفاع الصفوف يعتمد على المحتوى ، فسيكون عرضًا غير متجانس. يوضح الشكل التالي المظهر الذي تم الحصول عليه.
jQuery web
النتيجة النهائية

الشبكة في الممارسة العملية


الحاوية
يجب وضع شبكة Bootstrap في حاوية. Bootstrap عروض الطبقات container و container-fluid . كان استخدامها سابقا اختياري. يشار الآن بوضوح في الوثائق أنه يجب تنفيذها بشكل منهجي من أجل الحصول على المحاذاة والفواصل الصحيحة . container يحتوي الفصل على الشبكة ويتم توسيطها على عرض ثابت ، والذي يتكيف وفقًا لعرض الشاشة. container-fluid يسمح الفصل للشبكة باحتلال العرض بأكمله. في الأمثلة في هذا الفصل ، سأستخدم بشكل منهجي container لتصور أسهل للعناصر. تحتوي هذه الحاوية على أقصى عرض حسب الوسائط المعنية ، كما هو موضح في الجدول التالي.
jQuery web
تتم توسيط الحاوية بشكل تقليدي مع هوامش داخلية صغيرة تبلغ 15 بكسل والهوامش اليمنى واليسرى تلقائيًا:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
} 
هذه هي نفس القواعد للفصل container-fluid . ما يتم إضافته للفئة container هو حد العرض المحدد لكل الوسائط:

  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  } 
  
لاحظ ترتيب الوسائط ، من الأضيق إلى الأوسع. وبهذه الطريقة لدينا فائض ثابت من القواعد.
صف واحد
في هذا المثال الأول ، سنعلن صفًا واحدًا به عنصرين يشغلان المساحة بالكامل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-4">4 colonnes</div>
        <div class="col-lg-8">8 colonnes</div>
      </div>
    </div>
  </body>
</html> 
الذي يعطينا الرقم التالي.
jQuery web
صف واحد مع عنصرين يشغلان كل المساحة
تخطيط سريع وسهل لا؟
عدة صفوف
للحصول على صفوف متعددة ، استخدم الصف عدة مرات row . مثال صغير مع 3 صفوف لرؤية التأثير:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-1">1 col</div>
        <div class="col-lg-2">2 colonnes</div>
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-6">6 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-12">12 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-4">4 colonnes</div>
        <div class="col-lg-8">8 colonnes</div>
      </div>
    </div>
  </body>
</html> 
الذي يعطينا الرقم التالي.
jQuery web
ثلاثة صفوف
تخطي الأعمدة
يتيح لك Bootstrap أيضًا تخطي الأعمدة. هناك بعض فئات الإزاحة لذلك:
  • col-*-offset-1
  • col-*-offset-2
  • ...
  • col-*-offset-11
هذه الفئات تساعد في إضافة الهامش الأيسر. مثلا :

.col-lg-offset-6 {
  margin-left: 50%;
} 
في هذه الحالة ، تمثل 6 أعمدة نصف النافذة بنسبة 50٪. هذا مثال :

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-6">6 colonnes</div>
        <div class="col-lg-3">3 colonnes</div>
      </div>
      <div class="row">
        <div class="col-lg-3">3 colonnes</div>
        <div class="col-lg-offset-6 col-lg-3">3 colonnes</div>
      </div>
    </div>
  </body>
</html> 
هنا هي النتيجة في الشكل التالي.
jQuery web
لقد تخطينا الأعمدة
لقد تخطينا 6 أعمدة بفضل الفصل col-lg-offset-6 . من الواضح أنه يمكننا مضاعفة القفزات:

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-lg-offset-1">2 colonnes</div>
    <div class="col-lg-4 col-lg-offset-2">4 colonnes</div>
    <div class="col-lg-2 col-lg-offset-1">2 colonnes</div>
  </div>
</div> 
هنا هي النتيجة في الشكل التالي.
jQuery web
لقد تخطينا الأعمدة عدة مرات
تداخل العناصر
يجب علينا غالبًا تداخل العناصر في صفحة ويب ، هل من الممكن باستخدام Bootstrap؟ بمعنى آخر ، قم بتضمين واحد row في واحد col . حسنًا ، سنختبرها على الفور:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-8">8 colonnes
          <div class="row">
            <div class="col-lg-3">3 colonnes</div>
            <div class="col-lg-6">6 colonnes</div>
            <div class="col-lg-3">3 colonnes</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html> 
هنا هي النتيجة في الشكل التالي.
jQuery web
لدينا صفوف متداخلة
يبدو أنه يعمل!
يمكن ربط التداخل لتلبية الاحتياجات المعقدة:

<div class="container">
  <div class="row">
    <div class="col-md-12">Premier niveau avec 12 colonnes
    <div class="row">
      <div class="col-md-8">Second niveau avec 8 colonnes
      <div class="row">
        <div class="col-md-4">Troisième niveau avec 4 colonnes</div>
        <div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
        <div class="row">
          <div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
          <div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
        </div>
        </div>
      </div>
      </div>
      <div class="col-md-4">Second niveau avec 4 colonnes</div>
    </div>
  </div>
</div> 
هنا هي النتيجة في الشكل التالي.
jQuery web
التداخل المعقد مع القفزات للأعمدة
ترتيب الأعمدة
منطقيا ، يتم عرض الأعمدة في ترتيب التدفق. قد يحدث أننا نريد أن نقلب هذا الطلب. انظر إلى هذا المثال:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">12 colonnes
          <div class="row">
            <div class="col-lg-2 col-lg-push-8">Colonne 1</div>
            <div class="col-lg-2 col-lg-push-3">Colonne 2</div>
            <div class="col-lg-2 col-lg-pull-2">Colonne 3</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html> 
وهنا النتيجة في الشكل التالي.
jQuery web
يمكننا اختيار ترتيب الأعمدة
col-lg-push-* ينقل الفصل عمودًا واحدًا إلى اليمين ويقوم الفصل col-lg-pull-* بالعكس.
TP صغير
للممارسة ، أقترح عليك الحصول على النتيجة المرئية في الشكل التالي.
jQuery web
محاولة للحصول على هذه النتيجة
لذلك اثنين من المناطق منفصلة مع إزاحة 4 أعمدة في الجزء الأيسر.
هنا هو الحل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-6">6 colonnes
          <div class="row">
            <div class="col-lg-4">4 colonnes</div>
            <div class="col-lg-offset-4 col-lg-4">4 colonnes</div>
          </div>
        </div>
        <div class="col-lg-6">6 colonnes
          <div class="row">
            <div class="col-lg-4">4 colonnes</div>
            <div class="col-lg-8">8 colonnes</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html> 

تصميم


الاهتمام الرئيسي للشبكة هو عمل تصميم. سنرى بعض الأمثلة لتنظيم الصفحة بشكل صحيح.
الحالة الأولى
لنبدأ بشيء بسيط برأس ، وقائمة على اليسار ، وقسم على اليمين وتذييل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-lg-2">
          Menu
        </nav>
        <section class="col-lg-10">
          Section
        </section>
      </div>
      <footer class="row">
          Pied de page
      </footer>
    </div>
  </body>
</html> 
والنتيجة هي في الشكل التالي.
jQuery web
تصميم بسيط
لقد استخدمت الفئات للشاشة الكبيرة مع الفئة col-lg-*، بحيث أجد نفسي في حالة رصة بمجرد تكدس أقل من 1200 بكسل (انظر الشكل أدناه).
jQuery web
التراص لتقليل العرض
إذا كنت أريد أن يبقى تنسيقي ثابتًا أيضًا للشاشات المتوسطة ، ماذا أفعل؟ أنا فقط استخدم الفئات col-md-* بدلاً من ذلك col-lg-* ، والذي له تأثير في نقل الحد إلى 992 بكسل. بنفس الطريقة ، فإن استخدام الفئات col-sm-* ينقل الحد إلى 768 بكسل ...
لدي نفس النتيجة دون استخدام الفئة col-lg-12، هل هي مفيدة حقًا؟
نحصل فعليًا على نفس التخطيط ، لكن الفئات col-* بها مسافة داخلية يمينية ويسارية تبلغ 15 بكسل ، وإذا لم نستخدم الفئة col-lg-12 ، فسوف يكون هناك تضارب في عرض المحتوى.
الحالة الثانية
الآن النظر في حالة أكثر ثراء:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-sm-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <article class="col-md-10">
              Article
            </article>
            <aside class="col-md-2">
              Aside
            </aside>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-sm-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html> 
والنتيجة هي في الشكل التالي.
jQuery web
تخطيط أكثر ثراء
احتفظنا بالرأس والتذييل ، وكذلك في القائمة ، لكننا دمجنا في المحتوى article و aside . المجموعة مخصصة للعمل على سطح المكتب (كبيرها وصغيرها). بالنسبة للأجهزة اللوحية ، ينتهي بنا المطاف بمكدس لمحتوى القسم (استخدام الفصول col-md-* لـ article و aside ) ، كما في الشكل التالي.
jQuery web
النتيجة على الكمبيوتر اللوحي
وبما أنه لم يتم تخطيط أي شيء خاص للهواتف الذكية ، يتم تكديس كل شيء (انظر الشكل التالي).
jQuery web
النتيجة على الهاتف الذكي
الحالة الثالثة
لنقم بإثراء التصميم:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
    <style type="text/css">
     /* Style pour l'exemple*/
      article.col-sm-10, nav.col-sm-2 {
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <article class="col-sm-10">
              Article
            </article>
            <div class="col-sm-2">
              <div class="row">
                <aside class="col-sm-12">
                  Aside 1
                </aside>
                <aside class="col-sm-12">
                  Aside 2
                </aside>
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html> 
والنتيجة هي في الشكل التالي.
jQuery web
تصميم أكثر تعقيدا
الآن لدينا 2 asides بجانب article . للوصول إلى هناك ، تحتاج إلى 2 مستويات من التداخل. لدينا أيضًا مجموعة كاملة من عمليات التخفيض ، كما هو موضح في الشكل التالي.
jQuery web
النتيجة في الحد
لماذا يوجد الآن رأس وتذييل الصفحة col-lg-12، بينما في المثال السابق كان لدينا col-sm-12؟
نظرًا لأن العرض هو 12 عمودًا ، فإن كل ما يهمنا هو التركيز ، حيث تشترك هاتان الفئتان ، دون تأثير على الوسائط المستخدمة. لذلك يمكننا استخدام كلا الفئتين في حالتنا.
الحالة الرابعة
دعونا ننتهي الى حالة أكثر اكتمالا:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
    <style type="text/css">
     /* Style pour l'exemple*/
      footer {
        border: 0;
      }
      article.col-sm-6, nav.col-sm-2 {
        line-height: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>
      <div class="row">
        <nav class="col-sm-2">
          Menu
        </nav>
        <section class="col-sm-10">
          Section
          <div class="row">
            <div class="col-sm-10">
              <div class="row">
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
                <article class="col-sm-6">
                  Article
                </article>
              </div>
            </div>
            <div class="col-sm-2">
              <div class="row">
                <aside class="col-sm-12">
                  Aside 1
                </aside>
                <aside class="col-sm-12">
                  Aside 2
                </aside>
              </div>
            </div>
          </div>
        </section>
        <section class="col-sm-offset-2 col-sm-10">
          Section
          <div class="row">
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
            <article class="col-sm-6">
              Article
            </article>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>
    </div>
  </body>
</html> 
والنتيجة هي في الشكل التالي.
jQuery web
تخطيط محمل جدا
في القسمين ، أضع 6 مقالات بعرض 6 أعمدة يتم وضعها بشكل مثالي. ليس من المفيد إنشاء 3 صفوف. في القسم الثاني ، لم أقم بوضع aside لإظهار مزيج من المكونات. يتم إزاحة القسم الثاني الذي يأخذ في الاعتبار عرض القائمة ببساطة باستخدام فئة الإزاحة. فيما يتعلق باختيار فئات الأعمدة ، قمت بترتيب القسم الأول للحفاظ على هيكله عند التضييق.
يمكنك أن ترى مع هذه الأمثلة القليلة التي يمكنك بسهولة الحصول على بنية الصفحة معقدة كما تريد. تبقى النقطة الأكثر حساسية اختيار فئات الأعمدة وفقًا للنتيجة المرغوبة اعتمادًا على الوسائط المستخدمة. في أي حال ، يجب علينا اختبار التنسيقات المختلفة لأن العرض لا يعطي بالضرورة ما خططنا له في المرة الأولى. إذا لم تنجح مع فئة واحدة ، فإن الحل هو الجمع بين العديد ، وهذا ما سنراه قريباً ...

في الخلاصة


  • يوفر Bootstrap شبكة لوضع جميع عناصر صفحات الويب.
  • الشبكة متعددة الاستخدامات وتسمح للعديد من المجموعات مثل الادراج وفواصل الأعمدة.
  • تتيح الشبكة أيضًا إمكانية التكيف وفقًا لأبعاد وسيط العارض (كمبيوتر او لوحة رقمية أو هاتف ذكي ...) من خلال إعادة تنظيم العناصر أو إخفاء بعض منها.