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


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


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

القوائم والأوصاف والجداول


فيما يلي الإلقاء الثاني لصفحة اختبار الويب:

<!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>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <ul>
            <li>Tigre de Sibérie</li>
            <li>Tigre de Chine méridionale</li>
            <li>Tigre de Bali</li>
            <li>Tigre de d'Indochine</li>
            <li>Tigre de Malaisie</li>
            <li>Tigre de Java</li>
            <li>Tigre de Sumatra</li>
            <li>Tigre du Bengale</li>
            <li>Tigre de la Caspienne</li>
          </ul>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8 table-responsive">
          <table class="table table-bordered table-striped table-condensed">
            <caption>
            <h4>Les menaces pour les tigres</h4>
            </caption>
            <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>
        </section>
        <section 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>
        </section>
      </div>
    </div>
  </body>
</html> 
الذي يعطي الشكل التالي.
jQuery web
صفحة المثال
جرب الكود
تم إثراء العرض التقديمي بواسطة صف وعناصر جديدة. هنا هو تصور للقطع.
jQuery web
المثال صفحة فك تشفير
القوائم
النمط الأساسي
يقدم Bootstrap قوائم تنسيق أنيقة. لدي واحدة على الصفحة:

<h5>Voici les sous-espèces des tigres :</h5>
<br>
<ul>
   <li>Tigre de Sibérie</li>
   <li>Tigre de Chine méridionale</li>
   <li>Tigre de Bali</li>
   <li>Tigre de d'Indochine</li>
   <li>Tigre de Malaisie</li>
   <li>Tigre de Java</li>
   <li>Tigre de Sumatra</li>
   <li>Tigre du Bengale</li>
   <li>Tigre de la Caspienne</li>
</ul> 
مما يعطي النتيجة واضحة في الشكل التالي.
jQuery web
قائمة
بدون نمط
هناك فئة list-unstyled، للتطبيق على العلامة <ul>، والتي تعطي لذلك <ul class="list-unstyled"> ، والذي يزيل الرقائق. هذه هي النتيجة في القائمة على الصفحة:
jQuery web
قائمة بدون نمط
على الخط
يمكن أن يحدث أن تريد قائمة ... على نفس الخط. حسنًا ، لم أعد أسميها قائمة ، لكن لم لا؟ يمكن للمرء أن يتخيل استخداما لقائمة. بمجرد استخدام الفئة list-inline، هكذا <ul class="list-inline"> . هذا ما يبدو عليه في الصفحة:
jQuery web
قائمة على نفس السطر
الوصف DESCRIPTIONS
كلاسيكي
يتم التعامل مع الأوصاف كذلك بواسطة Bootstrap . هذا مثال :

<dl>
  <dt>Tigre</dt>
  <dd>Animal d'Asie, grand et puissant, au pelage jaune rayé de noir, 
      de la famille des félins</dd>
  <dt>Panthère</dt>
  <dd>Félidé d'Afrique et d'Asie au pelage jaune tâcheté de noir</dd>
  <dt>Guépard</dt>
  <dd>Félin carnassier rapide d'Asie et d'Afrique au pelage tâcheté 
      de noir</dd>
  <dt>Chat</dt>
  <dd>Petit félin, au pelage soyeux, en général domestique</dd>
</dl> 
والتأثير البصري في الشكل التالي.
jQuery web
وصف عمودي
أفقي
للحصول على عرض تقديمي أفقي ، ما عليك سوى استخدام الفصل dl-horizontal الذي يقدم <dl class="dl-horizontal"> . يوضح الشكل التالي التأثير على نفس القائمة.
jQuery web
وصف أفقي
الجداول
يتم توفير تخطيطات متعددة للجداول ، لقد اخترت واحدة للجدول على الصفحة:

<table class="table table-bordered table-striped table-condensed">
   <caption>
      <h4>Les menaces pour les tigres</h4>
   </caption>
   <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> 
الذي يعطينا النتيجة واضحة في الشكل التالي.
jQuery web
لوحة منمقة
سنقوم بتحليل الفئات المستخدمة ...
الفئة « TABLE »
هذه هي الفئة الأساسية للصفائف وتعيين بعض الأنماط وإنشاء خطوط فاصلة أفقية:

<table class="table"> 
الذي يعطي الشكل التالي.
jQuery web
تأثير فئة الجدول

الفئة « TABLE-BORDERED »
هذه هي الفئة التي لها حدود:

<table class="table table-bordered"> 
الذي يعطي الشكل التالي.
jQuery web
تأثير فئة حدود الجدول

الفئة « TABLE-STRIPED »
تضيف هذه الفئة خلفية بلون رمادي فاتح جدًا للخطوط الفردية (1 ، 3 ، ... ) :

<table class="table table-bordered table-striped"> 
jQuery web
تأثير الطبقة شريطية الجدول

الفئة « TABLE-CONDENSED »

هذه الفئة تكثف الجدول بحيث تشغل مساحة أقل عموديا:

<table class="table table-bordered table-striped table-condensed"> 
الذي يعطي الشكل التالي
jQuery web
تأثير الطبقة الجدول المكثف

