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


الدرس: المكونات المتكاملة


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

الإبحار NAVIGATION


صفحة المثال
فيما يلي الكود المضاف إلى صفحة المثال لتزويدها بشريط تنقل:

<!DOCTYPE HTML>
<html>

  <head>
  
    ...

    <style type="text/css">

        ...
            
        .inline-form input {
            display: inline-block;
            width: 100px;
        }
        
    </style>

  </head>

  <body>
    <div class="container">

      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li class="active"> <a href="#">Accueil</a> </li>
            <li> <a href="#">Liens</a> </li>
            <li> <a href="#">Témoignages</a> </li>
            <li> <a href="#">Références</a> </li>
          </ul>
          <form class="navbar-form navbar-right inline-form">
            <div class="form-group">
              <input type="search" class="input-sm form-control" 
                placeholder="Recherche">
              <button type="submit" class="btn btn-primary btn-sm">
                  <span class="glyphicon glyphicon-eye-open">
                  </span> Chercher</button>
            </div>
          </form>
        </div>
      </nav>
      
      ...   contenu   ...
      
    </div>
  </body>
</html> 
الذي يعطينا الشكل التالي.
jQuery web
جرب الكود
شريط التنقل
المبدأ الأساسي
يقدم Bootstrap فئاتا جميلة لإنشاء شريط تنقل. في الأساس ، يتطلب الشريط فقط الفئات navbar و navbar-default :

<nav class="navbar navbar-default">
    Je suis une barre
</nav> 
هذا الكود يعطي الشكل التالي.

jQuery web
شريط بسيط

الفئة navbar بسيطة جدا:

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
} 
ارتفاع ثابت عند 50 بكسل ، بهامش منخفض صغير لتمييز الشريط عن بقية الصفحة ، حد رفيع وموضع نسبي. navbar-default تعين الفئة ألوان الخلفية والحدود:

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
} 
لماذا 2 فئات؟ سنرى لاحقًا أنه من الممكن أن يكون هناك شريط "مقلوب" ، بلون مختلف في الخلفية. لكن شريط فارغ لا يخدم كثيرا ، وعادة ما يتم تعبئته بعناصر. هذا مثال :

<div class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li class="active"> <a href="#">Accueil</a> </li>
    <li> <a href="#">Liens</a> </li>
    <li> <a href="#">Témoignages</a> </li>
    <li class="disabled"> <a href="#">Références</a> </li>
  </ul>
</div> 
الفئات nav و navbar-nav ينبغي أن تُستخدم مع علامة &lt;ul&gt; . تظهر جميع عناصر التنقل مع العلامات &lt;li&gt; . يتم رصد العنصر النشط مع الفصل active . يتم تعريف عنصر غير نشط مع الفصل disabled . فيما يلي نظرة عامة على الشريط في الشكل التالي.
jQuery web
تأثير فئات navbar و navbar الافتراضية
شريط مع خلفية سوداء
إذا كنت تفضل شريطًا ذو خلفية سوداء ، ما عليك سوى استبدال الفئة navbar-default بالفئة navbar-inverse :

<div class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li class="active"> <a href="#">Accueil</a> </li>
    <li> <a href="#">Liens</a> </li>
    <li> <a href="#">Témoignages</a> </li>
    <li> <a href="#">Références</a> </li>
  </ul>
</div> 
ثم يتم الحصول على نتيجة الشكل التالي.
jQuery web
خلفية سوداء مع فئة navbar-inverse
عنوان في الشريط
يمكنك جعل العنوان يظهر بأحرف أكثر وضوحا مع الفئة navbar-brand :

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Mon beau site</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Accueil</a></li>
    <li><a href="#">Liens</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Références</a></li>
    <li><a href="#">Bibliographie</a></li>
  </ul>
</div> 
الذي يعطينا الشكل التالي.
jQuery web
عنوان في الشريط
يجب تضمين العنوان في الفئة navbar-header لعرضه بشكل صحيح على الهواتف المحمولة.
تثبيت شريط؟
في البداية ، نريد شريط تنقل في الجزء العلوي من الموقع ، ولكن عادةً تحت شعار. مثلا…

<p>Un paragraphe</p>
<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Mon beau site</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Accueil</a></li>
    <li><a href="#">Liens</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Références</a></li>
    <li><a href="#">Bibliographie</a></li>
  </ul>
</div>
<p>Un autre paragraphe</p> 
... سوف تعطي الشكل التالي.
jQuery web
يمكنك ضبط الشريط في أعلى صفحة المتصفح مع الفئة navbar-fixed-top :

<p>Un paragraphe</p>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mon beau site</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Accueil</a></li>
      <li><a href="#">Liens</a></li>
      <li><a href="#">Témoignages</a></li>
      <li><a href="#">Références</a></li>
      <li><a href="#">Bibliographie</a></li>
    </ul>
  </div>
