updating display & layout html files

Author: hanseller

common/display/display-en.html

@@ -10,6 +10,7 @@
 
 <p>This page showcases Bootstrap display utility features including some integration from wet-boew like toggling content.</p>
 
+<nav>
 <h2>On this page:</h2>
 
 <ul>
@@ -22,35 +23,36 @@ <h2>On this page:</h2>
 	<li><a href="#col-count">Col count</a></li>
 	<li><a href="#sizing-controls">Sizing controls</a></li>
 </ul>
-
+</nav>
 <h2 id="bootstrap">Bootstrap</h2>
 
-<h3 id="float">Float</h3>
-
-<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>
+<h2>Float</h2>
+<h3><code>.clearfix</code>working example</h3>
 <div class="well">
 	<div class="row">
-		<div class="pull-left bg-info col-md-3 well">Column 1</div>
-		<div class="pull-left bg-info col-md-3 well">Column 2</div>
-		<div class="pull-left bg-info col-md-3 well">Column 3</div>
+		<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>
+		<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>
+		<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>
 		<!-- Add clearfix class to clear floated elements -->
 		<div class="clearfix"></div>
 	</div>
+	<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>
+</div>
 
 </div>
 <h4>Code sample</h4>
 <pre><code>&lt;div class="well"&gt;
 	&lt;div class="row"&gt;
-	&lt;div class="col-md-3 well pull-left bg-darker"&gt;Column 1&lt;/div&gt;
-	&lt;div class="col-md-3 well pull-left bg-darker"&gt;Column 2&lt;/div&gt;
-	&lt;div class="col-md-3 well pull-left bg-darker"&gt;Column 3&lt;/div&gt;
+	&lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 1&lt;/div&gt;
+	&lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 2&lt;/div&gt;
+	&lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 3&lt;/div&gt;
 	&lt;!-- Add clearfix class to clear floated elements --&gt;
 	&lt;div class="<strong>clearfix</strong>"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;p class="well"&gt;This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.&lt;/p&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.center-block</code> class working example</h4>
+<h3><code>.center-block</code> class working example</h3>
 <div class="well">
 	<div class="center-block well bg-darker">
 		This element is centered horizontally within its parent container.
@@ -63,7 +65,7 @@ <h4>Code sample</h4>
 &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.pull-right</code> class working example</h4>
+<h3><code>.pull-right</code> class working example</h3>
 <div class="well">
 	<div class="pull-right well">
 		This element is floated to the right within its parent container.
@@ -76,7 +78,7 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.pull-left</code> class working example</h4>
+<h3><code>.pull-left</code> class working example</h3>
 <div class="well">
 	<div class="pull-left well">
 		This element is floated to the left within its parent container.
@@ -144,7 +146,7 @@ <h4>Code sample</h4>
 
 <h3 id="toggling-content">Toggling content</h3>
 
-<h4>Bootstrap 3 <code>.hide</code> class working example</h4>
+<h3><code>.hide</code> class working example</h3>
 <div class="well">
 	<div class="hide well">
 		This element is hidden on all screen sizes.
@@ -157,7 +159,7 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.show</code> class working example</h4>
+<h3><code>.show</code> class working example</h3>
 <div class="well">
 	<div class="show well">
 		This element is visible on all screen sizes.
@@ -170,7 +172,7 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.invisible</code> class working example</h4>
+<h3><code>.invisible</code> class working example</h3>
 <div class="well">
 	<div class="invisible well">
 		This element is invisible but still takes up space in the layout.
@@ -183,7 +185,7 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.text-hide</code> class working example</h4>
+<h3><code>.text-hide</code> class working example</h3>
 <div class="well">
 	<div class="text-hide well">
 		This text is hidden visually but remains accessible to screen readers.
@@ -196,7 +198,7 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Bootstrap 3 <code>.hidden</code> class working example</h4>
+<h3><code>.hidden</code> class working example</h3>
 <div class="well">
 	<div class="hidden well">
 		This element is hidden on all screen sizes.
@@ -225,7 +227,7 @@ <h4>Code sample</h4>
 <h4><code>.sr-only-focusable</code> class working example</h4>
 <div class="well">
 	<div class="sr-only-focusable well">
-		This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.
+		<a href="#">This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.</a>
 	</div>
 </div>
 <h4>Code sample</h4>
@@ -774,17 +776,6 @@ <h4>Code sample</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4><code>.mfp-hide </code>class working example</h4><div class="well">
-	<div class="mfp-hide well">
-		This element is hidden as part of a Magnific Popup modal.
-	</div>
-</div>
-<h4>Code sample</h4>
-<pre><code>&lt;div class="well"&gt;
-	&lt;div class="<strong>mfp-hide</strong> well"&gt;
-		This element is hidden as part of a Magnific Popup modal.
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
 
 <h4><code>.wb-inv </code>class working example</h4><div class="well">
 	<div class="wb-inv well">

