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


الدرس: القليل من التطبيق


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

الجمع بين التنسيقات ومثال الصفحة


سوف نستخدم الآن ما رأيناه في الفصول السابقة لبناء صفحة عملية.
مزيج من الطبقات "COL- *"
لقد رأينا التخطيطات بشكل انتقائي باستخدام فئات للأعمدة المخصصة لتنسيقات وسائط مختلفة. سننظر الآن في دمجها للتعامل مع بعض الحالات. في الصفحة التي يجب أن أنشأها ، أريد الحصول على صور صغيرة جنبًا إلى جنب. افترض أن أترك هذا الهيكل لهذا الجزء من الصفحة:

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      body { margin-top: 10px; }
    </style>
  </head>

  <body>

    <div class="container">
      <section class="row">
        <div class="col-lg-2"><img src="images/t1.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t2.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t4.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t10.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t11.jpg" alt="Tigre"></div>
        <div class="col-lg-2"><img src="images/t12.jpg" alt="Tigre"></div>
      </section>
    </div>

  </body>
</html>
تجسيد الشاشة العريضة مثالي مع 6 صور بعرض (انظر الشكل أدناه).
jQuery web
شاشة عرض كبيرة
لكنه يفسد عندما أضيق النافذة ، حيث أنني أعلم أن العناصر تتراكم اذا أقل من 1200 بكسل. فجأة أجد نفسي مع صورة على العرض ، وبما أنها ذات دقة منخفضة ، فستسوء جودتها ، كما في الشكل التالي.
jQuery web
عرض أقل من 1200 بكسل
المثالي هو أن يكون:
  • على الشاشة المتوسطة والكبيرة: 6 صور على العرض.
  • على الجهاز اللوحي: 4 صور على العرض.
  • على الهاتف الذكي: 3 صور على العرض.
كيف تحقق هذا؟ ببساطة عن طريق الجمع بين الطبقات col-* :

<div class="container">
  <section class="row">
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" 
        alt="Tigre">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" 
        alt="Tigre">
    </div>
  </section>
</div>
سيكون لدي:
  • على الشاشة أكثر من 992 بكسل: فئات col-md-2  نشطة.
  • على الشاشة بين 768 و 992 بكسل: فئات col-sm-3  نشطة.
  • على الشاشة التي يقل عرضها عن 768 بكسل: فئات col-xs-4  نشطة.
وهنا هي النتيجة على الشاشة الوسطى (الطبقات col-sm-3 النشطة) .
jQuery web
عرض الشاشة المتوسطة
وفي الشكل التالي ، فإن النتيجة على الشاشة الصغيرة (الطبقات col-xs-4 النشطة) .
jQuery web
عرض الشاشة الصغيرة
لذا ، حصلت بسهولة على عرض تقديمي للصور الفوتوغرافية وفقًا للدعم المستخدم لعرضها.

مثال الصفحة


الآن لنقم بإنشاء صفحة كاملة تدمج الجزء الذي ناقشناه للتو:

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
  </head>

  <body>
    <div class="container">
      <header class="page-header">
        <h1>Mon amour pour les tigres</h1>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très 
            longtemps. Ce site a été construit en <em>hommage à ces 
                merveilleux félins...</em><br>
        Je fais partie de la <abbr title="Société des Amoureux des Tigres">
                SAT</abbr> qui a pour but de faire connaître ces splendides 
                animaux. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            Le Tigre (Panthera tigris) est un mammifère carnivore de 
            la famille des félidés (Felidae) du genre Panthera. 
Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le 
plus grand félin sauvage et l'un des plus grands carnivores du monde. 
L'espèce est divisée en neuf sous-espèces possédant des différences 
mineures en termes de taille ou de comportement. Superprédateur, 
il chasse principalement les cerfs et les sangliers, bien qu'il puisse 
s'attaquer à des proies de taille plus importante comme les buffles. 
Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure 
sociale des tigres en fait un animal solitaire ; le mâle possède 
un territoire qui englobe les domaines de plusieurs femelles et ne 
participe pas à l'éducation des petits.<br>
            <small class="pull-right">Wikipedia</small><br>
          </blockquote>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" 
            alt="Tigre">
        </div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" 
            alt="Tigre">
        </div>
      </section>
      <section class="row">
        <aside class="col-sm-4">
          <address>
            <p>Vous pouvez me contacter à cette adresse :</p>
            <strong>Tigrou Alfred</strong><br>
            Allée des fauves<br>
            28645 Félins-sur-Loire<br>
          </address>
        </aside>
        <div class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </div>
      </section>
    </div>
  </body>
</html>
هنا هو الشكل التالي النتيجة التي تم الحصول عليها.
jQuery web
صفحة المثال
تكوين بسيط مع رأس و 3 صفوف. يحتوي العنوان فقط على عنوان مع فئة خاصة قليلاً سنراها لاحقًا. يحتوي الصف الأول على عنصر واحد فقط. الثاني ، ومع ذلك ، لديه 12 ويتوافق مع ما رأيناه في وقت سابق. هنا هو تصور للقطع.
jQuery web
المثال صفحة فك تشفير
الفئة PAGE-HEADER
يحدد هذا الفصل بعض القيم:

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}
بهامش كبير 40 بكسل و 20 بكسل. خط أقل من 1 بكسل من اللون الرمادي ، مع وجود فجوة 9 بكسل بين المحتوى وهذا الخط. لذلك أسلوب لطيف لرأس الصفحة. فقط ضع عنوانًا كما فعلت هنا:

<header class="page-header">
   <h1>Mon amour pour les tigres</h1>
</header>
هنا هي النتيجة في الشكل التالي.
jQuery web
فئة رأس الصفحة
بعض التحسينات
في الفقرة الأولى ، استخدمت بعض النقاط البارزة:

<p>Je suis passionné par les <strong>tigres</strong> depuis très longtemps. 
    Ce site a été construit en <em>hommage à ces merveilleux félins...</em>
    <br>
    Je fais partie de la <abbr title="Société des Amoureux des Tigres">
    SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>
لاحظ في الشكل التالي جودة النافذة المنبثقة عند تحريك المؤشر فوق الاختصار SAT .
jQuery web
ظهور اختصار
اقتباس
الفصل التالي يتضمن اقتباس مع استخدام العلامة blockquote :

<blockquote>Le Tigre (Panthera tigris) est un mammifère carnivore...<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>
والنتيجة رصينة وأنيقة (انظر الشكل التالي).
jQuery web
ظهور الاقتباس
تم إرجاع المرجع السفلي "Wikipedia" إلى اليمين مع الفئة pull-right التي تطفو فقط إلى اليمين:

.pull-right {
  float: right !important;
}
عنوان
في الجزء السفلي الأيسر هو عنوان . لقد استخدمت العلامة <address> :

<address>
   <p>Vous pouvez me contacter à cette adresse :</p>
   <p><strong>Tigrou Alfred</strong><br>
     Allée des fauves<br>
     28645 Félins-sur-Loire<br>
</address>
للحصول على نتيجة مرضية ، مرئية في الشكل التالي.
jQuery web
ظهور عنوان
فقط قليل من النمط المضاف
لإضفاء مزيد من الانسجام على هذه الصفحة ، اضطررت إلى إضافة هامش منخفض قدره 20 بكسل إلى الجميع col وأجبرت الصور على شغل كل المساحة المتاحة:

 [class*="col"] { 
   margin-bottom: 20px;
}
img {
   width: 100%;
}
هذا هو عنصر النمط الوحيد الذي تمت إضافته إلى هذه الصفحة.

حالات عملية و الفئات "RESPONSIVE"


الآن لديك كل العناصر في متناول اليد لبناء صفحات! أقترح بعض التمارين العملية لتدريب لك.
التمرين 1
الهدف هو الحصول على تخطيط عريض مماثل لتلك الموجودة في الشكل التالي.
jQuery web
نتيجة للحصول عليها
فكر للحظة قبل النظر إلى الحل.

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-8 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-lg-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-lg-2">
          <div class="row">
            <aside class="col-lg-12">
              Aside
            </aside>
            <aside class="col-lg-12">
              Aside
            </aside>
          </div>
        </div>

        <section class="col-lg-8">
          Section
        </section>

        <div class="col-lg-2">
          <div class="row">
            <aside class="col-lg-12">
              Aside
            </aside>
            <aside class="col-lg-12">
              Aside
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>
والسؤال المطروح الآن هو: كيف سيكون رد فعل هذا الهيكل عندما نقوم بتقليل النافذة؟ كما أضع الفصول col-lg-*، فإن كل شيء سيتم تكديسه تحت 1200 بكسل. إذا كان هذا التأثير يناسبني ، فهو مثالي. لكن لنفترض أنه على جهاز لوحي أريد بنية مماثلة لتلك الموجودة في الشكل التالي.
jQuery web
العرض المرغوب فيه على الجهاز اللوحي
كيف نفعل؟ هنا حل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-md-8, .col-sm-10 { line-height: 200px; }
    .col-md-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-md-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-sm-2">
          <div class="row">
            <aside class="col-md-12">
              Aside 1
            </aside>
            <aside class="col-md-12">
              Aside 2
            </aside>
          </div>
        </div>

        <section class="col-sm-10 col-md-8">
          Section
        </section>

        <div class="clearfix visible-sm-block"></div>
        
        <div class="col-md-2">
          <div class="row">
            <aside class="col-md-12">
              Aside 3
            </aside>
            <aside class="col-md-12">
              Aside 4
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-md-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>
لقد استبدلت الفئات col-lg-* بالفئات col-md-* ليكون لها سلوك أساسي للشاشات الكبيرة والمتوسطة. ثم قدمت الفئات col-sm-* ليكون السلوك المطلوب على الجهاز اللوحي. من ناحية أخرى ، السطر 38 يستحق بعض التعليقات الخاصة. بالنسبة لوسائط الكمبيوتر اللوحي ، لديك عناصر عائمة تتبع بعضها البعض بسلوكيات ليست بالضرورة تلك التي تريدها. يوضح الشكل التالي النتيجة بدون هذا السطر من الكود.
jQuery web
النتيجة بدون فئة clearfix
ماذا تفعل هذه الفئة clearfix ؟ تقوم بإعادة ضبط العناصر العائمة التي تتبعها لإعادتها إلى التدفق الطبيعي ، وتجنب أن تأتي لتغطية العناصر السابقة. سنرى الآن فئة مرئية SM ...
الطبقات "المستجيبة"RESPONSIVES
vلمواصلة التمرين السابق ، يجب أن نذكر أولاً بعض الفصول المفيدة جدًا التي ستتيح لنا عدم وضع العناصر بشكل مختلف ، بل جعلها تختفي أو تظهر. ستجد جدولًا جيدًا في الوثائق ، وهو مرئي في الشكل التالي.
jQuery web
فصول استجابة
تنقسم فئات الرؤية إلى ثلاثة أنواع حسب نوع التصور:
jQuery web
فئات الرؤية
لقد استخدمنا بالفعل واحدة من هذه الفئات. دعنا نواصل استخدامه لمواصلة تمريننا عن طريق إزالة 2 asides للهواتف الذكية:
jQuery web
العرض المطلوب على الهاتف الذكي
فقط قم بتغيير ، السطر 40:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-md-8, .col-sm-10 { line-height: 200px; }
    .col-md-12 { line-height: 80px; }
  </style>
  </head>
  <body>
    <div class="container">

      <header class="row">
        <div class="col-md-12">
          Entete
        </div>
      </header>

      <div class="row">

        <div class="col-sm-2">
          <div class="row">
            <aside class="col-md-12">
              Aside
            </aside>
            <aside class="col-md-12">
              Aside
            </aside>
          </div>
        </div>

        <section class="col-sm-10 col-md-8">
          Section
        </section>

        <div class="clearfix visible-sm-block"></div>

        <div class="hidden-xs col-md-2">
          <div class="row">
            <aside class="col-md-12">
              Aside
            </aside>
            <aside class="col-md-12">
              Aside
            </aside>
          </div>
        </div>

      </div>

      <footer class="row">
        <div class="col-md-12">
          Pied de page
        </div>
      </footer>

    </div>
  </body>