</div>
<p>Un autre paragraphe</p>
<p>Encore un autre paragraphe</p> 
الذي يعطينا الشكل التالي.
jQuery web
شريط مرفق في الجزء العلوي من الصفحة
لاحظ أن استخدام فئة navbar-fixed-top يتطلب وجود الفئة container أو الفئة container-fluid .
الشريط اذا يأخذ العرض الكامل للنافذة. تتحرك عناصر الصفحة أسفل الشريط الثابت عند التمرير.
لكن أين ذهبت الفقرتان الأوليان؟
هم تحت العارضة! مجرد إلقاء نظرة على الفئة ستفهم:

  .navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
  } 
  
الشريط ثابت في الجزء العلوي من صفحة المتصفح مع z-index كبيرة ... لذلك إذا اعتمدنا موضع ثابت في الجزء العلوي من صفحة المتصفح ، يجب علينا اتخاذ الاحتياطات اللازمة لتوفير مساحة كافية للعناصر ليست مخبأة من قبل شريط:
الذي يعطينا الشكل التالي.
jQuery web
شريط مع مكان مخصص
الآن نجد فقراتنا مرئية بوضوح!
هناك أيضًا فئة navbar-fixed-bottom لتعيين الشريط في أسفل الصفحة ، لكن حالات الاستخدام نادرة جدا. يبقى المبدأ كما هو
. شريط ثابت
يبقى الشريط الثابت في الأعلى عالقًا على حافة النافذة ، وعندما تقوم بالتمرير باستخدام المصعد ، يمر المحتوى أسفل الشريط بشكل منطقي. قد ترغب في أن يتبع الشريط الحركة ولا يتم لصقه على حافة النافذة ، ولكن فوق المحتويات. في هذه الحالة ، الشريط يختفي عند التمرير. عليك اطا استخدام الفئة navbar-static-top :

    <div class="navbar navbar-default navbar-static-top"> 
    
نموذج بحث في الشريط
لدمج نموذج ، فقط أضف علامة <form> مع الفصل navbar-form . لدينا فئتان لإرسال هذا النموذج على أحد الجانبين:
  • navbar-right لتثبيته على اليمين
  • navbar-left لتثبيته على اليسار
هنا صفحة المثال لدينا:

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active"> <a href="#">Accueil</a> </li>
          <li> <a href="#">Liens</a> </li>
          <li> <a href="#">Témoignages</a> </li>
          <li> <a href="#">Références</a> </li>
        </ul>
        <form class="navbar-form navbar-right inline-form">
          <div class="form-group">
            <input type="search" class="input-sm form-control" 
            placeholder="Recherche">
            <button type="submit" class="btn btn-primary btn-sm"><span 
              class="glyphicon glyphicon-eye-open"></span> Chercher</button>
          </div>
        </form>
      </div>
    </nav> 
    
الذي يعطينا الرقم التالي.
jQuery web
نموذج في الشريط
لقد وجدت النموذج الخاص بي وقع إرساله الى اليمين. قد تسأل أسئلة عن الفئة inline-form . هذه ليست فئة Bootstrap ! لكن فئة اضطررت لإضافتها للحصول على السلوك الصحيح للنموذج. انظر ماذا يحدث إذا قمت بتقليل عرض الشاشة دون هذه الفئة:
jQuery web
رد فعل النموذج على الحد من العرض
لدي مشكلتين:
  • مربع النص يأخذ العرض كله ،
  • يتم إرجاع الزر أدناه.
لا بد لي من تغيير عرض عنصر التحكم والحد من عرضه. و هذا ما تقوم به الفئة inline-form :

      .inline-form input {
        display: inline-block;
        width: 100px;
      } 
      
الآن لدي عرض صحيح يمكن رؤيته في الشكل التالي.
jQuery web
تأثير الفئة inline-form
لماذا لا نستخدم فئة Bootstrap الخاصة بالنموذج؟
لا تعمل هذه الفئة إلا إذا كان عرض الشاشة 768 بكسل على الأقل ، وتحت هذا العدد بالضبط نواجه المشكلة!
الزر والنص في شريط
هناك فئة navbar-btn لتضمين زر في شريط ، ولكن يجب استخدامها فقط إذا كان الزر لا ينتمي إلى نموذج. هناك أيضًا فئة navbar-text لإدراج نص والفئة navbar-link لعرض رابط خارج القائمة (غير مدرجة في فئة التنقل). هذا مثال :

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Un titre</a>
  </div> 
  <p class="navbar-text">Un simple texte</p>
  <button type="button" class="btn btn-default navbar-btn">Bouton

  </button>
  <p class="navbar-text"><a href="#" class="navbar-link">Lien</a></p>