لقد لاحظت أنه يمكننا تجميع تطبيق الطبقات دون أي مشكلة ، كما فعلت في هذا العرض التقدمي.
الجدول قابل للتكيف مع الفئة « TABLE-RESPONSIVE »
ماذا يحدث للجدول عندما نقوم بتقليل عرض الشاشة؟ يتم تقليل أعمدة الجدول وفقًا لذلك ليس المظهر الجمالي أو المقروء للغاية في الشكل التالي.
jQuery web
التأثير بدون الطبقة المستجيبة للجدول

عن طريق إحاطة الجدول بالفئة table-responsive، يظهر شريط التمرير عندما ينخفض عرض الشاشة إلى ما دون 768 بكسل (انظر الشكل التالي).

<section class="col-sm-8 table-responsive">
  <table class="table table-bordered table-striped table-condensed"> 
jQuery web
شريط التمرير مع فئة استجابة الجدول

قليلا من الألوان في الجداول
لديك إمكانية تلوين أسفل صفوف الجداول بالفئات info, success, danger, warning و active . فيما يلي جدول مثالنا ، ولكن بلونٍ بسيط:

<table class="table table-bordered table-striped table-condensed">
  <caption>
  <h4>Les menaces pour les tigres</h4>
  </caption>
  <thead>
    <tr>
      <th>Lieu</th>
      <th>Menace</th>
    </tr>
  </thead>
    <tbody>
      <tr class="success">
        <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 class="danger">
        <td>Île de Sumatra</td>
        <td>Production d’huile de palme et de pâtes à papiers</td>
      </tr>
      <tr class="warning">
        <td>Indonésie et Malaisie</td>
        <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
      </tr>
      <tr class="active">
        <td>États-Unis</td>
        <td>Les tigres captifs représentent un danger pour les tigres 
            sauvages</td>
      </tr>
      <tr class="success">
        <td>Europe</td>
        <td>Gros appétit pour l’huile de palme</td>
      </tr>
      <tr class="danger">
        <td>Népal</td>
        <td>Commerce illégal de produits dérivés de tigres</td>
      </tr>
    </tbody>
</table> 
الذي يعطي الشكل التالي.
jQuery web
اللون في اللوحات

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

أشكال


النموذج الأساسي
إذا لم نستخدم أي فئة معينة في علامة <form>، فسوف نحصل على تخطيط على نفس الخط. خذ مثال على شكل بسيط:

<form>
  <legend>Légende</legend>
    Text : <input type="text">
    Textarea : <textarea id="textarea"></textarea>
    Select :
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    <button>Envoyer</button>
</form> 
سيكون لدينا بعد ذلك عرض مشابه لما في الشكل التالي.
jQuery web
نموذج بدون نمط

بشكل تلقائي ، محاذاة عناصر التحكم أفقياً. اذا كنت أود أن تشغل عناصر التحكم كل العرض المتاح. يجب استخدام الفصل form-control للحصول على هذا التأثير (انظر الشكل التالي).

<form class="col-lg-6">
  <legend>Légende</legend>
    Text : <input type="text" class="form-control">
    Textarea : <textarea id="textarea" class="form-control"></textarea>
    Select :
      <select class="form-control">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    <button>Envoyer</button>
</form> 
jQuery web
نحن ندرك أن هذه الفئة لا توسع الضوابط فحسب ، بل تنتقل أيضًا إلى التصميم الجمالي. رتب هذا النموذج مرة أخرى باستخدام العلامات <label> وحرك الزر قليلاً:

<form class="col-lg-6">
  <legend>Légende</legend>
    <label for="text">Text : </label>
    <input id="text" type="text" class="form-control">
    <label for="textarea">Textarea : </label>
    <textarea id="textarea" type="textarea" class="form-control"></textarea>
    <label for="select">Select : </label>
    <select id="select" class="form-control">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <br>
    <button>Envoyer</button>
</form> 
والنتيجة هي في الشكل التالي.
jQuery web
إضافة علامات <label>
فزنا في الجماليات. يمكننا تحسين التباعد باستخدام الفصل form-group :

<form class="col-lg-6">
  <legend>Légende</legend>
    <div class="form-group">
      <label for="texte">Text : </label>
      <input id="text" type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="textarea">Textarea : </label>
      <textarea id="textarea" type="textarea" class="form-control"></textarea>
    </div>
    <div class="form-group">
      <label for="select">Select : </label>
      <select id="select" class="form-control">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <button>Envoyer</button>
