Doc: Test bootstrap

[svganimation.git] / doc / page.html

diff --git a/doc/page.html b/doc/page.html
index c967e44..5f7f743 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -123,11 +123,12 @@ Chargement...
   <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
 <span class="op">}</span></code></pre></div>
 <p>Fonction qui sera liée à l'<em>événement</em> <code>onclick</code> d'un bouton proposant justement le chargement de l'animation...</p>
-<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span>
-<span class="ot">  style=</span><span class="st">&quot;margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px&quot;</span><span class="kw">&gt;</span>
- <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;../ellipsographe/svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:330px;height:240px&quot;</span><span class="kw">/&gt;</span>
+<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span><span class="ot"> style=</span><span class="st">&quot;...&quot;</span><span class="kw">&gt;</span>
+ <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;../ellipsographe/svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="ot"> style=</span><span class="st">&quot;...&quot;</span><span class="kw">/&gt;</span>
  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;message&quot;</span><span class="ot"> id=</span><span class="st">&quot;anim2_message&quot;</span><span class="kw">&gt;</span>Ellipsographe<span class="kw">&lt;/div&gt;</span>
- <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2_boutons&quot;</span><span class="kw">&gt;&lt;button</span><span class="ot"> onclick=</span><span class="st">&quot;charge_anim2();&quot;</span><span class="kw">&gt;</span>Charger l&#39;animation<span class="kw">&lt;/button&gt;&lt;/div&gt;</span>
+ <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2_boutons&quot;</span><span class="kw">&gt;</span>
+   <span class="kw">&lt;button</span><span class="ot"> onclick=</span><span class="st">&quot;charge_anim2();&quot;</span><span class="kw">&gt;</span>Charger l&#39;animation<span class="kw">&lt;/button&gt;</span>
+ <span class="kw">&lt;/div&gt;</span>
 <span class="kw">&lt;/div&gt;</span></code></pre></div>
 <p>Dans le même temps, le <em>style</em> des éléments englobants a été adapté.</p>
 <div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
@@ -232,6 +233,19 @@ Charger l'animation
 </div>
 <p>Le fichier <code>SVGPlayerOne.js</code> est fourni à la racine du projet SVGAnimation.</p>
 <h2 id="exemples-dutilisation">Exemples d'utilisation</h2>
+<div class="row">
+<pre><code>&lt;div class=&quot;col-md-4&quot;&gt;
+    &lt;a href=&quot;//melusine.eu.org/syracuse/G/svganimation-exemples/mvtretrograde/&quot;
+        alt=&quot;lien vers l&#39;exemple&quot;&gt;&lt;img src=&quot;img/mvtretrograde.png&quot;
+            alt=&quot;Image de l&#39;exemble&quot; style=&quot;width: 100%;&quot;/&gt;&lt;/a&gt;</code></pre>
+</div>
+<pre><code>&lt;div class=&quot;col-md-8&quot;&gt;
+    Animation  avec le *player* `SVGPlayerButtons` et une factorisation
+        avec MetaPost du matériel qui se répète sur chaque image. Le fond
+            est mis en *background* de la balise englobante, permettant ainsi
+                d&#39;alléger l&#39;animation.</code></pre>
+</div>
+</div>
 </div>
 <div id="tdm-doc" class="tdm-loc">
   <div id="tdm-titre">SVGAnimation (documentation)</div>