</nav> 
الذي يعطينا الشكل التالي.
jQuery web
نص ، زر ورابط في الشريط
ترقيم الصفحات
مثال بسيط
يقدم Bootstrap الفئة pagination لتحقيق ... ترقيم الصفحات. المبدأ بسيط ، وهنا مثال أساسي:

<div class="container">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div> 
ثم نحصل على النتيجة المرئية في الشكل التالي.
jQuery web
ترقيم الصفحات بسيط
الابعاد
هناك 3 احتمالات للابعاد في ترقيم الصفحات:

<div class="col-lg-3">
  <ul class="pagination pagination-lg">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
  </ul>
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
  </ul>
  <ul class="pagination pagination-sm">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div> 
مما يعطينا الشكل التالي.
jQuery web
عدة أبعاد ترقيم الصفحات
حالة عملية
سنستخدم إمكانية ترقيم الصفحات في مثال عملي من صور النمور التي أستخدمناها في صفحتي التوضيحية. الهدف هو تمرير الصور 3 في 3. لتحديد الصفحة الحالية ، نستخدم الفئة active .

<!DOCTYPE HTML>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { background-color:#DDD; }
      img { width: 100%; }
      a:focus { outline:0; } 
    </style>
  </head>

<body>

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

  <script src="assets/js/jquery.js"></script>
<script> 

var show_per_page = 3; 
var current_page = 0;

function set_display(first, last) {
  $('#content').children().css('display', 'none');
  $('#content').children().slice(first, last).css('display', 'block');
}

function previous(){
    if($('.active').prev('.page_link').length) go_to_page(current_page - 1);
}

function next(){
    if($('.active').next('.page_link').length) go_to_page(current_page + 1);
}

function go_to_page(page_num){
  current_page = page_num;
  start_from = current_page * show_per_page;
  end_on = start_from + show_per_page;
  set_display(start_from, end_on);
  $('.active').removeClass('active');
  $('#id' + page_num).addClass('active');
}  

$(document).ready(function() {

  var number_of_pages = Math.ceil($('#content').children().length / 
        show_per_page);
  
  var nav = '<ul class="pagination"><li><a href="javascript:previous();">
      «</a>';

  var i = -1;
  while(number_of_pages > ++i){
    nav += '<li class="page_link'
    if(!i) nav += ' active';
    nav += '" id="id' + i +'">';
    nav += '<a href="javascript:go_to_page(' + i +')">'+ (i + 1) +'</a>';
  }
  nav += '<li><a href="javascript:next();">»</a></ul>';

  $('#page_navigation').html(nav);
  set_display(0, show_per_page);
  
});

</script>

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

<ul class="pager">
  <li><a href="#">Précédent</a></li>
  <li><a href="#">Suivant</a></li>
</ul> 
الذي يعطينا الرقم التالي.
jQuery web
ترقيم الصفحات الجمالي
تلقائيا ، يتم توسيط الأزرار. لترتيبها على كلا الجانبين ، استخدم الفئة previous و next :

<ul class="pager col-lg-4">
<li class="previous"><a href="#"><span class="glyphicon glyphicon-backward">
    </span> Précédent</a></li>
<li class="next"><a href="#">Suivant <span class="glyphicon glyphicon-forward">
    </span></a></li>
</ul> 
ثم نحصل على النتيجة المرئية في الشكل التالي.
jQuery web
زر تحول مع الصفحات السابقة والقادمة
مساعدة في التنقل
تتبع أداة المساعدة في التنقل نفس مبدأ ترقيم الصفحات ، مع استخدام الفئة breadcrumb في العلامة <ul> واستخدام الفئة active لتحديد العنصر النشط:

<ul class="breadcrumb">
  <li class="active"><a href="#">Accueil</a></li>
  <li><a href="#">Témoignages</a></li>
  <li><a href="#">Chasseurs</a></li>
</ul> 
الذي يعطينا الشكل التالي.
jQuery web
تأثير الفئة breadcrumb

الآثار المطبعية والصور المصغرة


صفحة المثال
بالنسبة للإصدار الجديد من صفحة المثال ، سنقوم بتحسين عرض الصور مع المكون thumbnails والشارات في قائمة النمور ، كما في الشكل التالي.
jQuery web
سنقدم أيضًا صياغة في النموذج ونحسن عرض العنوان (انظر الشكل التالي).
jQuery web
الفئة JUMBOTRON
محتوى JUMBOTRON
Jumbotron يجعل فئة النص مرئيةً جدًا. لنأخذ مثالا:

<h1>Coucou</h1>
<p>et bonjour</p>
<div class="jumbotron">
  <h1>Coucou</h1>
  <p>et bonjour</p>
</div> 
الذي يعطي الشكل التالي.
jQuery web
فئة jumbotron
يمكننا أن نرى بوضوح الفرق بين العناصر "الطبيعية" وأولئك الذين يستفيدون من الفصل jumbotron .
دعنا نرى هذا الفصل:

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
} 
رمادية صغيرة في الخلفية ، وتعديل ارتفاع الخط وبعض الهوامش.
عرض كامل JUMBOTRON
من المحتمل أنك صادفت مواقع تم إنشاؤها باستخدام Bootstrap والتي تحتوي على لوحات تعمل بالعرض الكامل للصفحة. يتم ذلك بسهولة مع الفصل jumbotron، ولكن يجب عليك تنظيم الكود بطريقة مختلفة. لا ينبغي أن توضع في حاوية ، ولكن يجب أن يكون لديك واحد في الداخل. هذا مثال :