</form> 
ثم نحصل على النتيجة المرئية في الشكل التالي.
jQuery web
تأثير فئة المجموعة النموذجية
تم تهوية النموذج جيدًا وكنت قادرًا على إزالة العلامة <br> التي تم استخدامها لتخزين الزر.
صفحة المثال
هنا هو الإصدار الثالث من صفحة النمر لدينا:

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { background-color:#DDD; }
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
    </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>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <ul>
            <li>Tigre de Sibérie</li>
            <li>Tigre de Chine méridionale</li>
            <li>Tigre de Bali</li>
            <li>Tigre de d'Indochine</li>
            <li>Tigre de Malaisie</li>
            <li>Tigre de Java</li>
            <li>Tigre de Sumatra</li>
            <li>Tigre du Bengale</li>
            <li>Tigre de la Caspienne</li>
          </ul>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-12">
          <table class="table table-bordered table-striped table-condensed">
            <caption>
            <h4>Les menaces pour les tigres</h4>
            </caption>
            <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>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8">
          <form class="well">
            <legend>Si vous voulez me laisser un message</legend>
            <h4>Comment m'avez-vous trouvé ?</h4>
            <fieldset>
              <div class="radio">
                <label for="ami" class="radio">
                  <input type="radio" name="origine" value="ami" id="ami">
                  Par un ami 
                </label>
              </div>
              <div class="radio">
                <label for="web" class="radio">
                  <input type="radio" name="origine" value="web" id="web">
                  Sur le web 
                </label>
              </div>
              <div class="radio">
                <label for="hasard" class="radio">
                  <input type="radio" name="origine" value="hasard" id="hasard">
                  Par hasard 
                </label>
              </div>
              <div class="radio">
                <label for="autre" class="radio">
                  <input type="radio" name="origine" value="autre" id="autre">
                  Autre... 
                </label>
              </div>
              <label for="textarea">Votre message :</label>
                <textarea id="textarea" class="form-control" rows="4"></textarea>
                <p class="help-block">Vous pouvez agrandir la fenêtre</p>
              <button class="btn btn-primary" type="submit">Envoyer</button>
            </fieldset>
          </form>
        </section>
        <section 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>
        </section>
      </div>
    </div>
  </body>
</html> 
بالنسبة لهذا الإصدار الثالث ، أضفت القليل من الأناقة والشكل ، وهو ما يعطي الأشكال التالية.
jQuery web
صفحة المثال ، الجزء الأول
jQuery web
صفحة المثال ، الجزء الثاني
جرب الكود
على مستوى النمط ، مجرد لمسة:

body { background-color:#DDD; }
[class*="col"] { margin-bottom: 20px; }
img { width: 100%; }
.well {
  background-color:#CCC;
  padding: 20px;
} 
لون الخلفية رمادي فاتح يُظهر قيمة النص والصور. بالنسبة للنموذج (المعني بالكلاس well) ، هذا هو الغرض من هذا الكلاس ...
فئات "الراديو" و "مربع الاختيار"
يوفر Bootstrap استخدام فئة خاصة لخانات الاختيار وحقول الخيارات (الراديو). استخدمناها في شكل صفحة:

<form class="well">
  <legend>Si vous voulez me laisser un message</legend>
  <h4>Comment m'avez-vous trouvé ?</h4>
  <fieldset>
    <div class="radio">
      <label for="ami" class="radio">
        <input type="radio" name="origine" value="ami" id="ami">
        Par un ami 
      </label>
    </div>
    <div class="radio">
      <label for="web" class="radio">
        <input type="radio" name="origine" value="web" id="web">
        Sur le web 
      </label>
    </div>
    <div class="radio">
      <label for="hasard" class="radio">
        <input type="radio" name="origine" value="hasard" id="hasard">
        Par hasard 
      </label>
    </div>
    <div class="radio">
      <label for="autre" class="radio">
        <input type="radio" name="origine" value="autre" id="autre">
        Autre... 
      </label>
    </div>
    <label for="textarea">Votre message :</label>
      <textarea id="textarea" class="form-control" rows="4"></textarea>
      <p class="help-block">Vous pouvez agrandir la fenêtre</p>
    <button class="btn btn-primary" type="submit">Envoyer</button>
  </fieldset>
</form> 
لفئة WELL , قليلا من النمط , زرًا رائعًا ونصا مساعدة.
هذا هو الفصل الذي يعجبني ، فهو يسبب أسلوبًا جميلًا. أحضرت هذا الملحق الصغير على شكل الصفحة:

<form class="well"> 
يمكنك ضبط البعد عن طريق إضافة الفصل well-lg لتكبيره أو well-sm لتصغيره. لقد قمت أيضًا بالتبديل عن طريق إضافة قواعد النمط إلى الصفحة:

<style type="text/css">
      body { background-color:#DDD; }
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
    </style> 
كانت اللمسة الأخيرة هي تحسين مظهر الزر بفئتين سنراهما لاحقًا في هذه الدورة:

<button class="btn btn-primary" type="submit">Envoyer</button> 
كل ما عليك فعله هو جعل نص التعليمات أسفل مربع النص أكثر تحفظًا ، وهو ما نفعله مع الفصل help-block :

<p class="help-block">Vous pouvez agrandir la fenêtre</p> 
jQuery web
تأثير فئة كتلة المساعدة
شكل أفقي
لإنشاء نموذج أفقي ، سنستخدم كل ما رأيناه للتو باستخدام الفئة form-horizontal وشبكة لوضع التسميات وعناصر التحكم:

<form class="form-horizontal col-lg-6">
  <div class="form-group">
    <legend>Légende</legend>
  </div>
  <div class="row">
    <div class="form-group">
      <label for="text" class="col-lg-2 control-label">Text : </label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="text">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <label for="textarea" class="col-lg-2 control-label">Textarea : 
      </label>
      <div class="col-lg-10">
        <input type="textarea" class="form-control" id="textarea">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
    <label for="select" class="col-lg-2 control-label">Select: </label>
      <div class="col-lg-10">
        <select id="select" class="form-control" >
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form-group">
    <button class="pull-right btn btn-default">Envoyer</button>
  </div>
</form> 
الذي يعطينا الرقم التالي.
jQuery web
شكل أفقي

تحتوي التسميات على عمودين وحقول الإدخال 10 أعمدة. يمكننا أن نرى استخدام الفئة pull-right لإرسال الزر إلى اليمين. تتم المحاذاة الصحيحة للعلامات بواسطة الفئة control-label . هنا هو تصور للتقطيع.
jQuery web
فك تشفير النموذج الأفقي
نموذج على نفس السطر
نحتاج في بعض الأحيان إلى الحصول على نموذج مرتب على خط ، على سبيل المثال في شريط التنقل. لنقم بالاختبار بنموذج أساسي:

<form>
  <input type="text">
  <input type="checkbox"> Se rappeler de moi 
  <button>Envoyer</button>
</form> 
في الحالة ، نحصل على النتيجة المرئية في الشكل التالي.
jQuery web
نموذج بدون نمط

حسنًا ، ليست جميلة جدًا ، لذا رتبها مع كل ما رأيناه بالفعل وحدد الفصل form-inline :

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="text">Texte</label>
    <input type="text" class="form-control" id="text" 
    placeholder="un texte ici">
  </div>
  <div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Se rappeler de moi...
    </label>
  </div>
  <button type="submit" class="btn btn-default">Envoyer</button>
</form> 
ثم نحصل على الشكل التالي.
jQuery web
إنه افضل بكثير ! لاحظ استخدام تسمية غير مرئية لمربع النص. من المستحسن أن يكون لديك دائمًا تسمية لكل عنصر تحكم لقارئات الشاشة (إمكانية الوصول) ، حيث تجعل الفئة sr-only هذه التسمية غير مرئية.

فئات INPUT-GROUP , INPUT-GROUP-ADDON و INPUT-GROUP-BTN في العمل
إرفاق المعلومات إلى عنصر تحكم
الطبقات input-group و input-group-addon تعمل على إلحاق المعلومات إلى عنصر تحكم النموذج:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group"> 
      <span class="input-group-addon">€</span>
      <input type="text" class="form-control" value="100">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" 
	style="text-align:right" value="100,50">
      <span class="input-group-addon">€</span> 
    </div>
  </div>
</form> 
الذي يعطينا الرقم التالي.
jQuery web
معلومات متجاورة لعنصر تحكم

يمكن استخدامها أيضًا معًا للانضمام إلى الأمام والخلف:

<form class="form-inline">
  <div class="input-group"> 
    <span class="input-group-addon">€</span>
    <input type="text" class="form-control" 
	style="text-align:right" value="100">
    <span class="input-group-addon">.00</span> 
  </div>
</form> 
الذي يعطينا الرقم التالي.
jQuery web
قطعتين من المعلومات متجاورة لعنصر تحكم
نضيف زر إلى عنصر تحكم
يمكننا أيضًا إرفاق زر مع الفئة input-group-btn :

<form class="form-inline">
  <div class="input-group col-lg-3"> 
    <input type="text" class="form-control" 
	style="text-align:right" value="10 000">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Valider</button>
    </span>
  </div>
</form> 
الذي يعطينا الرقم التالي.
jQuery web
زر تعلق على عنصر تحكم

ولا شيء يمنع إضافة العديد ، كما في الشكل التالي.

<form class="form-inline">
  <div class="input-group col-lg-4">   
    <input type="text" class="form-control" 
	style="text-align:right" value="10 000">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Valider
      </button>
      <button class="btn btn-default" type="button">Annuler
      </button>
    </span>
  </div>
</form> 
jQuery web
عدة أزرار تعلق على عنصر تحكم

قم بإرفاق مربع الاختيار أو زر الاختيار لعنصر تحكم

<div class="input-group">   
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</div> 
الذي يعطينا الشكل التالي.
jQuery web
زر الاختيار وخانة الاختيار بجانب عنصر التحكم

البعد من الضوابط
لضبط نموذج ، يكون من المفيد في بعض الأحيان اللعب على حجم عناصر التحكم. يقدم Bootstrap الفئات input- lg ويقوم input-sm بذلك بطريقة أو بأخرى:

<div class="col-lg-3">
  <input type="text" class="form-control input-sm" value="Petit">
  <input type="text" class="form-control" value="Normal">
  <input type="text" class="form-control input-lg" value="Grand">
</div> 
الذي يعطينا الرقم التالي.
jQuery web
ضوابط مختلفة الأحجام
لاحظ أننا نلعب هنا فقط على ارتفاع عنصر التحكم ، ويتم تحديد العرض بواسطة الشبكة.

نمط وفقا للحالة
يقوم Bootstrap بتضمين فئات الأسلوب في حقول الإدخال وفقًا للحالة. هذا مثال :

<form class="col-lg-5">
  <fieldset>
    <legend>Validation, erreur et succès</legend>
    <div class="form-group has-error">
      <label class="control-label" for="idError">Erreur</label>
      <input type="text" class="form-control" id="idError">
      <span class="help-block">Corrigez l'erreur s'il vous plait</span>
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="idWarning">Avertissement</label>
      <input type="text" class="form-control" id="idWarning">
      <span class="help-block">Il y a un problème dans la saisie</span>
    </div>
    <div class="form-group has-success">
      <label class="control-label" for="idSuccess">Réussite</label>
      <input type="text" class="form-control" id="idSuccess">
      <span class="help-block">Saisie correcte</span>
    </div>
  </fieldset>
</form> 
الذي يعطينا الشكل التالي.
jQuery web
لقد توقع الإصدار 3.1 من Bootstrap إمكانية إضافة أيقونة لتحسين التأثير المرئي. سنرى كيف يسمح لك Bootstrap باستخدام الرموز في الفصل التالي. أضع المثال السابق مكتملاً دون التعليق على إضافة الكود ، يمكنك العودة لاحقًا عندما تكون قد تقدمت في هذه الدورة التدريبية:

<form class="col-lg-5">
  <fieldset>
    <legend>Validation, erreur et succès</legend>
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="idError">Erreur</label>
      <input type="text" class="form-control" id="idError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span class="help-block">Corrigez l'erreur s'il vous plait</span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="idWarning">Avertissement</label>
      <input type="text" class="form-control" id="idWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback">

      </span>
      <span class="help-block">Il y a un problème dans la saisie</span>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="idSuccess">Réussite</label>
      <input type="text" class="form-control" id="idSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span class="help-block">Saisie correcte</span>
    </div>
  </fieldset>
</form> 
لاحظ إضافة فئات has-feedback وأن form-control-feedback الكود مدمج جيدًا في عنصر التحكم. الذي يعطينا التالي.
jQuery web
تعمل الايقونات في عناصر التحكم فقط لعلامات الإدخال التي تحتوي على فئة التحكم بالنموذج.
في هذه الأمثلة ، هناك القليل من الإجراءات الممكنة ، لأنني في الوقت الحالي لم أخطط للتفاعل. مثال صغير: نريد أن نجعل نموذجًا مثل النموذج في الشكل التالي.
jQuery web
ونريد اختبار الإدخال للتحقق من أن النص بطول 4 أحرف على الأقل. إذا لم يكن الأمر كذلك ، فنحن نغير نمط مربع النص ونعرض رسالة تحذير ، كما في الشكل التالي.
jQuery web
رسالة للعرض
طالما أننا نفعل ذلك ، نريد أيضًا أن تختفي رسالة التحذير بعد 4 ثوانٍ وأن كل شيء يتم بسلاسة. من خلال الجمع بين Bootstrap و jQuery ، أصبح ذلك نسيمًا:

<div class="col-lg-4">
  <form class="form-inline well">
    <div class="form-group">
      <label class="sr-only" for="text">Saisie</label>
      <input id="text" type="text" class="form-control" placeholder="Texte ici">
    </div>
    <button type="submit" class="btn btn-primary pull-right">Envoyer</button>
    <div class="alert alert-block alert-danger" style="display:none">
      <h4>Erreur !</h4>
      Vous devez entrer au moins 4 caractères ! 
    </div>
  </form>
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  $(function(){
    $("form").on("submit", function() {
      if($("input").val().length < 4) {
        $("div.form-group").addClass("has-error");
        $("div.alert").show("slow").delay(4000).hide("slow");
        return false;
      }
    });
  });
</script> 
جرب الكود
لن أعلق على كود jQuery المضاف لأنه ليس موضوع هذه الدورة ، لكنني أنصح حقًا بمعرفة إطار جافا سكريبت القوي والأنيق للاستفادة الكاملة من جميع إمكانيات Bootstrap .
مولد النموذج
يقدم موقع bootsnipp مولد نماذج لـ Bootstrap ( انظر الشكل أدناه) .
jQuery web
مولد نموذج لبوتستراب
نحن نبني النموذج بسحب وإسقاط بسيط. ثم نقوم بإبلاغ المُدخلات بنموذج يظهر في نافذة مشروطة. في النهاية ، علينا فقط نسخ كود HTML . يمكنك فقط إنشاء نماذج أفقية ، ولكن مجرد تكييف الكود يجعل من السهل إنشاء أنواع أخرى من النماذج.

الأزرار والرموز والصور


صفحة المثال
هنا هو الإصدار الجديد من صفحة المثال:

<!DOCTYPE HTML>
<html>

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

  <body>
    <div class="container">
      <header class="row">
        <div class="col-sm-12 col-lg-7">
          <h1>Mon amour pour les tigres</h1>
        </div>
        <div class="col-sm-12 col-lg-5">
          <form class="form-inline pull-right">
            <input type="text" style="width:150px" 
            class="input-sm form-control" placeholder="Recherche">
            <button type="submit" class="btn btn-primary btn-xs">
                <span class="glyphicon glyphicon-eye-open"></span> 
                Chercher</button>
          </form>
        </div>
      </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" 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>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <ul>
            <li>Tigre de Sibérie</li>
            <li>Tigre de Chine méridionale</li>
            <li>Tigre de Bali</li>
            <li>Tigre de d'Indochine</li>
            <li>Tigre de Malaisie</li>
            <li>Tigre de Java</li>
            <li>Tigre de Sumatra</li>
            <li>Tigre du Bengale</li>
            <li>Tigre de la Caspienne</li>
          </ul>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre" class="img-rounded">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-12">
          <table class="table table-bordered table-striped table-condensed">
            <caption>
            <h4>Les menaces pour les tigres</h4>
            </caption>
            <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>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8">
          <form class="well">
            <legend>Si vous voulez me laisser un message</legend>
            <h4>Comment m'avez-vous trouvé ?</h4>
            <fieldset>
              <div class="radio">
                <label for="ami" class="radio">
                  <input type="radio" name="origine" value="ami" id="ami">
                  Par un ami 
                </label>
              </div>
              <div class="radio">
                <label for="web" class="radio">
                  <input type="radio" name="origine" value="web" id="web">
                  Sur le web 
                </label>
              </div>
              <div class="radio">
                <label for="hasard" class="radio">
                  <input type="radio" name="origine" value="hasard" 
                  id="hasard">
                  Par hasard 
                </label>
              </div>
              <div class="radio">
                <label for="autre" class="radio">
                  <input type="radio" name="origine" value="autre" 
                  id="autre">
                  Autre... 
                </label>
              </div>
              <label for="textarea">Votre message :</label>
                <textarea id="textarea" class="form-control" 
                rows="4"></textarea>
                <p class="help-block">Vous pouvez agrandir 
                    la fenêtre</p>
                <button class="btn btn-primary" type="submit">
                    <span class="glyphicon glyphicon-ok-sign">
                        </span> Envoyer</button>
            </fieldset>
          </form>
        </section>
        <section 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>
        </section>
      </div>
    </div>
  </body>
</html> 
جرب الكود
ما الجديد؟ بالفعل نموذج بحث في الجزء العلوي الأيمن ، مع مربع نص وزر مع أيقونة (انظر الشكل أدناه).
jQuery web
نموذج البحث

لاحظ معالجة استجابة(responsive) لهذا النموذج. لشاشة عريضة ، يتم إيقافها في الجزء العلوي الأيمن مع فئة col-lg- 5 و pull-right . عندما ننتقل إلى التنسيق المتوسط ، يتم تركه مع الفصل col-sm-12 بطريقة يأتي لترتيب نفسه تحت العنوان ، معطل دائمًا على اليمين (انظر الشكل التالي).
jQuery web
الصور المصغرة للصور الآن لها زوايا مستديرة ، كما هو موضح في الشكل التالي.
jQuery web
ورث زر نموذج الاتصال أيقونة (انظر الشكل أدناه).
jQuery web
أيقونة في الزر
سنراجع هذه الميزات الجديدة ونفصل إمكانيات Bootstrap للأزرار والأيقونات والصور
أزرار جميلة
لإنشاء زر مع التمهيد فقط إضافة فئات btn و btn-default لعلامة <button>، <a> أو <input> :

<button type="button" class="btn btn-default">Bouton de base</button>
<a class="btn btn-default" href="#">Bouton avec lien</a>
<input class="btn btn-default" type="button" value="Bouton avec input"> 
الذي يعطينا الرقم التالي.
jQuery web
مظهر الزر
التقديم هو نفسه ، كل هذا يتوقف على سياق الاستخدام.
أنواع مختلفة من الأزرار
الجانب التلقائي هو الرمادي مع خلفية بيضاء. هناك احتمالات أكثر سخونة أخرى:

<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-success">Réussite</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Lien</button> 
مما يعطينا الأزرار المرئية في الشكل التالي.
jQuery web
أزرار ملونة
لاستخدام وفقا للحالات وتختلف وفقا للحالة المزاجية!
حجم الزر
يمكنك أيضًا ضبط حجم الزر:

<button type="button" class="btn btn-primary btn-lg">Bouton gros</button>
<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-primary btn-sm">Bouton petit</button>
<button type="button" class="btn btn-primary btn-xs">Bouton très petit
</button> 
الذي يعطينا الرقم التالي.
jQuery web
عدة أبعاد الأزرار
أزرار "كتلة"
btn-block يعين الفصل حجم الزر على بعد الحاوية الخاصة به. هذا مثال :

<div class="row">
  <div class="col-sm-3">
    <button type="button" class="btn btn-primary btn-block">Bouton "block"

    </button>
  </div>
  <div class="col-sm-6">
    <button type="button" class="btn btn-success btn-block">Bouton "block"

    </button>
  </div>
  <div class="col-sm-3">
    <button type="button" class="btn btn-danger btn-block">Bouton "block"

    </button>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web
تأثير فئة btn block
أزرار المجموعة
vمن الممكن تجميع الأزرار أفقياً مع الفصل btn-group . ويمكن أيضا أن يتم هذا التجميع عموديا مع الطبقة btn-group-vertical . فيما يلي مثال على كلتا المجموعتين:

<div class="row">
  <div class="col-lg-2">
    <div class="btn-group">
        <a class="btn btn-danger" href="#">1</a>
        <a class="btn btn-info" href="#">2</a>
        <a class="btn btn-warning" href="#">3</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web
تجميع الأزرار
من الممكن إنشاء تنظيمات أكثر تعقيدًا باستخدام شريط الأدوات btn- class :

<div class="btn-toolbar">
  <div class="btn-group">
      <a class="btn btn-danger" href="#">1</a>
      <a class="btn btn-info" href="#">2</a>
      <a class="btn btn-warning" href="#">3</a>
  </div>
  <div class="btn-group">
      <a class="btn btn-danger" href="#">4</a>
      <a class="btn btn-info" href="#">5</a>
      <a class="btn btn-warning" href="#">6</a>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web
شريط من الأزرار
يمكننا تغيير حجم المجموعة:

<div class="row">
  <div class="col-lg-1">
    <div class="btn-group-vertical btn-group-lg">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical btn-group-sm">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical btn-group-xs">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web
عدة أبعاد لتجميع الأزرار
أزرار مبررة
إذا كنت تريد توزيع الأزرار بالتساوي والتساوي في حاوية ، فاستخدم الفئة btn-group-justified بالإضافة إلى btn-group :

<div class="col-lg-6">
  <div class="btn-group btn-group-justified">
      <a class="btn btn-danger" href="#">1</a>
      <a class="btn btn-info" href="#">2</a>
      <a class="btn btn-warning" href="#">3</a>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web

<div class="col-lg-6">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-danger">1</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-info">2</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-warning">3</button>
    </div>
  </div>
</div> 
مولدات الأزرار
الموقع bootsnipp يقترح مولّد أزرار سهل الاستخدام (انظر الشكل أدناه).

jQuery web
مولد زر
قمت بإدخال زر النص واللون والحجم ، واخترت أيقونة وتحديد المواقع. يمكنك عرض النتيجة مباشرةً ولديك رمز HTML المطابق.
إذا كنت تريد أنماطًا مختلفة لأزرارك وتخرج من الألوان القياسية التي يوفرها Bootstrap ، يمكنك إنشاء أنماطك الخاصة. إذا لم تكن مصدر إلهام كبيرًا ، فهناك مولد بسيط ومناسب في الموقع http://charliepark.org/bootstrap_buttons/ (انظر الشكل أدناه).
jQuery web
مولد زر آخر
مجرد انتزاع كود وإدخاله في ورقة نمط. التكامل في زر (أو غيره) بسيط:

<button type="button" class="btn btn-custom">Mon beau bouton</button> 
وبالتالي ، من السهل والسريع إنشاء نمط الزر الخاص بك (انظر الشكل التالي).
jQuery web
أيقونات جميلة
أيقونات GLYPHICONS
يقدم Bootstrap 200 رمز من رموز . Glyphicons إن تكامل الرمز أمر سهل لأنه يجب عليك فقط استخدام العلامة . بالنسبة إلى نموذج الاتصال الخاص بصفحة المثال ، يتم تحسين الزر بإضافة رمز:

  <button class="btn btn-primary" type="submit">
    <span class="glyphicon glyphicon-ok-sign">
    </span> Envoyer
  </button> 
الذي يعطينا الرقم التالي.
jQuery web
أيقونة في زر
بناء الجملة بسيط جدا. نستخدم علامة <span> مع فئتين. واحد الرئيسي هو glyphicon رصد الدرجة المقابلة لرمز إلى عرض glyphicon-* . يمكننا بالتالي إنشاء أشرطة أنيقة من الأزرار:

<div class="container">
  <div class="row" >
    <div class="col-lg-3">
      <div class="btn-group">
          <a class="btn btn-danger" href="#">
            <span class="glyphicon glyphicon-fast-backward">
              </span> 
          </a>
          <a class="btn btn-info" href="#">
            <span class="glyphicon glyphicon-backward">
            </span> 
          </a>
          <a class="btn btn-warning" href="#">
            <span class="glyphicon glyphicon-play">
            </span> 
          </a>
          <a class="btn btn-info" href="#">
            <span class="glyphicon glyphicon-forward">
            </span> 
          </a>
          <a class="btn btn-danger" href="#">
            <span class="glyphicon glyphicon-fast-forward">
            </span> 
          </a>
      </div>
    </div>
    <div class="col-lg-1">
      <div class="btn-group-vertical">
          <a class="btn btn-danger" href="#">
            <span class="glyphicon glyphicon-pencil">
            </span> 
          </a>
          <a class="btn btn-info" href="#">
            <span class="glyphicon glyphicon-search">
            </span> 
          </a>
          <a class="btn btn-warning" href="#">
            <span class="glyphicon glyphicon-print">
            </span> 
          </a>
          <a class="btn btn-success" href="#">
            <span class="glyphicon glyphicon-picture">
            </span> 
          </a>
      </div>
    </div>
  </div>
</div> 
الذي يعطينا الرقم التالي.
jQuery web
أشرطة الأزرار مع الرموز
وإذا كنا نريد أيقونة ملونة؟
استخدم فقط النمط:

<button class="btn btn-primary" type="submit">
  <span class="glyphicon glyphicon-ok-sign" style="color:#4f4;">
  </span> 
  Envoyer
</button> 
الذي يعطينا الرقم التالي.
jQuery web
أيقونة ملونة
يمكننا وضع هذه الرموز في أي مكان آخر غير الأزرار ... أينما يمكنك الكتابة في الواقع! لا شيء ، بالطبع ، يمنع تخطي الخطوط. يمكنك إنشاء أزرار من خلال فصل الرمز عن النص:

<button class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span><br>Utilisateurs
</button>
<button class="btn btn-warning btn-lg">
  <span class="glyphicon glyphicon-comment"></span><br>Commentaires
</button>
<button class="btn btn-success btn-lg">
  <span class="glyphicon glyphicon-calendar"></span><br>Evénements
</button>
<button class="btn btn-danger btn-lg">
  <span class="glyphicon glyphicon-shopping-cart"></span><br>Boutique
</button>
<button class="btn btn-info btn-lg">
  <span class="glyphicon glyphicon-bullhorn"></span><br>Messages
</button> 
jQuery web
أزرار الدائرية؟
من السهل ، إضافة نمط بسيط ، لإنشاء أزرار مستديرة تلائم الرموز. فيما يلي مثال على نمط إضافي (انظر أيضًا الشكل التالي):

.btn-lg {
  width: 50px;
  height: 50px;
  border-radius: 25px;
} 
وكود HTML:

<button class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span>
</button>
<button class="btn btn-warning btn-lg">
  <span class="glyphicon glyphicon-comment"></span>
</button>
<button class="btn btn-success btn-lg">
  <span class="glyphicon glyphicon-calendar"></span>
</button>
<button class="btn btn-danger btn-lg">
  <span class="glyphicon glyphicon-shopping-cart">

  </button>
<button class="btn btn-info btn-lg">
  <span class="glyphicon glyphicon-bullhorn"></span>
</button> 
jQuery web
أيقونات FONT AWESOME
يتميز موقع Font Awesome بمجموعة من 675 رمزًا جاهزة للاستخدام في Bootstrap . من الواضح أنها ليست مدمجة في Bootstrap ويجب أن تعلن أن ملف CSS يستخدمها. يوفر الموقع العديد من الاحتمالات للقيام بذلك ، وأبسطها هو استخدام CDN :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/
    font-awesome.min.css" rel="stylesheet"> 
بمجرد الإعلان عن ملف CSS ، يمكنك استخدام الرموز. يجب أن يكون الرمز مدمجًا مع علامة على في نفس السطر ، على سبيل المثال <i> ، تستخدمها جميع أمثلة الموقع ، ولكن من الناحية الدلالية ، <span> ستكون العلامة أكثر ملاءمة. يقدم الموقع مجموعة من الأمثلة . يمكنك إدراج رمز مباشرة في نص (انظر أيضًا الشكل التالي):

    Il faut déverrouiller <i class="fa fa-unlock"></i> 
    pour sortir <i class="fa fa-arrow-right"></i> 

jQuery web
يمكننا أيضًا تغيير حجم الرموز وفقًا للسياق (انظر أيضًا الشكل التالي):

<p><i class="fa fa-print fa-lg"></i> Taille normale</p>
<p><i class="fa fa-print fa-2x"></i> Taille double</p>
<p><i class="fa fa-print fa-3x"></i> Taille triple</p>
<p><i class="fa fa-print fa-4x"></i> Taille quadruple</p>
<p><i class="fa fa-print fa-5x"></i> Taille quintuple</p> 
jQuery web
من السهل جدًا أيضًا إنشاء قائمة يتم تحديد عناصرها جيدًا برمز (انظر أيضًا الشكل التالي):

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Vérifier</li>
  <li><i class="fa-li fa fa-paperclip"></i>Conserver</li>
  <li><i class="fa-li fa fa-eraser"></i>Effacer</li>
  <li><i class="fa-li fa fa-print"></i>Imprimer</li>
</ul> 
هناك العديد من الاحتمالات الأخرى ، مثل تدوير الرموز ، ورسومها المتحركة ، وتكديسها ، والتي تتيح لك اكتشافها من خلال الرجوع إلى صفحة أمثلة الموقع
تنسيق الصور
يوفر Bootstrap إمكانية تعديل مظهر حدود الصور. هناك 3 فئات يمكن استخدامها:
فئة تأثير
img-rounded تقريب صورة الزاوية
img-circle صورة دائرية
img-thumbnail صورة ذات حدود بيضاء
فيما يلي مثال توضيحي لهذه الآثار الثلاثة:

<div class="container">
  <div class="col-lg-2"> 
      <img src="images/t1.jpg" class="img-rounded">
  </div>
 <div class="col-lg-2"> 
      <img src="images/t2.jpg" class="img-circle">
  </div>
 <div class="col-lg-2"> 
      <img src="images/t3.jpg" class="img-thumbnail">
  </div>
</div> 
jQuery web
لاحظ أنه يمكنك عمل صور قابلة للتكيف بسهولة مع الفصل img-responsive. هذه الفئة لديها 3 قواعد:

display: block;
max-width: 100%;
height: auto; 
الهدف هو التأكد من أن الصورة تشغل كل المساحة المتوفرة في الحاوية الخاصة بها.

في الخلاصة


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