From dd9763f58e6f834a66a33608e85f9af7e19ea91a Mon Sep 17 00:00:00 2001
From: "art.dambrine" <art.dambrine@gmail.com>
Date: Tue, 31 Mar 2020 16:45:50 +0000
Subject: [PATCH] more examples 31032020

---
 btn-jquery-bootstrap.html |  92 ++++++++
 index.html                |   2 +-
 mise_en_page.html         |  24 +-
 page_test.html            | 464 ++++++++++++++++++++++++++------------
 tuto.css                  |   2 +-
 5 files changed, 440 insertions(+), 144 deletions(-)
 create mode 100755 btn-jquery-bootstrap.html
diff --git a/btn-jquery-bootstrap.html b/btn-jquery-bootstrap.html
new file mode 100755
index 0000000..d10a242
--- /dev/null
+++ b/btn-jquery-bootstrap.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <!-- Bootstrap core CSS -->
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="starter-template.css" rel="stylesheet">
+    <style type="text/css">
+        /* [class*="col"] { margin-top: 20px; } */
+        img {
+            width: 100%;
+            background-color: grey;
+            border: 2px solid black;
+            border-radius: 2px;
+            line-height: 80px;
+            font-size: 20px;
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+                    aria-expanded="false" aria-controls="navbar">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">Project name</a>
+            </div>
+            <div id="navbar" class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="index.html">Home</a></li>
+                    <li><a href="mise_en_page.html">Mise en page</a></li>
+                    <li><a href="page_test.html">Page de test</a></li>
+                </ul>
+            </div>
+            <!--/.nav-collapse -->
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="starter-template" style="text-align: unset;">
+           
+            <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>
+                  <p class="help-block">Déclenchez une alerte en envoyant un texte de moins de 4 caractères.</p>
+                  <div class="alert alert-block alert-danger" style="display:none">
+                    <h4>Erreur !</h4>
+                    Vous devez entrer au moins 4 caractères ! 
+                  </div>
+                </form>
+              </div>
+
+        </div> <!-- ./starter-template -->
+    </div>
+
+
+    <!-- Bootstrap core JavaScript -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script>
+        window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
+    </script>
+    <script src="bootstrap/js/bootstrap.min.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>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index d745b10..c663bcc 100755
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
           <ul class="nav navbar-nav">
             <li class="active"><a href="index.html">Home</a></li>
             <li><a href="mise_en_page.html">Mise en page</a></li>
-            <li><a href="page_test.html">Page test</a></li>
+            <li><a href="page_test.html">Page de test</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
diff --git a/mise_en_page.html b/mise_en_page.html
index 458ba9a..cf8a58e 100755
--- a/mise_en_page.html
+++ b/mise_en_page.html
@@ -44,7 +44,7 @@
             <ul class="nav navbar-nav">
               <li class="active"><a href="index.html">Home</a></li>
               <li><a href="mise_en_page.html">Mise en page</a></li>
-              <li><a href="page_test.html">Page test</a></li>
+              <li><a href="page_test.html">Page de test</a></li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>
@@ -98,12 +98,30 @@
                       </div>
                       <div class="col-md-2">
                           <div class="row">
-                              <div class="col-sm-12">a</div>
-                              <div class="col-sm-12">a</div>
+                              <aside class="col-sm-12">aside</aside>
+                              <aside class="col-sm-12">aside</aside>
                           </div>
                       </div>
                   </div>
               </section>
+              <section class="col-lg-10 col-lg-offset-2">section
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="row">
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                          <div class="col-sm-6">article</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
           </div>
           <footer class="row">
             <div class="col-lg-12">footer</div>
diff --git a/page_test.html b/page_test.html
index 9164fcf..52b7193 100755
--- a/page_test.html
+++ b/page_test.html
@@ -1,165 +1,351 @@
 <!DOCTYPE HTML>
 <html>
 
-  <head>
+<head>
     <meta charset="utf-8">
     <!-- Bootstrap core CSS -->
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="starter-template.css" rel="stylesheet">
     <style type="text/css">
-      /* [class*="col"] { margin-top: 20px; } */
-      img { 
-          width: 100%; 
-          background-color: grey;
-          border: 2px solid black;
-          border-radius: 2px;
-          line-height: 80px;
-          font-size: 20px;
-          text-align: center; 
+        /* [class*="col"] { margin-top: 20px; } */
+        img {
+            width: 100%;
+            background-color: grey;
+            border: 2px solid black;
+            border-radius: 2px;
+            line-height: 80px;
+            font-size: 20px;
+            text-align: center;
         }
     </style>
-  </head>
+</head>
 
-  <body>
+<body>
 
     <nav class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">Project name</a>
-          </div>
-          <div id="navbar" class="collapse navbar-collapse">
-            <ul class="nav navbar-nav">
-              <li class="active"><a href="index.html">Home</a></li>
-              <li><a href="mise_en_page.html">Mise en page</a></li>
-              <li><a href="page_test.html">Page test</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+                    aria-expanded="false" aria-controls="navbar">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">Project name</a>
+            </div>
+            <div id="navbar" class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="index.html">Home</a></li>
+                    <li><a href="mise_en_page.html">Mise en page</a></li>
+                    <li><a href="page_test.html">Page de test</a></li>
+                </ul>
+            </div>
+            <!--/.nav-collapse -->
         </div>
-      </nav>
+    </nav>
 
     <div class="container">
-    <div class="starter-template" style="text-align: unset;">
-      <!-- <header class="page-header"> -->
-     <!--  <header class="col-lg-12"> -->
+        <div class="starter-template" style="text-align: unset;">
+            <!-- <header class="page-header"> -->
+            <!--  <header class="col-lg-12"> -->
             <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> <!-- ./starter-template -->
-</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 SAT 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 class="row">
+                <form class="col-lg-6 well">
+                    <legend>Légende</legend>
+                    <h4>Comment m'avez-vous trouvé ?</h4>
+                    <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="form-group">
+                        <label for="text">Text</label>
+                        <input type="text" id="text" class="form-control">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="textarea">Textarea</label>
+                        <textarea id="textarea" class="form-control"></textarea>
+                        <p class="help-block">Vous pouvez agrandir la fenêtre</p>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="select">Select</label>
+                        <select class="form-control" id="select">
+                            <option>Option 1</option>
+                            <option>Option 2</option>
+                            <option>Option 3</option>
+                        </select>
+                    </div>
+
+                    <button class="btn btn-primary" type="submit">Envoyer</button>
+                </form>
+            </div>
+
+            <div class="row">
+
+                <!-- Exemple  - formulaire form-horizontal -->
+                <form class="form-horizontal col-lg-6">
+                    <div class="form-group">
+                        <legend>Formulaire form-horizontal</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> <!-- ./form -->
+            </div>
+
+            <!-- Formulaire sur une ligne - avec form-inline -->
+
+            <div class="row">
+
+                <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>
+                    </div>
+                    <button type="submit" class="btn btn-default">Envoyer</button>
+                </form>
+
+            </div>
+
+            <br>
+            <!-- Formulaire avec input-group et input-group-addon -->
+
+            <div class="row">
+                <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>
+            </div>
+
+            <br>
+
+            <!-- Accoler un bouton à un contrôle -->
+
+            <div class="row">
+                <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>
+            </div>
+
+            <br>
+            
+            <!-- Formulaires avec stylisation selon l'état -->
+
+            <div class="row">
+                <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>
+            </div>
+
+            <!-- Exemple de bouton dynamique avec Bootstrap & jQuery -->
+            <a style="font-weight: bold;" href="btn-jquery-bootstrap.html">Autre exemple de bouton avec Bootstrap & jQuery (legacy - refaire avec JS)</a>
+
+        </div> <!-- ./starter-template -->
+    </div>
 
 
     <!-- Bootstrap core JavaScript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
+    <script>
+        window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
+    </script>
     <script src="bootstrap/js/bootstrap.min.js"></script>
 
-  </body>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/tuto.css b/tuto.css
index fe4ad15..680cf8c 100755
--- a/tuto.css
+++ b/tuto.css
@@ -3,7 +3,7 @@ body {
   }
 
 [class*="col-"], footer {
-    background-color: lightgreen;
+    background-color: lightblue;
     border: 2px solid black;
     border-radius: 6px;
     line-height: 40px;