common/display/display-fr.html

@@ -10,6 +10,7 @@
 
 <p>Cette page présente des fonctionnalités utilitaires d'affichage de Bootstrap, y compris certaines intégrations de wet-boew pour la bascule du contenu.</p>
 
+<nav>
 <h2>Sur cette page :</h2>
 
 <ul>
@@ -22,6 +23,7 @@ <h2>Sur cette page :</h2>
 	<li><a href="#nombre-colonnes">Nombre de colonnes (Col count)</a></li>
 	<li><a href="#controles-de-dimensionnement">Contrôles de dimensionnement</a></li>
 </ul>
+</nav>
 
 <h2 id="bootstrap">Bootstrap</h2>
 
@@ -58,7 +60,7 @@ <h4>Exemple de fonctionnement de la classe Bootstrap 3 <code>.center-block</code
 </div>
 <h4>Exemple de code</h4>
 <pre><code>&lt;div class="well"&gt;
-	&lt;div class="<strong>center-block</strong> well" style="width: 200px; height: 200px; background-color: #ffffff;"&gt;
+	&lt;div class="<strong>center-block</strong> well bg-darker text-white"&gt;
 		Cet élément est centré horizontalement dans son conteneur parent.
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
@@ -226,7 +228,7 @@ <h4>Exemple de code</h4>
 <h4>Exemple de fonctionnement de la classe <code>.sr-only-focusable</code></h4>
 <div class="well">
 	<div class="sr-only-focusable well">
-		Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier.
+		<a href="#">Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier.</a>
 	</div>
 </div>
 <h4>Exemple de code</h4>
@@ -679,7 +681,7 @@ <h4>Exemple de fonctionnement de la classe <code>.opct-40</code></h4>
 </div>
 <h4>Exemple de code</h4>
 <pre><code>&lt;div class="well"&gt;
-	&lt;div class="<strong>opct-30</strong> well"&gt;
+	&lt;div class="<strong>opct-40</strong> well"&gt;
 		Cet élément a une opacité de 0.4 (40%).
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
@@ -790,34 +792,6 @@ <h4>Exemple de code</h4>
 	&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 
-<h4>Exemple de fonctionnement de la classe <code>.lbx-hide-gal</code></h4>
-<div class="well">
-	<div class="lbx-hide-gal well">
-		Cet élément est masqué dans le cadre d'une galerie lightbox.
-	</div>
-</div>
-<h4>Exemple de code</h4>
-<pre><code>&lt;div class="well"&gt;
-	&lt;div class="<strong>lbx-hide-gal</strong> well"&gt;
-		Cet élément est masqué dans le cadre d'une galerie lightbox.
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-<h4>Exemple de fonctionnement de la classe <code>.mfp-hide</code></h4>
-<div class="well">
-	<div class="mfp-hide well">
-		Cet élément est masqué dans le cadre d'une fenêtre modale Magnific Popup.
-	</div
-
->
-</div>
-<h4>Exemple de code</h4>
-<pre><code>&lt;div class="well"&gt;
-	&lt;div class="<strong>mfp-hide</strong> well"&gt;
-		Cet élément est masqué dans le cadre d'une fenêtre modale Magnific Popup.
-	&lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
 <h4>Exemple de fonctionnement de la classe <code>.wb-inv</code></h4>
 <div class="well">
 	<div class="wb-inv well">

common/grid-layout/layout-en.html

@@ -27,7 +27,7 @@ <h4><code>.d-flex</code> class working example</h4>
 		You can add multiple children to the flex container to see them aligned horizontally.
 	</div>
 </div>
-<h4>Code sample</h4>
+<h5>Code sample</h5>
 <pre><code>&lt;div class="well <strong>d-flex</strong>"&gt;
 	&lt;div class="child"&gt;
 		This is a flex container with the <code>.d-flex</code> class. Its children are aligned in a row by default.

common/grid-layout/layout-fr.html

@@ -27,7 +27,7 @@ <h4>Exemple d'utilisation de la classe <code>.d-flex</code></h4>
 		Vous pouvez ajouter plusieurs enfants au conteneur flexible pour les aligner horizontalement.
 	</div>
 </div>
-<h4>Exemple de code</h4>
+<h5>Exemple de code</h5>
 <pre><code>&lt;div class="well <strong>d-flex</strong>"&gt;
 	&lt;div class="child"&gt;
 		Il s'agit d'un conteneur flexible avec la classe <code>.d-flex</code>. Ses enfants sont alignés en ligne par défaut.