<div class="jumbotron">
  <div class="container">
    <h1>Bonjour je suis le Jumbotron</h1>
    <p>J'aime bien prendre mes aises et occuper tout l'espace pour
       que l'on me remarque facilement !</p>
    <p><a class="btn btn-info btn-lg" role="button">En savoir plus  
           <span class="glyphicon glyphicon glyphicon-hand-right">
           </span>
       </a>
    </p>
  </div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
jumbotron العرض الكامل
من السهل مع بعض الأنماط المضافة تخصيص jumbotron :

.jumbotron {
  color: #533; 
  background-color: #9bb 
} 
مع النتيجة في الشكل التالي.
jQuery web
jumbotron مخصص
التسميات الملونة
لإنشاء إشارات مرئية نصية جذابة ، يمكنك إنشاء علامات جميلة:

<p><span class="label label-default">Valeur d'inhibition</span> 600</p>
<p><span class="label label-info">Valeur de signalement</span> 4000</p>
<p><span class="label label-success">Valeur de fonctionnement</span> 8000</p>
<p><span class="label label-primary">Valeur optimale</span> 10000</p>
<p><span class="label label-warning">Valeur dangereuse</span> 11000</p>
<p><span class="label label-danger">Valeur critique</span> 12000</p> 
الذي يعطي الشكل التالي.
jQuery web
التسميات الملونة
تناسب هذه الملصقات البعد:

<h1><span class="label label-success">H1</span></h1>
<h2><span class="label label-success">H2</span></h2>
<h3><span class="label label-success">H3</span></h3>
<h4><span class="label label-success">H4</span></h4>
<h5><span class="label label-success">H5</span></h5>
<h6><span class="label label-success">H6</span></h6> 
هذا يعطي نتيجة مماثلة لتلك التي في الشكل التالي.
jQuery web
عدة أبعاد للعلامات
لقد استخدمت تسمية في نموذج الاتصال في صفحة المثال:

<h4><span class="label label-default">
      Si vous voulez me laisser un message
    </span>
  </h4>
<h4>Comment m'avez-vous trouvé ?</h4> 
وبالتالي يتم الحصول على الشكل التالي.
jQuery web
تسمية في نموذج
الشارات
تشبه الشارات العلامات إلى حد ما ، ولكن للحصول على معلومات أقصر ، من الناحية المثالية الأرقام:

<a href="#">Messages reçus <span class="badge">42</span></a> 
الذي يعطي الشكل التالي.
jQuery web
شارة بسيطة
نظرًا لأن الشارة في علامة ، فمن السهل دمجها على سبيل المثال مع زر ولونها:

<button class="btn btn-danger">Envoi <span class="badge text-success">
  42</span>
</button> 
الذي يعطي الشكل التالي.
jQuery web
تبسيط الشارة
لقد أضفت شارات على صفحة المثال لتمثيل عدد النمور:

<ul>
  <li>Tigre de Sibérie <span class="badge">230
  </span></li>
  <li>Tigre de Chine méridionale <span class="badge">120
  </span></li>
  <li>Tigre de Bali <span class="badge">540</span></li>
  <li>Tigre de d'Indochine <span class="badge">230
  </span></li>
  <li>Tigre de Malaisie <span class="badge">240
  </span></li>
  <li>Tigre de Java <span class="badge">1200
  </span></li>
  <li>Tigre de Sumatra <span class="badge">710
  </span></li>
  <li>Tigre du Bengale <span class="badge">20
  </span></li>
  <li>Tigre de la Caspienne <span class="badge">40
  </span></li>
</ul> 
الذي يعطي الشكل التالي.
jQuery web
شارات في القائمة
الصور المصغرة
إذا كان لديك صور أو مقاطع فيديو أو أي شيء آخر لعرضه في شبكة ، فإن Bootstrap يوفر مكون Thumbnails سهلة التنفيذ للغاية. أعود إلى صفحة مثالي التي تتضمن صورًا صغيرة للنمور. قمت بوضع الصور ببساطة باستخدام الشبكة:

<section class="row">
  <div class="col-xs-4 col-sm-3 col-md-2">
    <img src="images/t1.jpg" alt="Tigre" 
     class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
    <img src="images/t2.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t3.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t4.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
      <img src="images/t5.jpg" alt="Tigre" 
	class="img-rounded">
   </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t6.jpg" alt="Tigre" 
	class="img-rounded">
   </div>

  <div class="col-xs-4 col-sm-3 col-md-2">
    <img src="images/t7.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t8.jpg" alt="Tigre" 
	class="img-rounded">
   </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
    <img src="images/t9.jpg" alt="Tigre" 
	class="img-rounded">
   </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
    <img src="images/t10.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t11.jpg" alt="Tigre" 
	class="img-rounded">
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2">
     <img src="images/t12.jpg" alt="Tigre" 
	class="img-rounded">
   </div>
</section> 
هذا يجعلها منتظمة للغاية ، كما هو مبين في الشكل التالي.
jQuery web
ترتيب الصور مع الشبكة
دعونا نرى ما يحدث مع مكون Thumbnails . المبدأ بسيط ، يجب عليك استخدام الفصل thumbnail، على سبيل المثال في علامة <a> . هذا هو ما يعطي للصفحة المثال بافتراض أن الصور المصغرة تعمل كروابط:

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

<div class="thumbnail">
  <img src="images/photo-tigre.jpg" alt="Tigre" class="img-rounded">
</div> 
الذي يعطي الشكل التالي.
jQuery web
تطبق الصورة المصغرة للفئة على صورة كبيرة
من الواضح أننا لا نقتصر على عرض الصور في صورة مصغرة. نظرًا لأنه يمكنك وضع هذه الفئة في <div> أو آخر ، يمكنك ملء الصورة المصغرة بما تريد. على سبيل المثال ، قمت بتدوين العنوان في صفحة المثال:

<address class="thumbnail">
  <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> 
الذي يعطي الشكل التالي.
jQuery web
فئة المصغرة المطبقة على عنوان

مجموعة القوائم ، اللوحات و الوسائط


صفحة المثال
سنقوم بتحسين مظهر صفحة المثال بعرض تقديمي للفيديو ، كما في الشكل التالي.
jQuery web
باستخدام فئة media
سنوفر أيضًا لوحة لقائمة النمور وأيضًا للجدول (انظر الشكل التالي).
jQuery web
القوائم مجمعة
توفر القوائم المجمعة تنسيق قوائم غير مرتبة. فيما يلي مثال أول مع تصوُّر قائمة دون تنسيق مع للمقارنة:

<div class="container">
  <div class="col-lg-2">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class="col-lg-2">
    <ul class="list-group">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
      <li class="list-group-item">Item 3</li>
      <li class="list-group-item">Item 4</li>
    </ul>
  </div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
قائمة بسيطة وقائمة مجمعة
قائمة مع شارات
من الممكن إضافة شارات ببساطة عن طريق دمج افتراضيا ، يتم عرضه على اليمين:

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">22</span>
    Item 1
  </li>
  <li class="list-group-item">
    <span class="badge">12</span>
    Item 2
  </li>
  <li class="list-group-item">
    <span class="badge">33</span>
    Item 3 
  </li>
  <li class="list-group-item">
    <span class="badge">87</span>
    Item 4
  </li>
</ul> 
الذي يعطي الشكل التالي.
jQuery web
قائمة مع شارات
قوائم مع الروابط
يمكن أن تكون العناصر الموجودة في القائمة أيضًا روابط. يكفي توفير علامات ، يتم رصد العنصر النشط مع الفصل active :

<ul class="list-group">
  <a href="#" class="list-group-item active">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 1
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>

      Item 2
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 3
  </a>
  <a href="#" class="list-group-item">
    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
      Item 4
  </a>
</ul> 
الذي يعطي الشكل التالي.
jQuery web
قائمة مع الروابط
وضعت الرمز > لدعم دلالات الروابط ، يتم دفعهم إلى اليمين مع الفصل pull-right .
قليلا من الالوتن
ظهرت فئات جديدة مع الإصدار 3.1 من Bootstrap والذي يسمح بوجود بعض الألوان في قوائم المجموعة. ستجد مثال توضيحي في الشكل التالي.

<div class="col-lg-3">
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">On a gagné !</li>
    <li class="list-group-item list-group-item-info">Une petite info</li>
    <li class="list-group-item list-group-item-warning">Attention c'est chaud !</li>
    <li class="list-group-item list-group-item-danger">Par là c'est dangereux...</li>
  </ul>