</html>
التمرين 2
دعونا نرى حالة أخرى. أريد الحصول على النتيجة واضحة في الشكل التالي.
jQuery web
نتيجة للحصول عليها
لذلك الرأس يأخذ كامل الشاشة ، والتنقل إلى اليسار ، قسمين متجاورين والتذييل ، كل ذلك على الشاشة الكبيرة. هنا حل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>

    <header>
      <div class="col-lg-12">
        Entete
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-lg-2">
            Navigation
        </nav>

        <section class="col-lg-5">
          Section
        </section>
        <section class="col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>   

    </div>

  </body>
</html>
الآن أقول لنفسي إن طلبي سيكون جيدًا أيضًا على الشاشة المتوسطة. إذا لم أفعل أي شيء ، فسوف أحصل على النتيجة في الشكل التالي.
jQuery web
النتيجة على الشاشة المتوسطة
لا أحب ذلك كثيرًا ، أود أن يظل القسمان متقاربين ، كما في الشكل التالي.
jQuery web
النتيجة المرجوة على الشاشة المتوسطة
هنا حل:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>


    <header>
      <div class="col-lg-12">
        Entete
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-md-12 col-lg-2">
            Navigation
        </nav>

        <section class="col-md-6 col-lg-5">
          Section
        </section>
        <section class="col-md-6 col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>  

    </div>

  </body>
</html>
بعد التفكير ، أخبر نفسي أن طلبي سيذهب أيضًا على الجهاز اللوحي ، وتراكم العناصر يناسبني ، لكنني أرغب في الحصول على رأس الصفحة مختلف. بعد الانعكاس الجديد ، أريده أيضًا مختلفًا على الهاتف الذكي. مع الفئات "المستجيبة" التي رأيناها سابقًا ، من السهل القيام بما يلي:

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  <!-- Un peu de style pour la visualisation -->
  <style type="text/css">
    .col-lg-2 { line-height: 100px; }
    .col-lg-5 { line-height: 200px; }
    .col-lg-12 { line-height: 80px; }
  </style>
  </head>
  <body>


    <header>
      <div class="visible-lg col-lg-12">
        Entete large
      </div>
      <div class="visible-md col-lg-12">
        Entete moyenne
      </div>
      <div class="visible-sm col-lg-12">
        Entete tablette
      </div>
      <div class="visible-xs col-lg-12">
        Entete smartphone
      </div>
    </header>

    <div class="container">

      <div class="row">

        <nav class="col-md-12 col-lg-2">
            Navigation
        </nav>

        <section class="col-md-6 col-lg-5">
          Section
        </section>
        <section class="col-md-6 col-lg-5">
          Section
        </section>

      </div>

      <footer class="row">
        <div class="col-lg-12">
          Pied de page
        </div>
      </footer>  

    </div>

  </body>
</html>

في الخلاصة


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