</div> 
وهنا النتيجة المرئية:
jQuery web
قليلا من الألوان في القوائم
محتويات مختلفة
القائمة متعددة الاستخدامات بما يكفي لاحتواء عناصر مختلفة. يمكن أن يكون لدينا رأس مع الفئة list-group-item-heading ، ونص مع الفصل list-group-item-text، و كذلك يمكننا دمج صورة على سبيل المثال كما أفعل هنا:

<ul class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Tigre 1</h4>
    <p class="list-group-item-text pull-right">Mon joli tigre 1</p>
    <img src="images/t1.jpg">
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Tigre 2</h4>
    <p class="list-group-item-text pull-right">Mon joli tigre 2</p>
    <img src="images/t2.jpg">
  </a>
</ul> 
الذي يعطي الشكل التالي.
jQuery web
قائمة مع الصور
استخدام قائمة مجمعة في صفحة المثال
لقد استخدمت قائمة مجمعة في صفحة المثال لنوع فرعي من النمور (مع الشارات ، وكلها مدمجة في لوحة سنتحدث عنها قريبًا):

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Les sous-espèces des tigres :</h3>
  </div>
    <div class="list-group">
      <a href="#" class="list-group-item">
        Tigre de Sibérie
        <span class="badge">120</span>
      </a>
      <a href="#" class="list-group-item">
        Tigre de Chine méridionale
         <span class="badge">540</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre de Bali
         <span class="badge">230</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre de d'Indochine
         <span class="badge">240</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de Malaisie
          <span class="badge">1200</span>
        </a>
       <a href="#" class="list-group-item">
          Tigre de Java
         <span class="badge">710</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de Sumatra
          <span class="badge">20</span>
       </a>
       <a href="#" class="list-group-item">
         Tigre du Bengale
         <span class="badge">40</span>
       </a>
       <a href="#" class="list-group-item">
          Tigre de la Caspienne
          <span class="badge">200</span>
       </a>
    </div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
قائمة مع شارات من صفحة المثال
الألواح
تتيح لك اللوحات عزل جزء من الصفحة بشكل مرئي بحدود جمالية ، وعنوان ، ومحتوى ، تذييل لوحة. هنا مثال أساسي:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
  <div class="panel-footer">Pied de panneau</div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
علامة بسيطة
هناك أيضًا فئات لإنشاء إحساس مرئي لهذه اللوحات:

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Titre</h3>
  </div>
  <div class="panel-body">Contenu</div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
لوحات منمقة
استخدم مع قائمة مجمعة
لقد قمت بتضمين قائمة مجمعة في لوحة في صفحة المثال:

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">Les sous-espèces des tigres :</h3>
  </div>
  <div class="list-group">
    <a href="#" class="list-group-item">
      ...
    </a>
    <a href="#" class="list-group-item">
      ...
    </a>

       ...

  </div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
قائمة مجمعة في لوحة
استخدام مع الجدول
قمت بدمج جدول (بدون حدود) في لوحة على مستوى صفحة المثال:

<div class="panel panel-primary">
  <table class="table table-striped table-condensed">
    <div class="panel-heading"> 
      <h3 class="panel-title">Les menaces pour les tigres</h3>
    </div>
    <thead>
      <tr>
        <th>Lieu</th>
        <th>Menace</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Grand Mekong</td>
        <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des 
habitats du fait du développement non durable d’infrastructures</td>
      </tr>
      <tr>
        <td>Île de Sumatra</td>
        <td>Production d’huile de palme et de pâtes à papiers</td>
      </tr>
      <tr>
        <td>Indonésie et Malaisie</td>
        <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
      </tr>
      <tr>
        <td>États-Unis</td>
        <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
      </tr>
      <tr>
        <td>Europe</td>
        <td>Gros appétit pour l’huile de palme</td>
      </tr>
      <tr>
        <td>Népal</td>
        <td>Commerce illégal de produits dérivés de tigres</td>
      </tr>
    </tbody>
  </table>
</div> 
الذي يعطي الشكل التالي.
jQuery web
الجدول في لوحة

الوسائط


الإدراج بسيط
يسمح كائن الوسائط بإدراج وسائط (صوت ، صورة ، فيديو ...) على يسار أو يمين النص. هذا ما خططت في صفحة المثال مع فيديو النمر:

<div class="media col-lg-12">
  <div class="media-left">
    <iframe width="420" height="320" src="http://www.youtube.com/embed/VmnIeLmjuHA" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Un tigre domestique dans son canapé</h4>
    Admirez ce noble animal...
  </div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
باستخدام فئة وسائل الإعلام
تشمل الفئة Media الكل. ثم يتم استخدامها كخيار media-right أو media-left للوسئط. يتم تعريف الجسم المكون بواسطة الفصل media-body ويمكنك وضع عنوان به media-heading .
قائمة الوسائط
إمكانية أخرى مثيرة للاهتمام للغاية هي إنشاء قائمة وسائط مع الفئة media-list . خذ على سبيل المثال حالة المنتدى ، يمكننا أن نتخيل هذا النوع من السيناريو:

<div class="container">
  <ul class="media-list col-lg-7">
    <li class="media thumbnail">
      <a class="pull-left" href="#">
        <img class="media-object" src="images/ico01.png">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Suggestion</h4>
        <p>Je pense souhaitable d'interdire la chasse au tigre pour préserver 
          l'espèce !</p>
        <div class="media thumbnail">
          <a class="pull-left" href="#">
            <img class="media-object" src="images/ico02.png">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Animaux dangereux</h4>
            <p>Tu délires complètement, ce sont des animaux trop dangereux 
              pour les laisser vivre.</p>
            <div class="media thumbnail">
              <a class="pull-left" href="#">
                <img class="media-object" src="images/ico01.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Quel délire !</h4>
                <p>C'est toi qui délires Il faut préserver la bio-diversité. 
                Les tigres ne sont pas vraiment dangereux, c'est l'homme qui 
                  l'est !</p>
              </div>
            </div>
          </div>
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="images/ico02.png">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Quel courage !</h4>
              <p>J'aimerais te voir face à un tigre toi !</p>
            </div>
          </div>
        </div>
        <div class="media thumbnail">
          <a class="pull-left" href="#">
            <img class="media-object" src="images/ico03.png">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Un peu de calme</h4>
            <p>Je suis favorable à la préservation de l'espèce mais dans des 
              sites protégés.</p>
            <div class="media thumbnail">
              <a class="pull-left" href="#">
                <img class="media-object" src="images/ico04.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Tu as vu ta tête !</h4>
                <p>Avec la tête que tu as tu ferais même peur à un tigre toi 

                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div> 
الذي يعطي الشكل التالي.
jQuery web
قائمة الوسائط
لاحظ استخدام الفصل thumbnail لعزل التعليقات وجعل كل شيء قابل للقراءة.
تكامل الوسائط
الإصدار 3.2 كان وسيلة مريحة للغاية لدمج الوسائط مع ضبط الحجم التلقائي. فيما يلي مثال مع نسبة 16 في 9:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" 
     src="http://www.youtube.com/embed/VmnIeLmjuHA">
  </iframe>
</div> 

التنبيهات وأشرطة التقدم


سنرى الآن مكونين ، على الرغم من أنه لا يتطلب جافا سكريبت للعرض التقديمي ، إلا أنهما بحاجة إلى تنفيذها.
التنبيهات
الاستخدام الأساسي
توفر التنبيهات رسالة ذات معنى بصريًا. مجرد استخدام التنبيهات alert و alert-warning :

<div class="alert alert-warning col-lg-3">
    <strong>Attention!</strong> Vous allez trop loin !
</div> 
الذي يعطي الشكل التالي.
jQuery web
تنبيه بسيط
أنواع التنبيهات الثلاثة
ثلاث فئات أخرى تسمح بتغيير مظهر التنبيه وفقًا للنتيجة المطلوبة:

<div class="alert col-lg-2 alert-info">
    <strong>Infos !</strong>
</div>
<div class="alert col-lg-offset-1 col-lg-2 alert-success">
    <strong>Bravo !</strong>
</div>
<div class="alert col-lg-offset-1 col-lg-2 alert-danger">
    <strong>Danger !</strong>
</div> 
الذي يعطي الشكل التالي.
jQuery web
تنبيهات ملونة
كتلة من المعلومات
إذا كان النص يجب أن يكون متسقًا، فما عليك سوى كتابة الكود الذي تريده:

<div class="alert span5 alert-danger">
    <h3>Information importante!</h3>
    L'utilisation de la classe <strong>alert</strong> 
    n'est pas sans danger pour les yeux fatigués des pauvres internautes, 
et je vous demande instamment de l'utiliser avec parcimonie...
</div> 
الذي يعطي الشكل التالي.
jQuery web
تنبيه أطول
رابط داخل تنبيه
تسمح لك الفئة alert-link بإدراج رابط جمالي في التنبيه:

<div class="alert alert-info col-lg-3">
    Un <a href="#" class="alert-link">joli lien</a> dans une alerte...
</div> 
الذي يعطي الشكل التالي.
jQuery web
رابط في تنبيه
زر إغلاق
بمجرد قراءة التنبيه ، قد ترغب في إغلاقه. فقط أضف زرًا وأضف الفصل alert-dismissable :

<div class="alert alert-warning alert-dismissable col-lg-4">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Attention!</strong> Vous allez vraiment trop loin !
</div> 
الذي يعطي الشكل التالي.
jQuery web
زر لإغلاق التنبيه
لكي يعمل زر الإغلاق ، يجب عليك تحميل مكتبة Bootstrap javascript التي سنراها في الفصل التالي.
استخدام ديناميكي
ولكن من الواضح أن هذه التنبيهات لا تجد إلا معانيها في سياق ديناميكي ويجب أن نكون قادرين على جعلها تظهر وتختفي عند الحاجة. يوفر Bootstrap مكونًا إضافيًا صغيرًا لا يبدو مفيدًا حقًا ، نظرًا لأنه يمكننا بسهولة إدارة التنبيهات باستخدام javascript المعززة من jQuery :

<div class="container">
  <div class="alert alert-warning col-lg-4" style="display: none">
    <button type="button" class="close">×</button>
      <h4>Attention!</h4> Petite information importante !
  </div>
  <div class="col-lg-3">
    <input type="button" class="btn btn-primary" id="afficher" 
    value="Afficher l'alerte">
  </div>
</div>
<script src="assets/js/jquery.js"></script> 
<script>  
  $(function (){
    $("#afficher").click(function() {
      $("#afficher").hide();
      $(".alert").show("slow");
    }); 
    $(".close").click(function() {
      $(".alert").hide("slow");
      $("#afficher").show();
    }); 
  }); 
</script> 
الذي يعطي الشكل التالي.
jQuery web
زر التنبيه
jQuery web
تنبيه مُثار
وقد تم توفير زر Close لإغلاق التنبيه. يمكننا أيضا وضع زر طبيعي.
أشرطة التقدم
أشرطة التقدم هي طريقة رائعة لإبقاء المستخدم ينتظر لفترة طويلة. كما أنها تهدف إلى طمأنته وإخباره تقريبًا كم من الوقت يجب عليه الانتظار. الفئات progress و progress-bar تجعل من السهل تحقيق هذا النوع من التأثير. على سبيل المثال ، أتوقع كود جافا سكريبت قليلاً لمحاكاة عملية زمنية. هنا هو الشريط الأساسي:

<div class="container">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    if(n < 100) {
      setTimeout(function() {
        timer(n + 10);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script> 
الذي يعطي الشكل التالي.
jQuery web
شريط التقدم بسيط
يتم تمييز الكود المقابل للشريط ، والباقي هو مجرد إدارة لتحريكه على سبيل المثال. نحن فقط نقوم بتغيير خاصية width للشريط.
هناك نسخة مخططة من الشريط مع الفئة progress-striped :

<div class="progress progress-striped">
  <div class="progress-bar"></div>
</div> 
الذي يعطي الشكل التالي.
jQuery web
شريط التقدم مخطط
هناك أيضًا نسخة مخططة ومتحركة بأناقة مع الفئة active :

<div class="container">
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <div id="pourcentage" class="pull-right"></div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    $("#pourcentage").text(n + "%");
    if(n < 100) {
      setTimeout(function() {
        timer(n + 10);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script> 
مما يعطي الشكل التالي ، حتى لو لم تشاهد في الصورة الرسوم المتحركة ...
jQuery web
شريط التقدم والرسوم المتحركة مخطط
للتغيير قليلا ، خططت لعرض النسبة المئوية. لاحظ استخدام الفئة pull-right لإرسال هذا العرض إلى اليمين. تم التخطيط أيضًا بألوان مختلفة لإثراء دلالات هذه الأشرطة ، سواء في إصدار عادي أو مخطط:

<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-info"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-success"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger"></div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info"></div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-success"></div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning"></div>
  </div>
  <div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger"></div>
  </div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div> 
الذي يعطي الشكل التالي.
jQuery web
اشرطة تقدّم ملونة
الاحتمال الأخير ، أخيرًا ، هو تكديس الأشرطة:

<div class="container">
  <div class="progress">
    <div class="progress-bar progress-bar-success"></div>
    <div class="progress-bar progress-bar-warning"></div>
    <div class="progress-bar progress-bar-danger"></div>
  </div>
  <input type="button" class="btn btn-primary" id="animer" value="Animer">
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  function timer(n) {
    $(".progress-bar").css("width", n + "%");
    if(n < 33.2) {
      setTimeout(function() {
        timer(n + 3.33);
      }, 200);
    }
  }
  $(function (){
    $("#animer").click(function() {
      timer(0);
    });
  });
</script> 
الذي يعطي الشكل التالي.
jQuery web
قضبان مكدسة
في هذه النسخة المكدسة ، نحافظ على إمكانية وجود خطوط ، متحركة أو لا ...

في الخلاصة


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