Changeset 114920 in spip-zone


Ignore:
Timestamp:
Apr 11, 2019, 10:16:54 AM (6 months ago)
Author:
cedric@…
Message:

une ?page=demo/bootstrap a jour et complete

Location:
_plugins_/bootstrap/trunk/demo
Files:
6 added
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/bootstrap/trunk/demo/bootstrap.html

    r104338 r114920  
    11<!DOCTYPE html>
    22<html lang="en">
    3         <head>
    4                 <!--[if lt IE 9]><!--Perf issue--><![endif]-->
    5                 <meta charset="#CHARSET">
    6                 <title>[(#NOM_SITE_SPIP|textebrut)]</title>
    7                 <meta name="viewport" content="width=device-width, initial-scale=1">
    8                 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    9                 <meta name="description" content="">
    10                 <meta name="author" content="">
    11 
    12                 <!-- Le styles -->
    13                 [<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
    14                 #INSERT_HEAD_CSS
    15                 [<link rel="stylesheet" href="(#CSS{css/exemple.css})" type="text/css" />]
    16                 <style type="text/css">
    17                         body.preview {text-align: left;margin-top: 80px;}
    18                         #footer {margin-top:2em;padding-top:2em;border-top:1px solid #eee;}
    19                         .modal:not(#source-modal) {display:block;position: static;}
    20                         .modal .modal-dialog {max-width: 95%;}
    21                 </style>
    22 
    23                 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    24                 <!--[if lt IE 9]>
    25           <script src="#CHEMIN{js/html5.js}"></script>
    26           <script src="#CHEMIN{js/respond.min.js}"></script>
    27                 <![endif]-->
    28                 #INSERT_HEAD
    29                 <!-- JS in head not in footer : let SPIP optimize this -->
    30                 <script src="#CHEMIN{js/bootstrap-affix.js}"></script>
    31                 <script src="#CHEMIN{js/bootstrap-alert.js}"></script>
    32                 <script src="#CHEMIN{js/bootstrap-button.js}"></script>
    33                 <script src="#CHEMIN{js/bootstrap-carousel.js}"></script>
    34                 <script src="#CHEMIN{js/bootstrap-collapse.js}"></script>
    35                 <script src="#CHEMIN{js/bootstrap-dropdown.js}"></script>
    36                 <script src="#CHEMIN{js/bootstrap-modal.js}"></script>
    37                 <script src="#CHEMIN{js/bootstrap-scrollspy.js}"></script>
    38                 <script src="#CHEMIN{js/bootstrap-tab.js}"></script>
    39                 <script src="#CHEMIN{js/bootstrap-tooltip.js}"></script>
    40                 <script src="#CHEMIN{js/bootstrap-popover.js}"></script>
    41                 <script src="#CHEMIN{js/bootstrap-transition.js}"></script>
    42         </head>
    43   <body class="preview">
    44     <div class="navbar navbar-default navbar-fixed-top">
    45       <div class="container">
    46         <div class="navbar-header">
    47           <a href="../" class="navbar-brand">Bootswatch</a>
    48           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
    49             <span class="icon-bar"></span>
    50             <span class="icon-bar"></span>
    51             <span class="icon-bar"></span>
    52           </button>
    53         </div>
    54         <div class="navbar-collapse collapse" id="navbar-main">
    55           <ul class="nav navbar-nav">
    56             <li class="dropdown">
    57               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
    58               <ul class="dropdown-menu" aria-labelledby="themes">
    59                 <li><a href="../default/">Default</a></li>
    60                 <li class="divider"></li>
    61                 <li><a href="#">Cerulean</a></li>
    62                 <li><a href="#">Cosmo</a></li>
    63                 <li><a href="#">Cyborg</a></li>
    64                 <li><a href="#">Darkly</a></li>
    65                 <li><a href="#">Flatly</a></li>
    66                 <li><a href="#">Journal</a></li>
    67                 <li><a href="#">Lumen</a></li>
    68                 <li><a href="#">Paper</a></li>
    69                 <li><a href="#">Readable</a></li>
    70                 <li><a href="#">Sandstone</a></li>
    71                 <li><a href="#">Simplex</a></li>
    72                 <li><a href="#">Slate</a></li>
    73                 <li><a href="#">Spacelab</a></li>
    74                 <li><a href="#">Superhero</a></li>
    75                 <li><a href="#">United</a></li>
    76                 <li><a href="#">Yeti</a></li>
    77               </ul>
    78             </li>
    79             <li>
    80               <a href="#">Help</a>
    81             </li>
    82             <li>
    83               <a href="#">Blog</a>
    84             </li>
    85             <li class="dropdown">
    86               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Cerulean <span class="caret"></span></a>
    87               <ul class="dropdown-menu" aria-labelledby="download">
    88                 <li><a href="#">Open Sandbox</a></li>
    89                 <li class="divider"></li>
    90                 <li><a href="#">bootstrap.min.css</a></li>
    91                 <li><a href="#">bootstrap.css</a></li>
    92                 <li class="divider"></li>
    93                 <li><a href="#">variables.less</a></li>
    94                 <li><a href="#">bootswatch.less</a></li>
    95                 <li class="divider"></li>
    96                 <li><a href="#">_variables.scss</a></li>
    97                 <li><a href="#">_bootswatch.scss</a></li>
    98               </ul>
    99             </li>
    100           </ul>
    101 
    102           <ul class="nav navbar-nav navbar-right">
    103             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
    104             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
    105           </ul>
    106 
    107         </div>
     3<head>
     4  <meta charset="utf-8">
     5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     7  <meta name="description" content="">
     8  <meta name="author" content="">
     9
     10  <title>BootStrap 4 Components</title>
     11  <!-- Le styles -->
     12  [<link rel="stylesheet" href="(#CSS{css/bootstrap.css})" type="text/css" />]
     13  #INSERT_HEAD_CSS
     14  [<link rel="stylesheet" href="(#CSS{css/exemple.css})" type="text/css" />]
     15  <style type="text/css">
     16          .nav-sticky {
     17                  position: sticky;
     18                  top:0;
     19          }
     20  </style>
     21  #INSERT_HEAD
     22  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-util.js})"></script>]
     23  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-button.js})"></script>]
     24  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-collapse.js})"></script>]
     25  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-carousel.js})"></script>]
     26  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-dropdown.js})"></script>]
     27  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-modal.js})"></script>]
     28  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-scrollspy.js})"></script>]
     29  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-tab.js})"></script>]
     30  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-toast.js})"></script>]
     31  [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-tooltip.js})"></script>]
     32        [<script type="text/javascript" src="(#CHEMIN{js/bootstrap-popover.js})"></script>]
     33
     34</head>
     35<body>
     36
     37  <nav id="top" class="navbar navbar-lg navbar-expand-lg navbar-dark bg-primary">
     38    <div class="container">
     39      <a class="navbar-brand" href="#URL_SITE_SPIP">#NOM_SITE_SPIP</a>
     40      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
     41        <span class="navbar-toggler-icon"></span>
     42      </button>
     43
     44      <div class="collapse navbar-collapse" id="navbarCollapse">
     45        <ul class="navbar-nav ml-auto">
     46          <li class="nav-item">
     47            <a class="nav-link" href="#">Overview</a>
     48          </li>
     49          <li class="nav-item dropdown">
     50            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     51              Pages
     52            </a>
     53            <div class="dropdown-menu">
     54              <a class="dropdown-item" href="#">Landing</a>
     55              <a class="dropdown-item" href="#">Dashboard</a>
     56              <a class="dropdown-item" href="#">General</a>
     57            </div>
     58          </li>
     59          <li class="nav-item dropdown active">
     60            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     61              Components
     62            </a>
     63            <div class="dropdown-menu">
     64              <a class="dropdown-item" href="#">Bootstrap</a>
     65            </div>
     66          </li>
     67          <li class="nav-item dropdown">
     68            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     69              Docs
     70            </a>
     71            <div class="dropdown-menu">
     72              <a class="dropdown-item" href="#">Introduction</a>
     73              <a class="dropdown-item" href="#">Quick start</a>
     74              <a class="dropdown-item" href="#">Build tools</a>
     75              <a class="dropdown-item" href="#">Contents</a>
     76              <a class="dropdown-item" href="#">Changelog</a>
     77            </div>
     78          </li>
     79        </ul>
    10880      </div>
    10981    </div>
    110 
    111 
    112     <div class="container">
    113 
    114             <header class="page-header" id="banner">
    115         <h1>Bootstrap v3 pour SPIP</h1>
    116         <p class="lead">Page de demonstration</p>
    117         <div class="subnav">
    118           <ul class="nav nav-pills">
    119             <li><a href="#typography">Typography</a></li>
    120             <li><a href="#navbar">Navbar</a></li>
    121             <li><a href="#buttons">Buttons</a></li>
    122             <li><a href="#forms">Forms</a></li>
    123             <li><a href="#tables">Tables</a></li>
    124             <li><a href="#nav">Navigations</a></li>
    125             <li><a href="#indicators">Indicators</a></li>
    126             <li><a href="#progress">Progress</a></li>
    127             <li><a href="#container">Containers</a></li>
    128             <li><a href="#dialogs">Dialogs</a></li>
    129           </ul>
    130         </div>
    131       </header>
    132 
    133             <!-- Typography
    134                 ================================================== -->
    135             <div class="bs-docs-section clearfix">
    136                     <div class="page-header">
    137         <h2 id="typography">Typography</h2>
    138         </div>
    139                     <div class="row">
    140 
    141                             <div class="col-sm-8">
    142 
    143                                     <div class="cartouche">
    144                                             <p class="surtitre">Ceci est le sur-titre de l’article</p>
    145 
    146                                             <h1 class="surlignable">Charte typo
    147                                                     <small>par tetue</small>
    148                                             </h1>
    149 
    150                                             <p class="soustitre">Ceci est le sous-titre de l’article</p>
    151 
    152                                             <p class="info-publi"><abbr class="published" title="2007-06-30T22:00:00Z">dimanche 1er juillet
    153                                                     2007</abbr><span
    154                                                     class="sep">, </span><span class="auteurs">par  <span class="vcard author"><a class="url fn spip_in"
    155                                                                                                                             href="spip.php?auteur1">Webmestre</a></span></span>
    156                                             </p>
    157 
    158                                     </div>
    159 
    160                                     <div class="chapo surlignable"><p>Cette page présente un échantillon des enrichissements typographiques
    161                                             possibles
    162                                             sur ce site. Leur habillage est réalisé par le webmestre, en&nbsp;CSS, via des feuilles de style externes.
    163                                             Ce&nbsp;paragraphe
    164                                             constitue donc le&nbsp;chapeau.</p></div>
    165                                     <div class="texte surlignable"><h3 class="spip">Paragraphes</h3>
    166 
    167                                             <p>Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
    168                                                     Suspendisse
    169                                                     lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
    170                                                     diam.<br
    171                                                             class='manualbr'/>Ici, retour à la ligne, généré par le raccourci SPIP &#171;&nbsp;<code
    172                                                             class='spip_code'
    173                                                             dir='ltr'>_ </code>&nbsp;&#187;.
    174                                                     Espace&nbsp;insécable.</p>
    175 
    176                                             <p>Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam
    177                                                     nisl
    178                                                     sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
    179                                                     Pellentesque
    180                                                     congue.</p>
    181                                             <hr class="spip"/>
    182                                             <p>Troisième paragraphe, précédé d&#8217;une ligne horizontale de séparation, générée par le raccourci
    183                                                     SPIP
    184                                                     &#171;&nbsp;<code class='spip_code' dir='ltr'>----</code>&nbsp;&#187;. Praesent egestas leo in pede.
    185                                                     Praesent
    186                                                     blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>
    187 
    188                                             <h3 class="spip">Un intertitre normal</h3>
    189 
    190                                             <p>Voici du <i>texte en italique</i> et du <strong>texte en gras</strong>.<br class='manualbr'/>Voici un
    191                                                     <del>texte supprimé</del>
    192                                                     et le
    193                                                     <ins>texte inséré en correction</ins>
    194                                                     .<br class='manualbr'/>Une <dfn>définition</dfn> de terme avec la balise <code class='spip_code'
    195                                                                                                                                    dir='ltr'>
    196                                                             &lt;dfn&gt;</code>.<br class='manualbr'/>Un sigle, par exemple <abbr title="World Wide Web Consortium"
    197                                                                                                                            lang="en">W3C</abbr>, est lu
    198                                                     lettre par
    199                                                     lettre, tandis que <acronym title="Système de Publication pour Internet">SPIP</acronym> est un acronyme
    200                                                     puisqu&#8217;il
    201                                                     forme un mot qui est lu normalement.
    202                                             </p>
    203 
    204                                             <p><bdo dir="ltr">Texte de gauche à droite</bdo> et <bdo dir="rtl">Texte de droite à gauche</bdo> avec
    205                                                     <code
    206                                                             class='spip_code' dir='ltr'>&lt;bdo&gt;</code>.<br class='manualbr'/>Mise en exposant <sup>2</sup> et
    207                                                     mise
    208                                                     en indice&nbsp;: <abbr>H<sub>2</sub>O</abbr>.<br class='manualbr'/>Et voici une note de bas de page<span
    209                                                             class="spip_note_ref">&nbsp;[<a href='#nb1' class='spip_note' rel='footnote'
    210                                                                                       title='Une note de bas de page est, habituellement, signalée par un numéro placé à&nbsp;(...)'
    211                                                                                       id='nh1'>1</a>]</span>.</p>
    212 
    213                                             <p><img src="local/cache-vignettes/L8xH11/puce-32883.gif" width='8' height='11' class='puce' alt="-"/>&nbsp;Ici,
    214                                                     exemple de raccourci SPIP &#171;&nbsp;<code class='spip_code' dir='ltr'>- </code>&nbsp;&#187;.
    215                                                     Attention, leur
    216                                                     succession ne constitue pas une liste&nbsp;! Pour les listes, voir ci-dessous.</p>
    217 
    218                                             <p>&mdash;&nbsp;Un tiret long, généré par le raccourci SPIP &#171;&nbsp;<code class='spip_code'
    219                                                                                                                           dir='ltr'>--</code>&nbsp;&#187;,
    220                                                     utile pour les dialogues.</p>
    221 
    222                                             <h3 class="spip">Hyperliens</h3>
    223 
    224                                             <p>SPIP distingue les <a href="spip.php?article1" class='spip_in'>liens internes</a> des <a
    225                                                     href="http://checklists.opquast.com/11/criteria/687/" class='spip_out'
    226                                                     title="Bonne pratique Opquast N&#176;188" rel='external'>liens externes</a> dont URLs directes&nbsp;: <a
    227                                                     href="https://www.spip.net" class='spip_url spip_out' rel='external'>https://www.spip.net</a>, et lien
    228                                                     généré
    229                                                     par le raccourci <code class='spip_code' dir='ltr'>[-&gt;site2]</code>&nbsp;: <a href="spip.php?site2"
    230                                                                                                                                      class='spip_out'>site
    231                                                             2</a>.<br class='manualbr'/>Mieux vaut spécifier la langue de destination, par exemple&nbsp;: <a
    232                                                             href="http://checklists.opquast.com/11/criteria/628/" class='spip_out' hreflang='en' rel='external'>Bonne
    233                                                             pratique Opquast N&#176;129</a>.<br class='manualbr'/>Lien vers une définition du glossaire prédéfini&nbsp;:
    234                                                     <a href="http://fr.wikipedia.org/wiki/Wikip%C3%A9dia" class='spip_glossaire'
    235                                                        rel='external'>Wikipédia</a><br
    236                                                             class='manualbr'/>Lien vers un document, avec le raccourci <code class='spip_code'
    237                                                                                                                        dir='ltr'>[-&gt;doc3]</code>&nbsp;:
    238                                                     <a
    239                                                             href="IMG/jpg/doc3.jpg" class='spip_in' type='image/jpeg'>Titre du document</a><br class='manualbr'/>Lien
    240                                                     vers un auteur, avec le raccourci <code class='spip_code' dir='ltr'>[-&gt;auteur1]</code>&nbsp;: <a
    241                                                             href="spip.php?auteur1" class='spip_in'>Webmestre</a><br class='manualbr'/>Courriel&nbsp;: <a
    242                                                             href="mailto:adresse@courriel.net" class='spip_mail'>adresse@courriel.net</a><br class='manualbr'/>Une
    243                                                     ancre vers les citations&nbsp;: <a href="#citations" class='spip_ancre'>#citations</a></p>
    244 
    245                                             <h3 class="spip">Listes</h3>
    246 
    247                                             <p>Liste non ordonnée (<code class='spip_code' dir='ltr'>ul</code>), générée avec le raccourci SPIP &#171;&nbsp;<code
    248                                                     class='spip_code' dir='ltr'>-* </code>&nbsp;&#187;&nbsp;:</p>
    249                                             <ul class="spip">
    250                                                     <li> Élément de liste non numérotée</li>
    251                                                     <li> Élément de liste non numérotée</li>
    252                                                     <li> Élément de liste non numérotée
    253                                                             <ul class="spip">
    254                                                                     <li> Plantes
    255                                                                             <ul class="spip">
    256                                                                                     <li> Ficus</li>
    257                                                                                     <li> Olivier</li>
    258                                                                             </ul>
    259                                                                     </li>
    260                                                                     <li> Animaux de compagnie
    261                                                                             <ul class="spip">
    262                                                                                     <li> Chat</li>
    263                                                                                     <li> Chien</li>
    264                                                                             </ul>
    265                                                                     </li>
    266                                                             </ul>
    267                                                     </li>
    268                                             </ul>
    269                                             <p>Et une liste numérotée (<code class='spip_code' dir='ltr'>ol</code>), générée avec le raccourci SPIP
    270                                                     &#171;&nbsp;<code
    271                                                             class='spip_code' dir='ltr'>-# </code>&nbsp;&#187;&nbsp;:</p>
    272                                             <ol class="spip">
    273                                                     <li> Voici ma main&nbsp;: elle a cinq doigts. En voici deux, en voici trois.<br class='manualbr'/>Le
    274                                                             premier,
    275                                                             ce gros bonhomme, C’est le pouce qu’il se nomme.
    276                                                     </li>
    277                                                     <li> L’index qui montre le chemin, Est le second doigt de la main.</li>
    278                                                     <li> Entre l’index et l’annulaire, Le majeur paraît un grand frère.</li>
    279                                                     <li> L’annulaire porte l’anneau, Avec sa bague, il fait le beau.</li>
    280                                                     <li> Le tout petit auriculaire Marche à côté de l’annulaire.</li>
    281                                             </ol>
    282                                             <p>Regardez mes doigts travailler. Chacun fait son petit métier.</p>
    283 
    284                                             <p>N&#8217;oublions pas les listes de définition, générées avec les balises HTML <code class='spip_code'
    285                                                                                                                                    dir='ltr'>
    286                                                     &lt;dl&gt;</code>, <code class='spip_code' dir='ltr'>&lt;dd&gt;</code>, <code class='spip_code'
    287                                                                                                                             dir='ltr'>
    288                                                     &lt;dt&gt;</code>&nbsp;:
    289                                             </p>
    290                                             <dl class="spip">
    291                                                     <dt>polatouche (n.m.)</dt>
    292                                                     <dd><span class='spip_document_1 spip_documents spip_documents_right' style='float:right; width:63px;'>
    293                         <img src='#CHEMIN{demo/spip.gif}' width='63' height='40' alt=""/></span>Mammifère rongeur
    294                                                             omnivore méconnu d&#8217;Eurasie ou d&#8217;Amérique du Nord, dit &#171;&nbsp;écureuil volant&nbsp;&#187;
    295                                                             car il est capable de planer en ligne droite d&#8217;un arbre à l&#8217;autre grâce à son patagium
    296                                                             (membrane
    297                                                             qui réunit ses pattes à son corps). Pelage gris et blanc.
    298                                                     </dd>
    299                                                     <dt>écureuil (n.m.)</dt>
    300                                                     <dd>Petit rongeur arboricole d&#8217;Europe à longue queue très touffue, excellent grimpeur, capable de
    301                                                             sauts
    302                                                             très étendus, amassant des provisions pour l&#8217;hiver et aisément familier de l&#8217;homme. Pelage
    303                                                             gris
    304                                                             ou roux.
    305                                                     </dd>
    306                                             </dl>
    307                                             <h3 class="spip">Tableaux</h3>
    308                                             <table class="spip" summary="summary">
    309                                                     <caption>Titre du tableau (caption)</caption>
    310                                                     <thead>
    311                                                     <tr class='row_first'>
    312                                                             <th id='idcbd5_c0'>entête</th>
    313                                                             <th id='idcbd5_c1'>entête</th>
    314                                                             <th id='idcbd5_c2'>entête</th>
    315                                                     </tr>
    316                                                     </thead>
    317                                                     <tbody>
    318                                                     <tr class='row_odd odd'>
    319                                                             <td headers='idcbd5_c0'>valeur</td>
    320                                                             <td headers='idcbd5_c1'>valeur</td>
    321                                                             <td headers='idcbd5_c2'>valeur</td>
    322                                                     </tr>
    323                                                     <tr class='row_even even'>
    324                                                             <td headers='idcbd5_c0'>valeur</td>
    325                                                             <td headers='idcbd5_c1'>valeur</td>
    326                                                             <td headers='idcbd5_c2'>valeur</td>
    327                                                     </tr>
    328                                                     <tr class='row_odd odd'>
    329                                                             <td headers='idcbd5_c0'>valeur</td>
    330                                                             <td headers='idcbd5_c1'>valeur</td>
    331                                                             <td headers='idcbd5_c2'>valeur</td>
    332                                                     </tr>
    333                                                     </tbody>
    334                                             </table>
    335                                             <p><a name="citations"></a></p>
    336 
    337                                             <h3 class="spip">Citations</h3>
    338 
    339                                             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <q>Ceci est une citation au fil du texte
    340                                                     (avec la
    341                                                     balise HTML <code class='spip_code' dir='ltr'>&lt;q&gt;</code>)</q>.</p>
    342                                             <blockquote>Ceci est une citation ordinaire, avec la balise HTML <code class='spip_code' dir='ltr'>&lt;blockquote&gt;</code>.
    343                                                     La route est longue mais la voie est libre.
    344                                                     <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
    345                                                             Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
    346                                             </blockquote>
    347                                             <blockquote class="spip">
    348                                                     <p>Ceci est une citation générée avec le raccourci SPIP <code class='spip_code' dir='ltr'>
    349                                                             &lt;quote&gt;</code>.
    350                                                             La route est longue mais la voie est libre.</p>
    351 
    352                                                     <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
    353                                                             Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
    354                                             </blockquote>
    355                                             <blockquote class="spip_poesie">
    356                                                     <div>Je le vis, je rougis, je pâlis à sa vue</div>
    357                                                     <div>Un trouble s’éleva dans mon âme éperdue</div>
    358                                                     <div>Mes yeux ne voyaient plus, je ne pouvais parler</div>
    359                                                     <div>Je sentis tout mon corps et transir et brûler.</div>
    360                                                     <div>&nbsp;</div>
    361                                                     <div>Ceci est une citation du <cite>Phédre</cite> de Racine, générée avec le raccourci&nbsp;SPIP <code
    362                                                             class='spip_code' dir='ltr'>&lt;poesie&gt;</code>, idéal pour les vers des poèmes et chansons.
    363                                                     </div>
    364                                             </blockquote>
    365                                             <p>Maecenas mollis. Et voici du code, généré avec le raccourci SPIP <code class='spip_code' dir='ltr'>&lt;code&gt;</code>&nbsp;:
    366                                             </p>
    367 
    368                                             <div style='text-align: left;' class='spip_code' dir='ltr'><code>&lt;?php<br/>
    369                                                     &nbsp; &nbsp; // ceci est du langage php<br/>
    370                                                     &nbsp; &nbsp; echo &quot;bonjour&quot;;<br/>
    371                                                     ?&gt;</code></div>
    372                                         <textarea readonly='readonly' cols='40' rows='7' class='spip_cadre' dir='ltr'>Le raccourci SPIP &lt;cadre&gt; permet publier des extraits de code que l&#039;on peut facilement copier-coller.
    373 
    374            &lt;?php
    375            // ceci est du langage php
    376            echo &quot;au revoir&quot;;
    377            ?&gt;</textarea>
    378 
    379                                             <p>Sans oublier un <kbd>raccourci-clavier</kbd> (<code class='spip_code' dir='ltr'>&lt;kbd&gt;</code>), un
    380                                                     <samp>extrait de script</samp> (<code class='spip_code' dir='ltr'>&lt;samp&gt;</code>) et une
    381                                                     <var>variable</var> (<code class='spip_code' dir='ltr'>&lt;var&gt;</code>).</p>
    382 
    383                                             <p>Et pour finir en beauté, voici une formule mathématique, générée avec <code class='spip_code'
    384                                                                                                                            dir='ltr'>
    385                                                     &lt;math&gt;</code>&nbsp;:<br
    386                                                     class='autobr'/>
    387                                                     <img src="#CHEMIN{demo/math.png}"
    388                                                          style='vertical-align:middle;' width='85' height='38' alt="a = \sqrt{b^{2} + c^{2}}"
    389                                                          title="a = \sqrt{b^{2} + c^{2}}"/></p>
    390 
    391                                             <h3 class="spip">À éviter</h3>
    392 
    393                                             <p>Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML&nbsp;1.0 Strict&nbsp;:
    394                                                     <basefont>exemple de basefont</basefont>, <font>exemple de font</font>, <u>exemple de u</u>, <s>exemple
    395                                                             de
    396                                                             s</s>, <strike>exemple de strike</strike>, etc. Celles-ci sont déconseillées&nbsp;: <b>exemple de
    397                                                             b</b>, <i>exemple
    398                                                             de i</i>, <big>exemple de big</big>,
    399                                                     <small>exemple de small</small>
    400                                                     , <tt>exemple de tt</tt>.
    401                                             </p>
    402                                     </div>
    403 
    404                                     <hr/>
    405                                     <p class="hyperlien">Voir en ligne : <a href="https://www.spip.net">Lien hypertexte</a></p>
    406 
    407                                     <hr/>
    408                                     <div class="ps surlignable">
    409                                             <p>Ceci est le texte du Post-Scriptum. Cette page fait partie de la <a
    410                                                     href="https://contrib.spip.net/3716"
    411                                                     class='spip_out' rel='external'>base de
    412                                                     démarrage</a> pour SPIP. Voici un autre <a href="http://romy.tetue.net/11" class='spip_out'
    413                                                                                          rel='external'>exemple
    414                                                     de cette charte typo</a>.</p></div>
    415 
    416 
    417                             </div>
    418                             <div class="col-sm-4">
    419                                     <div class="well">
    420                                             <h1>h1. Heading 1</h1>
    421 
    422                                             <h2>h2. Heading 2</h2>
    423 
    424                                             <h3>h3. Heading 3</h3>
    425                                             <h4>h4. Heading 4</h4>
    426                                             <h5>h5. Heading 5</h5>
    427                                             <h6>h6. Heading 6</h6>
    428                                     </div>
    429                                     <h3>Example addresses</h3>
    430                                     <address>
    431                                             <strong>Twitter, Inc.</strong><br>
    432                                             795 Folsom Ave, Suite 600<br>
    433                                             San Francisco, CA 94107<br>
    434                                             <abbr title="Phone">P:</abbr> (123) 456-7890
    435                                     </address>
    436                                     <address>
    437                                             <strong>Full Name</strong><br>
    438                                             <a href="mailto:#">first.last@gmail.com</a>
    439                                     </address>
    440 
    441                             </div>
    442                     </div>
    443                     <hr/>
    444                     <div class="row">
    445                             <div class="col-sm-6">
    446                                     <blockquote>
    447                                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    448                                             <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    449                                     </blockquote>
    450                             </div>
    451                             <div class="col-sm-6">
    452                                     <blockquote class="blockquote-reverse">
    453                                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    454                                             <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    455                                     </blockquote>
    456                             </div>
    457                     </div>
    458                     <div class="notes">
    459                             <div id='nb1'>
    460                                     <p><span class="spip_note_ref">[<a href='#nh1' class='spip_note' title='Notes 1'
    461                                                                        rev='footnote'>1</a>]&nbsp;</span>Une note de bas de page est,
    462                                             habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris en bas de page et
    463                                             proposant un complément d’information. Cette fonctionnalité est automatisée dans SPIP.</p>
    464                             </div>
    465                     </div>
    466 
    467                     <!-- Typography
    468       ================================================== -->
     82  </nav>
     83
     84  <div class="intro py-5 bg-primary text-white">
     85    <div class="intro-content">
     86      <div class="container">
     87        <h1>Bootstrap Components</h1>
     88        <p class="lead mb-4">Default components &amp; utilities.</p>
     89      </div>
     90    </div>
     91  </div>
     92
     93  <main class="main" role="main">
     94    <div class="py-5 bg-white">
     95      <div class="container">
    46996        <div class="row">
    470           <div class="col-lg-12">
    471             <div class="page-header">
    472               <h2 id="type">More Typography (from BS)</h2>
    473             </div>
    474           </div>
    475         </div>
    476 
    477         <!-- Headings -->
    478 
    479         <div class="row">
    480           <div class="col-lg-4">
    481             <div class="bs-component p">
    482               <h1>Heading 1</h1>
    483               <h2>Heading 2</h2>
    484               <h3>Heading 3</h3>
    485               <h4>Heading 4</h4>
    486               <h5>Heading 5</h5>
    487               <h6>Heading 6</h6>
    488               <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    489             </div>
    490           </div>
    491           <div class="col-lg-4">
    492             <div class="bs-component p">
    493               <h2>Example body text</h2>
    494               <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    495               <p><small>This line of text is meant to be treated as fine print.</small></p>
    496               <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
    497               <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
    498               <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
    499             </div>
    500 
    501           </div>
    502           <div class="col-lg-4">
    503             <div class="bs-component p">
    504               <h2>Emphasis classes</h2>
    505               <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    506               <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    507               <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    508               <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
    509               <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    510               <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    511             </div>
    512 
    513           </div>
    514         </div>
    515 
    516         <!-- Blockquotes -->
    517 
    518         <div class="row">
    519           <div class="col-lg-12">
    520             <h2 id="type-blockquotes">Blockquotes</h2>
    521           </div>
    522         </div>
    523         <div class="row">
    524           <div class="col-lg-6">
    525             <div class="bs-component p">
    526               <blockquote>
    527                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    528                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    529               </blockquote>
    530             </div>
    531           </div>
    532           <div class="col-lg-6">
    533             <div class="bs-component p">
    534               <blockquote class="pull-right">
    535                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    536                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    537               </blockquote>
    538             </div>
    539           </div>
    540         </div>
    541 
    542             </div>
    543 
    544       <!-- Navbar
    545       ================================================== -->
    546       <div class="bs-docs-section clearfix">
    547         <div class="row">
    548           <div class="col-lg-12">
    549             <div class="page-header">
    550               <h2 id="navbar">Navbar</h2>
    551             </div>
    552 
    553             <div class="bs-component p">
    554               <nav class="navbar navbar-default">
    555                 <div class="container-fluid">
    556                   <div class="navbar-header">
    557                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    558                       <span class="sr-only">Toggle navigation</span>
    559                       <span class="icon-bar"></span>
    560                       <span class="icon-bar"></span>
    561                       <span class="icon-bar"></span>
     97          <div class="col-md-9">
     98
     99            <div id="alerts">
     100              <h2>Alerts</h2>
     101              <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
     102              <div class="alert alert-primary" role="alert">
     103                <strong>Primary!</strong> This is a primary alert-check it out!
     104              </div>
     105              <div class="alert alert-secondary" role="alert">
     106                <strong>Secondary alert!</strong> This secondary alert is a new addition to the group.
     107              </div>
     108              <div class="alert alert-success" role="alert">
     109                <strong>Well done!</strong> You successfully read this important alert message.
     110              </div>
     111              <div class="alert alert-info" role="alert">
     112                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
     113              </div>
     114              <div class="alert alert-warning" role="alert">
     115                <strong>Warning!</strong> Better check yourself, you're not looking too good.
     116              </div>
     117              <div class="alert alert-danger" role="alert">
     118                <strong>Oh snap!</strong> Change a few things up and try submitting again.
     119              </div>
     120              <p>
     121                <a href="https://getbootstrap.com/docs/4.0/components/alerts/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     122              </p>
     123              <hr class="my-5" />
     124            </div><!-- /#alerts -->
     125
     126            <div id="badges">
     127              <h2>Badges</h2>
     128              <p class="lead">Documentation and examples for badges, our small count and labeling component.</p>
     129
     130              <div class="card mb-4">
     131                <div class="card-body">
     132                  <h5 class="card-title">Examples</h5>
     133                  <h1>Example heading <span class="badge badge-secondary">New</span></h1>
     134                  <h2>Example heading <span class="badge badge-secondary">New</span></h2>
     135                  <h3>Example heading <span class="badge badge-secondary">New</span></h3>
     136                  <h4>Example heading <span class="badge badge-secondary">New</span></h4>
     137                  <h5>Example heading <span class="badge badge-secondary">New</span></h5>
     138                  <h6>Example heading <span class="badge badge-secondary">New</span></h6>
     139
     140                  <p class="mt-3">
     141                    <span class="badge badge-primary">Primary</span>
     142                    <span class="badge badge-secondary">Secondary</span>
     143                    <span class="badge badge-success">Success</span>
     144                    <span class="badge badge-warning">Warning</span>
     145                    <span class="badge badge-danger">Danger</span>
     146                    <span class="badge badge-info">Info</span>
     147                    <span class="badge badge-light">Light</span>
     148                    <span class="badge badge-dark">Dark</span>
     149                  </p>
     150
     151                  <p class="mt-3">
     152                    <span class="badge badge-pill badge-primary">Primary</span>
     153                    <span class="badge badge-pill badge-secondary">Secondary</span>
     154                    <span class="badge badge-pill badge-success">Success</span>
     155                    <span class="badge badge-pill badge-warning">Warning</span>
     156                    <span class="badge badge-pill badge-danger">Danger</span>
     157                    <span class="badge badge-pill badge-info">Info</span>
     158                    <span class="badge badge-pill badge-light">Light</span>
     159                    <span class="badge badge-pill badge-dark">Dark</span>
     160                  </p>
     161                </div>
     162              </div>
     163
     164
     165              <p>
     166                <a href="https://getbootstrap.com/docs/4.0/components/badge/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     167              </p>
     168              <hr class="my-5" />
     169            </div><!-- /#badges -->
     170
     171            <div id="breadcrumb">
     172              <h2>Breadcrumb</h2>
     173              <p class="lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.</p>
     174
     175              <nav aria-label="breadcrumb">
     176                <ol class="breadcrumb">
     177                  <li class="breadcrumb-item active" aria-current="page">Home</li>
     178                </ol>
     179              </nav>
     180              <nav aria-label="breadcrumb">
     181                <ol class="breadcrumb">
     182                  <li class="breadcrumb-item"><a href="#">Home</a></li>
     183                  <li class="breadcrumb-item active" aria-current="page">Library</li>
     184                </ol>
     185              </nav>
     186              <nav aria-label="breadcrumb">
     187                <ol class="breadcrumb">
     188                  <li class="breadcrumb-item"><a href="#">Home</a></li>
     189                  <li class="breadcrumb-item"><a href="#">Library</a></li>
     190                  <li class="breadcrumb-item active" aria-current="page">Data</li>
     191                </ol>
     192              </nav>
     193
     194              <p>
     195                <a href="https://getbootstrap.com/docs/4.0/components/breadcrumb/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     196              </p>
     197              <hr class="my-5" />
     198            </div><!-- /#breadcrumb -->
     199
     200            <div id="buttons">
     201              <h2>Buttons</h2>
     202              <p class="lead">Use Bootstrap's button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
     203              <div class="my-3">
     204                <button class="btn btn-primary btn-lg">Primary</button>
     205                <button class="btn btn-secondary btn-lg">Secondary</button>
     206                <button class="btn btn-success btn-lg">Success</button>
     207                <button class="btn btn-warning btn-lg">Warning</button>
     208                <button class="btn btn-danger btn-lg">Danger</button>
     209                <button class="btn btn-info btn-lg">Info</button>
     210                <button class="btn btn-lg">Default</button>
     211              </div>
     212              <div class="my-3">
     213                <button class="btn btn-primary">Primary</button>
     214                <button class="btn btn-secondary">Secondary</button>
     215                <button class="btn btn-success">Success</button>
     216                <button class="btn btn-warning">Warning</button>
     217                <button class="btn btn-danger">Danger</button>
     218                <button class="btn btn-info">Info</button>
     219                <button class="btn">Default</button>
     220              </div>
     221              <div class="my-3">
     222                <button class="btn btn-primary btn-sm">Primary</button>
     223                <button class="btn btn-secondary btn-sm">Secondary</button>
     224                <button class="btn btn-success btn-sm">Success</button>
     225                <button class="btn btn-warning btn-sm">Warning</button>
     226                <button class="btn btn-danger btn-sm">Danger</button>
     227                <button class="btn btn-info btn-sm">Info</button>
     228                <button class="btn btn-sm">Default</button>
     229              </div>
     230              <div class="my-3">
     231                <button class="btn btn-outline-primary btn-lg">Primary</button>
     232                <button class="btn btn-outline-secondary btn-lg">Secondary</button>
     233                <button class="btn btn-outline-success btn-lg">Success</button>
     234                <button class="btn btn-outline-warning btn-lg">Warning</button>
     235                <button class="btn btn-outline-danger btn-lg">Danger</button>
     236                <button class="btn btn-outline-info btn-lg">Info</button>
     237              </div>
     238              <div class="my-3">
     239                <button class="btn btn-outline-primary">Primary</button>
     240                <button class="btn btn-outline-secondary">Secondary</button>
     241                <button class="btn btn-outline-success">Success</button>
     242                <button class="btn btn-outline-warning">Warning</button>
     243                <button class="btn btn-outline-danger">Danger</button>
     244                <button class="btn btn-outline-info">Info</button>
     245              </div>
     246              <div class="my-3">
     247                <button class="btn btn-outline-primary btn-sm">Primary</button>
     248                <button class="btn btn-outline-secondary btn-sm">Secondary</button>
     249                <button class="btn btn-outline-success btn-sm">Success</button>
     250                <button class="btn btn-outline-warning btn-sm">Warning</button>
     251                <button class="btn btn-outline-danger btn-sm">Danger</button>
     252                <button class="btn btn-outline-info btn-sm">Info</button>
     253              </div>
     254              <p>
     255                <a href="https://getbootstrap.com/docs/4.0/components/buttons/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     256              </p>
     257              <hr class="my-5" />
     258            </div><!-- /#buttons -->
     259
     260            <div id="cards">
     261              <h2>Cards</h2>
     262              <p class="lead">Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.</p>
     263
     264              <div class="row">
     265                <div class="col-md-4">
     266                  <div class="card">
     267                    <img class="card-img-top" src="#CHEMIN{demo/img/demo-1.jpg}" alt="Card image cap">
     268                    <div class="card-body">
     269                      <h5 class="card-title">Card title</h5>
     270                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     271                    </div>
     272                  </div>
     273                </div>
     274                <div class="col-md-4">
     275                  <div class="card">
     276                    <div class="card-body">
     277                      <h5 class="card-title">Card title</h5>
     278                      <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
     279                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     280                      <a href="#" class="card-link">Card link</a>
     281                      <a href="#" class="card-link">Another link</a>
     282                    </div>
     283                  </div>
     284                </div>
     285                <div class="col-md-4">
     286                  <div class="card">
     287                    <div class="card-header">
     288                      Featured
     289                    </div>
     290                    <ul class="list-group list-group-flush">
     291                      <li class="list-group-item">Cras justo odio</li>
     292                      <li class="list-group-item">Dapibus ac facilisis in</li>
     293                      <li class="list-group-item">Vestibulum at eros</li>
     294                    </ul>
     295                  </div>
     296                </div>
     297              </div>
     298
     299              <p class="mt-3">
     300                <a href="https://getbootstrap.com/docs/4.0/components/cards/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     301              </p>
     302              <hr class="my-5" />
     303            </div><!-- /#cards -->
     304
     305            <div id="carousel">
     306              <h2>Carousel</h2>
     307              <p class="lead">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
     308
     309              <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
     310                <ol class="carousel-indicators">
     311                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
     312                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
     313                  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
     314                </ol>
     315                <div class="carousel-inner" role="listbox">
     316                  <div class="carousel-item active">
     317                    <img class="d-block img-fluid" src="#CHEMIN{demo/img/demo-1.jpg}" alt="First slide">
     318                    <div class="carousel-caption d-none d-md-block">
     319                      <h2>Slide 1 title</h2>
     320                      <p>Slide 1 subtitle text</p>
     321                    </div>
     322                  </div>
     323                  <div class="carousel-item">
     324                    <img class="d-block img-fluid" src="#CHEMIN{demo/img/demo-2.jpg}" alt="Second slide">
     325                    <div class="carousel-caption d-none d-md-block">
     326                      <h2>Slide 2 title</h2>
     327                      <p>Slide 2 subtitle text</p>
     328                    </div>
     329                  </div>
     330                  <div class="carousel-item">
     331                    <img class="d-block img-fluid" src="#CHEMIN{demo/img/demo-3.jpg}" alt="Third slide">
     332                    <div class="carousel-caption d-none d-md-block">
     333                      <h2>Slide 3 title</h2>
     334                      <p>Slide 3 subtitle text</p>
     335                    </div>
     336                  </div>
     337                </div>
     338                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
     339                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     340                  <span class="sr-only">Previous</span>
     341                </a>
     342                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     343                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
     344                  <span class="sr-only">Next</span>
     345                </a>
     346              </div>
     347
     348              <p class="mt-3">
     349                <a href="https://getbootstrap.com/docs/4.0/components/carousel/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     350              </p>
     351              <hr class="my-5" />
     352            </div><!-- /#carousel -->
     353
     354            <div id="dropdowns">
     355              <h2>Dropdowns</h2>
     356              <p class="lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.</p>
     357
     358              <div class="card">
     359                <div class="card-body">
     360                  <h5 class="card-title">Examples</h5>
     361
     362                  <div class="btn-group">
     363                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     364                      Action
    562365                    </button>
    563                     <a class="navbar-brand" href="#">Brand</a>
    564                   </div>
    565 
    566                   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    567                     <ul class="nav navbar-nav">
    568                       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    569                       <li><a href="#">Link</a></li>
    570                       <li class="dropdown">
    571                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    572                         <ul class="dropdown-menu" role="menu">
    573                           <li><a href="#">Action</a></li>
    574                           <li><a href="#">Another action</a></li>
    575                           <li><a href="#">Something else here</a></li>
    576                           <li class="divider"></li>
    577                           <li><a href="#">Separated link</a></li>
    578                           <li class="divider"></li>
    579                           <li><a href="#">One more separated link</a></li>
    580                         </ul>
     366                    <div class="dropdown-menu">
     367                      <a class="dropdown-item" href="#">Action</a>
     368                      <a class="dropdown-item" href="#">Another action</a>
     369                      <a class="dropdown-item" href="#">Something else here</a>
     370                      <div class="dropdown-divider"></div>
     371                      <a class="dropdown-item" href="#">Separated link</a>
     372                    </div>
     373                  </div>
     374
     375                  <div class="btn-group">
     376                    <button type="button" class="btn btn-primary">Action</button>
     377                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     378                      <span class="sr-only">Toggle Dropdown</span>
     379                    </button>
     380                    <div class="dropdown-menu">
     381                      <a class="dropdown-item" href="#">Action</a>
     382                      <a class="dropdown-item" href="#">Another action</a>
     383                      <a class="dropdown-item" href="#">Something else here</a>
     384                      <div class="dropdown-divider"></div>
     385                      <a class="dropdown-item" href="#">Separated link</a>
     386                    </div>
     387                  </div>
     388                </div>
     389              </div>
     390
     391              <p class="mt-3">
     392                <a href="https://getbootstrap.com/docs/4.0/components/dropdowns/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     393              </p>
     394              <hr class="my-5" />
     395            </div><!-- /#dropdowns -->
     396
     397            <div id="forms">
     398              <h2>Forms</h2>
     399              <p class="lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
     400
     401              <h3>SPIP Forms</h3>
     402              <div class="ajax">
     403                #FORMULAIRE_CHARTER
     404              </div>
     405
     406              <h3>BootStrap Forms</h3>
     407              <div class="card mb-4">
     408                <div class="card-body">
     409                  <h5 class="card-title">Form controls</h5>
     410                  <form>
     411                    <div class="form-group">
     412                      <label for="exampleInputEmail1">Email address</label>
     413                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
     414                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
     415                    </div>
     416                    <div class="form-group">
     417                      <label for="exampleInputPassword1">Password</label>
     418                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
     419                    </div>
     420                    <div class="form-group">
     421                      <label for="exampleSelect1">Example select</label>
     422                      <select class="form-control" id="exampleSelect1">
     423                        <option>1</option>
     424                        <option>2</option>
     425                        <option>3</option>
     426                        <option>4</option>
     427                        <option>5</option>
     428                      </select>
     429                    </div>
     430                    <div class="form-group">
     431                      <label for="exampleSelect2">Example multiple select</label>
     432                      <select multiple class="form-control" id="exampleSelect2">
     433                        <option>1</option>
     434                        <option>2</option>
     435                        <option>3</option>
     436                        <option>4</option>
     437                        <option>5</option>
     438                      </select>
     439                    </div>
     440                    <div class="form-group">
     441                      <label for="exampleTextarea">Example textarea</label>
     442                      <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
     443                    </div>
     444                    <div class="form-group">
     445                      <label for="exampleInputFile">File input</label>
     446                      <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
     447                      <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
     448                    </div>
     449                    <fieldset class="form-group">
     450                      <legend>Radio buttons</legend>
     451                      <div class="form-check">
     452                        <label class="form-check-label">
     453                          <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
     454                          Option one is this and that—be sure to include why it's great
     455                        </label>
     456                      </div>
     457                      <div class="form-check">
     458                      <label class="form-check-label">
     459                          <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
     460                          Option two can be something else and selecting it will deselect option one
     461                        </label>
     462                      </div>
     463                      <div class="form-check disabled">
     464                      <label class="form-check-label">
     465                          <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
     466                          Option three is disabled
     467                        </label>
     468                      </div>
     469                    </fieldset>
     470                    <div class="form-check">
     471                      <label class="form-check-label">
     472                        <input type="checkbox" class="form-check-input">
     473                        Check me out
     474                      </label>
     475                    </div>
     476                    <button type="submit" class="btn btn-primary">Submit</button>
     477                  </form>
     478                </div>
     479              </div>
     480
     481              <div class="card">
     482                <div class="card-body">
     483                  <h5 class="card-title">Form states</h5>
     484                  <div class="form-group has-success">
     485                    <label class="form-control-label" for="inputSuccess1">Input with success</label>
     486                    <input type="text" class="form-control is-valid" id="inputSuccess1">
     487                    <small class="form-text text-muted">Example help text that remains unchanged.</small>
     488                  </div>
     489
     490                  <div class="form-group has-warning">
     491                    <label class="form-control-label" for="inputWarning1">Input with error</label>
     492                    <input type="text" class="form-control is-invalid" id="inputWarning1">
     493                    <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
     494                    <small class="form-text text-muted">Example help text that remains unchanged.</small>
     495                  </div>
     496
     497                  <div class="form-group has-danger">
     498                    <label class="form-control-label" for="inputDanger1">Input with error</label>
     499                    <input type="text" class="form-control is-invalid" id="inputDanger1">
     500                    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
     501                    <small class="form-text text-muted">Example help text that remains unchanged.</small>
     502                  </div>
     503                </div>
     504              </div>
     505
     506              <p class="mt-3">
     507                <a href="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     508              </p>
     509              <hr class="my-5" />
     510            </div><!-- /#forms -->
     511
     512            <div id="jumbotron">
     513              <h2>Jumbotron</h2>
     514              <p class="lead">Lightweight, flexible component for showcasing hero unit style content.</p>
     515
     516              <div class="jumbotron">
     517                <h1 class="display-4">Hello, traveler!</h1>
     518                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
     519                <hr class="my-4">
     520                <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
     521                <p class="lead">
     522                  <a class="btn btn-primary btn-lg" href="#" role="button">Primary</a>
     523                  <a class="btn btn-secondary btn-lg" href="#" role="button">Secondary</a>
     524                </p>
     525              </div>
     526
     527              <p class="mt-3">
     528                <a href="https://getbootstrap.com/docs/4.0/components/jumbotron/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     529              </p>
     530              <hr class="my-5" />
     531            </div><!-- /#jumbotron -->
     532
     533            <div id="modal">
     534              <h2>Modal</h2>
     535              <p class="lead">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
     536
     537              <div class="card mb-4">
     538                <div class="card-body">
     539                  <h5 class="card-title">Modal components</h5>
     540                  <div class="modal" style="position: relative;top: auto;right: auto;bottom: auto;left: auto;z-index: 1;display: block;">
     541                    <div class="modal-dialog" role="document">
     542                      <div class="modal-content">
     543                        <div class="modal-header">
     544                          <h5 class="modal-title">Modal title</h5>
     545                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     546                            <span aria-hidden="true">×</span>
     547                          </button>
     548                        </div>
     549                        <div class="modal-body">
     550                          <p>Modal body text goes here.</p>
     551                        </div>
     552                        <div class="modal-footer">
     553                          <button type="button" class="btn btn-primary">Save changes</button>
     554                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     555                        </div>
     556                      </div>
     557                    </div>
     558                  </div>
     559                </div>
     560              </div>
     561
     562              <div class="card mb-4">
     563                <div class="card-body">
     564                  <h5 class="card-title">Modal examples</h5>
     565
     566                  <!-- Default Modal -->
     567                  <div class="mb-3">
     568                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
     569                      Default Modal
     570                    </button>
     571                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle" aria-hidden="true">
     572                      <div class="modal-dialog" role="document">
     573                        <div class="modal-content">
     574                          <div class="modal-header">
     575                            <h5 class="modal-title" id="exampleModalTitle">Default Modal</h5>
     576                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     577                              <span aria-hidden="true">&times;</span>
     578                            </button>
     579                          </div>
     580                          <div class="modal-body">
     581                            Woohoo, you're reading this text in a modal!
     582                          </div>
     583                          <div class="modal-footer">
     584                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     585                            <button type="button" class="btn btn-primary">Save changes</button>
     586                          </div>
     587                        </div>
     588                      </div>
     589                    </div>
     590                  </div>
     591
     592                  <!-- Small Modal -->
     593                  <div class="mb-3">
     594                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSmall">
     595                      Small Modal
     596                    </button>
     597                    <div class="modal fade" id="exampleModalSmall" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmallTitle" aria-hidden="true">
     598                      <div class="modal-dialog modal-sm" role="document">
     599                        <div class="modal-content">
     600                          <div class="modal-header">
     601                            <h5 class="modal-title" id="exampleModalSmallTitle">Small Modal</h5>
     602                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     603                              <span aria-hidden="true">&times;</span>
     604                            </button>
     605                          </div>
     606                          <div class="modal-body">
     607                            Woohoo, you're reading this text in a modal!
     608                          </div>
     609                          <div class="modal-footer">
     610                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     611                            <button type="button" class="btn btn-primary">Save changes</button>
     612                          </div>
     613                        </div>
     614                      </div>
     615                    </div>
     616                  </div>
     617
     618                  <!-- Large Modal -->
     619                  <div class="mb-3">
     620                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLarge">
     621                      Large Modal
     622                    </button>
     623                    <div class="modal fade" id="exampleModalLarge" tabindex="-1" role="dialog" aria-labelledby="exampleModalLargeTitle" aria-hidden="true">
     624                      <div class="modal-dialog modal-lg" role="document">
     625                        <div class="modal-content">
     626                          <div class="modal-header">
     627                            <h5 class="modal-title" id="exampleModalLargeTitle">Large Modal</h5>
     628                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     629                              <span aria-hidden="true">&times;</span>
     630                            </button>
     631                          </div>
     632                          <div class="modal-body">
     633                            Woohoo, you're reading this text in a modal!
     634                          </div>
     635                          <div class="modal-footer">
     636                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     637                            <button type="button" class="btn btn-primary">Save changes</button>
     638                          </div>
     639                        </div>
     640                      </div>
     641                    </div>
     642                  </div>
     643
     644                  <!-- Scrolling Modal -->
     645                  <div class="mb-3">
     646                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
     647                      Scrolling Modal
     648                    </button>
     649                    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
     650                      <div class="modal-dialog" role="document">
     651                        <div class="modal-content">
     652                          <div class="modal-header">
     653                            <h5 class="modal-title" id="exampleModalLongTitle">Scrolling Modal</h5>
     654                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     655                              <span aria-hidden="true">&times;</span>
     656                            </button>
     657                          </div>
     658                          <div class="modal-body">
     659                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     660                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     661                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     662                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     663                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     664                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     665                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     666                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     667                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     668                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     669                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     670                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     671                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     672                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     673                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     674                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
     675                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     676                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
     677                          </div>
     678                          <div class="modal-footer">
     679                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     680                            <button type="button" class="btn btn-primary">Save changes</button>
     681                          </div>
     682                        </div>
     683                      </div>
     684                    </div>
     685                  </div>
     686
     687                  <!-- Centered Modal -->
     688                  <div class="mb-3">
     689                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
     690                      Centered Modal
     691                    </button>
     692                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
     693                      <div class="modal-dialog modal-dialog-centered" role="document">
     694                        <div class="modal-content">
     695                          <div class="modal-header">
     696                            <h5 class="modal-title" id="exampleModalCenterTitle">Centered Modal</h5>
     697                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     698                              <span aria-hidden="true">&times;</span>
     699                            </button>
     700                          </div>
     701                          <div class="modal-body">
     702                            Woohoo, you're reading this text in a modal!
     703                          </div>
     704                          <div class="modal-footer">
     705                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     706                            <button type="button" class="btn btn-primary">Save changes</button>
     707                          </div>
     708                        </div>
     709                      </div>
     710                    </div>
     711                  </div>
     712
     713                </div>
     714              </div>
     715
     716              <p class="mt-3">
     717                <a href="https://getbootstrap.com/docs/4.0/components/modal/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     718              </p>
     719              <hr class="my-5" />
     720            </div><!-- /#modal -->
     721
     722            <div id="navs">
     723              <h2>Navs</h2>
     724              <p class="lead">Documentation and examples for how to use Bootstrap’s included navigation components.</p>
     725
     726              <div class="card mb-4">
     727                <div class="card-body">
     728                  <h5 class="card-title">Horizontal</h5>
     729                  <ul class="nav">
     730                    <li class="nav-item">
     731                      <a class="nav-link active" href="#">Active</a>
     732                    </li>
     733                    <li class="nav-item">
     734                      <a class="nav-link" href="#">Link</a>
     735                    </li>
     736                    <li class="nav-item">
     737                      <a class="nav-link" href="#">Link</a>
     738                    </li>
     739                    <li class="nav-item">
     740                      <a class="nav-link disabled" href="#">Disabled</a>
     741                    </li>
     742                  </ul>
     743                </div>
     744              </div>
     745
     746              <div class="card mb-4">
     747                <div class="card-body">
     748                  <h5 class="card-title">Vertical</h5>
     749                  <ul class="nav flex-column">
     750                    <li class="nav-item">
     751                      <a class="nav-link active" href="#">Active</a>
     752                    </li>
     753                    <li class="nav-item">
     754                      <a class="nav-link" href="#">Link</a>
     755                    </li>
     756                    <li class="nav-item">
     757                      <a class="nav-link" href="#">Link</a>
     758                    </li>
     759                    <li class="nav-item">
     760                      <a class="nav-link disabled" href="#">Disabled</a>
     761                    </li>
     762                  </ul>
     763                </div>
     764              </div>
     765
     766              <div class="card mb-4">
     767                <div class="card-body">
     768                  <h5 class="card-title">Tabs</h5>
     769                  <ul class="nav nav-tabs">
     770                    <li class="nav-item">
     771                      <a class="nav-link active" href="#">Active</a>
     772                    </li>
     773                    <li class="nav-item">
     774                      <a class="nav-link" href="#">Link</a>
     775                    </li>
     776                    <li class="nav-item">
     777                      <a class="nav-link" href="#">Link</a>
     778                    </li>
     779                    <li class="nav-item">
     780                      <a class="nav-link disabled" href="#">Disabled</a>
     781                    </li>
     782                  </ul>
     783                </div>
     784              </div>
     785
     786              <div class="card mb-4">
     787                <div class="card-body">
     788                  <h5 class="card-title">Pills</h5>
     789                  <ul class="nav nav-pills">
     790                    <li class="nav-item">
     791                      <a class="nav-link active" href="#">Active</a>
     792                    </li>
     793                    <li class="nav-item">
     794                      <a class="nav-link" href="#">Link</a>
     795                    </li>
     796                    <li class="nav-item">
     797                      <a class="nav-link" href="#">Link</a>
     798                    </li>
     799                    <li class="nav-item">
     800                      <a class="nav-link disabled" href="#">Disabled</a>
     801                    </li>
     802                  </ul>
     803                </div>
     804              </div>
     805
     806              <p class="mt-3">
     807                <a href="https://getbootstrap.com/docs/4.0/components/navs/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     808              </p>
     809              <hr class="my-5" />
     810            </div><!-- /#navs -->
     811
     812            <div id="navbar">
     813              <h2>Navbar</h2>
     814              <p class="lead">Documentation and examples for Bootstrap’s powerful and responsive navbar. Includes support for branding, navigation, and more.</p>
     815
     816              <div class="mb-4">
     817                <h5>Small navbar</h5>
     818                <nav class="navbar navbar-sm navbar-expand-lg navbar-light bg-light">
     819                  <a class="navbar-brand" href="#">SPIP</a>
     820                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     821                    <span class="navbar-toggler-icon"></span>
     822                  </button>
     823
     824                  <div class="collapse navbar-collapse">
     825                    <ul class="navbar-nav mr-auto">
     826                      <li class="nav-item active">
     827                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     828                      </li>
     829                      <li class="nav-item">
     830                        <a class="nav-link" href="#">Link</a>
     831                      </li>
     832                      <li class="nav-item dropdown">
     833                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     834                          Dropdown
     835                        </a>
     836                        <div class="dropdown-menu">
     837                          <a class="dropdown-item" href="#">Action</a>
     838                          <a class="dropdown-item" href="#">Another action</a>
     839                          <div class="dropdown-divider"></div>
     840                          <a class="dropdown-item" href="#">Something else here</a>
     841                        </div>
     842                      </li>
     843                      <li class="nav-item">
     844                        <a class="nav-link disabled" href="#">Disabled</a>
    581845                      </li>
    582846                    </ul>
    583                     <form class="navbar-form navbar-left" role="search">
    584                       <div class="form-group">
    585                         <input type="text" class="form-control" placeholder="Search">
    586                       </div>
    587                       <button type="submit" class="btn btn-default">Submit</button>
     847                    <form class="form-inline my-2 my-lg-0">
     848                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     849                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    588850                    </form>
    589                     <ul class="nav navbar-nav navbar-right">
    590                       <li><a href="#">Link</a></li>
     851                  </div>
     852                </nav>
     853              </div>
     854
     855              <div class="mb-4">
     856                <h5>Medium navbar</h5>
     857                <nav class="navbar navbar-expand-lg navbar-light bg-light">
     858                  <a class="navbar-brand" href="#">SPIP</a>
     859                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     860                    <span class="navbar-toggler-icon"></span>
     861                  </button>
     862
     863                  <div class="collapse navbar-collapse">
     864                    <ul class="navbar-nav mr-auto">
     865                      <li class="nav-item active">
     866                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     867                      </li>
     868                      <li class="nav-item">
     869                        <a class="nav-link" href="#">Link</a>
     870                      </li>
     871                      <li class="nav-item dropdown">
     872                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     873                          Dropdown
     874                        </a>
     875                        <div class="dropdown-menu">
     876                          <a class="dropdown-item" href="#">Action</a>
     877                          <a class="dropdown-item" href="#">Another action</a>
     878                          <div class="dropdown-divider"></div>
     879                          <a class="dropdown-item" href="#">Something else here</a>
     880                        </div>
     881                      </li>
     882                      <li class="nav-item">
     883                        <a class="nav-link disabled" href="#">Disabled</a>
     884                      </li>
    591885                    </ul>
    592                   </div>
    593                 </div>
    594               </nav>
    595             </div>
    596 
    597             <div class="bs-component p">
    598               <nav class="navbar navbar-inverse">
    599                 <div class="container-fluid">
    600                   <div class="navbar-header">
    601                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
    602                       <span class="sr-only">Toggle navigation</span>
    603                       <span class="icon-bar"></span>
    604                       <span class="icon-bar"></span>
    605                       <span class="icon-bar"></span>
    606                     </button>
    607                     <a class="navbar-brand" href="#">Brand</a>
    608                   </div>
    609 
    610                   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
    611                     <ul class="nav navbar-nav">
    612                       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    613                       <li><a href="#">Link</a></li>
    614                       <li class="dropdown">
    615                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    616                         <ul class="dropdown-menu" role="menu">
    617                           <li><a href="#">Action</a></li>
    618                           <li><a href="#">Another action</a></li>
    619                           <li><a href="#">Something else here</a></li>
    620                           <li class="divider"></li>
    621                           <li><a href="#">Separated link</a></li>
    622                           <li class="divider"></li>
    623                           <li><a href="#">One more separated link</a></li>
    624                         </ul>
     886                    <form class="form-inline my-2 my-lg-0">
     887                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     888                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     889                    </form>
     890                  </div>
     891                </nav>
     892              </div>
     893
     894              <div class="mb-4">
     895                <h5>Large navbar</h5>
     896                <nav class="navbar navbar-lg navbar-expand-lg navbar-light bg-light">
     897                  <a class="navbar-brand" href="#">SPIP</a>
     898                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     899                    <span class="navbar-toggler-icon"></span>
     900                  </button>
     901
     902                  <div class="collapse navbar-collapse">
     903                    <ul class="navbar-nav mr-auto">
     904                      <li class="nav-item active">
     905                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     906                      </li>
     907                      <li class="nav-item">
     908                        <a class="nav-link" href="#">Link</a>
     909                      </li>
     910                      <li class="nav-item dropdown">
     911                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     912                          Dropdown
     913                        </a>
     914                        <div class="dropdown-menu">
     915                          <a class="dropdown-item" href="#">Action</a>
     916                          <a class="dropdown-item" href="#">Another action</a>
     917                          <div class="dropdown-divider"></div>
     918                          <a class="dropdown-item" href="#">Something else here</a>
     919                        </div>
     920                      </li>
     921                      <li class="nav-item">
     922                        <a class="nav-link disabled" href="#">Disabled</a>
    625923                      </li>
    626924                    </ul>
    627                     <form class="navbar-form navbar-left" role="search">
    628                       <div class="form-group">
    629                         <input type="text" class="form-control" placeholder="Search">
    630                       </div>
    631                       <button type="submit" class="btn btn-default">Submit</button>
     925                    <form class="form-inline my-2 my-lg-0">
     926                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     927                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    632928                    </form>
    633                     <ul class="nav navbar-nav navbar-right">
    634                       <li><a href="#">Link</a></li>
     929                  </div>
     930                </nav>
     931              </div>
     932
     933              <div class="mb-4">
     934                <h5>Coloured navbar</h5>
     935                <nav class="navbar navbar-expand-lg navbar-light bg-light">
     936                  <a class="navbar-brand" href="#">SPIP</a>
     937                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     938                    <span class="navbar-toggler-icon"></span>
     939                  </button>
     940
     941                  <div class="collapse navbar-collapse">
     942                    <ul class="navbar-nav mr-auto">
     943                      <li class="nav-item active">
     944                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     945                      </li>
     946                      <li class="nav-item">
     947                        <a class="nav-link" href="#">Link</a>
     948                      </li>
     949                      <li class="nav-item dropdown">
     950                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     951                          Dropdown
     952                        </a>
     953                        <div class="dropdown-menu">
     954                          <a class="dropdown-item" href="#">Action</a>
     955                          <a class="dropdown-item" href="#">Another action</a>
     956                          <div class="dropdown-divider"></div>
     957                          <a class="dropdown-item" href="#">Something else here</a>
     958                        </div>
     959                      </li>
     960                      <li class="nav-item">
     961                        <a class="nav-link disabled" href="#">Disabled</a>
     962                      </li>
    635963                    </ul>
    636                   </div>
    637                 </div>
    638               </nav>
    639             </div><!-- /example -->
    640 
    641           </div>
    642         </div>
    643       </div>
    644 
    645 
    646       <!-- Buttons
    647       ================================================== -->
    648       <div class="bs-docs-section">
    649         <div class="page-header">
    650           <div class="row">
    651             <div class="col-lg-12">
    652               <h2 id="buttons">Buttons</h2>
    653             </div>
    654           </div>
    655         </div>
    656 
    657         <div class="row">
    658           <div class="col-lg-6">
    659 
    660             <p class="bs-component p">
    661               <a href="#" class="btn btn-default">Default</a>
    662               <a href="#" class="btn btn-primary">Primary</a>
    663               <a href="#" class="btn btn-success">Success</a>
    664               <a href="#" class="btn btn-info">Info</a>
    665               <a href="#" class="btn btn-warning">Warning</a>
    666               <a href="#" class="btn btn-danger">Danger</a>
    667               <a href="#" class="btn btn-link">Link</a>
    668             </p>
    669 
    670             <p class="bs-component p">
    671               <a href="#" class="btn btn-default disabled">Default</a>
    672               <a href="#" class="btn btn-primary disabled">Primary</a>
    673               <a href="#" class="btn btn-success disabled">Success</a>
    674               <a href="#" class="btn btn-info disabled">Info</a>
    675               <a href="#" class="btn btn-warning disabled">Warning</a>
    676               <a href="#" class="btn btn-danger disabled">Danger</a>
    677               <a href="#" class="btn btn-link disabled">Link</a>
    678             </p>
    679 
    680 
    681             <div style="margin-bottom: 15px;">
    682               <div class="btn-toolbar bs-component" style="margin: 0;">
    683                 <div class="btn-group">
    684                   <a href="#" class="btn btn-default">Default</a>
    685                   <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    686                   <ul class="dropdown-menu">
    687                     <li><a href="#">Action</a></li>
    688                     <li><a href="#">Another action</a></li>
    689                     <li><a href="#">Something else here</a></li>
    690                     <li class="divider"></li>
    691                     <li><a href="#">Separated link</a></li>
    692                   </ul>
    693                 </div>
    694 
    695                 <div class="btn-group">
    696                   <a href="#" class="btn btn-primary">Primary</a>
    697                   <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    698                   <ul class="dropdown-menu">
    699                     <li><a href="#">Action</a></li>
    700                     <li><a href="#">Another action</a></li>
    701                     <li><a href="#">Something else here</a></li>
    702                     <li class="divider"></li>
    703                     <li><a href="#">Separated link</a></li>
    704                   </ul>
    705                 </div>
    706 
    707                 <div class="btn-group">
    708                   <a href="#" class="btn btn-success">Success</a>
    709                   <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    710                   <ul class="dropdown-menu">
    711                     <li><a href="#">Action</a></li>
    712                     <li><a href="#">Another action</a></li>
    713                     <li><a href="#">Something else here</a></li>
    714                     <li class="divider"></li>
    715                     <li><a href="#">Separated link</a></li>
    716                   </ul>
    717                 </div>
    718 
    719                 <div class="btn-group">
    720                   <a href="#" class="btn btn-info">Info</a>
    721                   <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    722                   <ul class="dropdown-menu">
    723                     <li><a href="#">Action</a></li>
    724                     <li><a href="#">Another action</a></li>
    725                     <li><a href="#">Something else here</a></li>
    726                     <li class="divider"></li>
    727                     <li><a href="#">Separated link</a></li>
    728                   </ul>
    729                 </div>
    730 
    731                 <div class="btn-group">
    732                   <a href="#" class="btn btn-warning">Warning</a>
    733                   <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    734                   <ul class="dropdown-menu">
    735                     <li><a href="#">Action</a></li>
    736                     <li><a href="#">Another action</a></li>
    737                     <li><a href="#">Something else here</a></li>
    738                     <li class="divider"></li>
    739                     <li><a href="#">Separated link</a></li>
    740                   </ul>
    741                 </div>
    742               </div>
    743             </div>
    744 
    745             <p class="bs-component p">
    746               <a href="#" class="btn btn-primary btn-lg">Large button</a>
    747               <a href="#" class="btn btn-primary">Default button</a>
    748               <a href="#" class="btn btn-primary btn-sm">Small button</a>
    749               <a href="#" class="btn btn-primary btn-xs">Mini button</a>
    750             </p>
    751 
    752           </div>
    753           <div class="col-lg-6">
    754 
    755             <p class="bs-component p">
    756               <a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>
    757             </p>
    758 
    759 
    760             <div class="bs-component p" style="margin-bottom: 15px;">
    761               <div class="btn-group btn-group-justified">
    762                 <a href="#" class="btn btn-default">Left</a>
    763                 <a href="#" class="btn btn-default">Middle</a>
    764                 <a href="#" class="btn btn-default">Right</a>
    765               </div>
    766             </div>
    767 
    768             <div class="bs-component p" style="margin-bottom: 15px;">
    769               <div class="btn-toolbar">
    770                 <div class="btn-group">
    771                   <a href="#" class="btn btn-default">1</a>
    772                   <a href="#" class="btn btn-default">2</a>
    773                   <a href="#" class="btn btn-default">3</a>
    774                   <a href="#" class="btn btn-default">4</a>
    775                 </div>
    776 
    777                 <div class="btn-group">
    778                   <a href="#" class="btn btn-default">5</a>
    779                   <a href="#" class="btn btn-default">6</a>
    780                   <a href="#" class="btn btn-default">7</a>
    781                 </div>
    782 
    783                 <div class="btn-group">
    784                   <a href="#" class="btn btn-default">8</a>
    785                   <div class="btn-group">
    786                     <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    787                       Dropdown
    788                       <span class="caret"></span>
    789                     </a>
    790                     <ul class="dropdown-menu">
    791                       <li><a href="#">Dropdown link</a></li>
    792                       <li><a href="#">Dropdown link</a></li>
    793                       <li><a href="#">Dropdown link</a></li>
    794                      </ul>
    795                   </div>
    796                 </div>
    797               </div>
    798             </div>
    799 
    800             <div class="bs-component p">
    801               <div class="btn-group-vertical">
    802                   <a href="#" class="btn btn-default">Button</a>
    803                   <a href="#" class="btn btn-default">Button</a>
    804                   <a href="#" class="btn btn-default">Button</a>
    805                   <a href="#" class="btn btn-default">Button</a>
    806               </div>
    807             </div>
    808 
    809           </div>
    810         </div>
    811       </div>
    812 
    813 
    814             <!-- Forms
    815       ================================================== -->
    816             <div class="bs-docs-section">
    817                     <div class="row">
    818                             <div class="col-lg-12">
    819                                     <div class="page-header">
    820                                             <h2 id="forms">SPIP Forms</h2>
    821                                     </div>
    822                             </div>
    823                     </div>
    824 
    825                     <div class="row">
    826                             <div class="col-sm-8">
    827                                     #FORMULAIRE_CHARTER
    828                             </div>
    829                     </div>
    830 
    831 
    832                     <div class="row">
    833                             <div class="col-lg-12">
    834                                     <div class="page-header">
    835                                             <h2>BootStrap Forms</h2>
    836                                     </div>
    837                             </div>
    838                     </div>
    839 
    840                     <div class="row">
    841                             <div class="col-lg-6">
    842                                     <div class="well bs-component">
    843                                             <form class="form-horizontal">
    844                                                     <fieldset>
    845                                                             <legend>Legend</legend>
    846                                                             <div class="form-group">
    847                                                                     <label for="inputEmail" class="col-lg-2 control-label">Email</label>
    848 
    849                                                                     <div class="col-lg-10">
    850                                                                             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
    851                                                                     </div>
    852                                                             </div>
    853                                                             <div class="form-group">
    854                                                                     <label for="inputPassword" class="col-lg-2 control-label">Password</label>
    855 
    856                                                                     <div class="col-lg-10">
    857                                                                             <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    858 
    859                                                                             <div class="checkbox">
    860                                                                                     <label>
    861                                                                                             <input type="checkbox"> Checkbox
    862                                                                                     </label>
    863                                                                             </div>
    864                                                                     </div>
    865                                                             </div>
    866                                                             <div class="form-group">
    867                                                                     <label for="textArea" class="col-lg-2 control-label">Textarea</label>
    868 
    869                                                                     <div class="col-lg-10">
    870                                                                             <textarea class="form-control" rows="3" id="textArea"></textarea>
    871                                                                             <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
    872                                                                     </div>
    873                                                             </div>
    874                                                             <div class="form-group">
    875                                                                     <label class="col-lg-2 control-label">Radios</label>
    876 
    877                                                                     <div class="col-lg-10">
    878                                                                             <div class="radio">
    879                                                                                     <label>
    880                                                                                             <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
    881                                                                                             Option one is this
    882                                                                                     </label>
    883                                                                             </div>
    884                                                                             <div class="radio">
    885                                                                                     <label>
    886                                                                                             <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    887                                                                                             Option two can be something else
    888                                                                                     </label>
    889                                                                             </div>
    890                                                                     </div>
    891                                                             </div>
    892                                                             <div class="form-group">
    893                                                                     <label for="select" class="col-lg-2 control-label">Selects</label>
    894 
    895                                                                     <div class="col-lg-10">
    896                                                                             <select class="form-control" id="select">
    897                                                                                     <option>1</option>
    898                                                                                     <option>2</option>
    899                                                                                     <option>3</option>
    900                                                                                     <option>4</option>
    901                                                                                     <option>5</option>
    902                                                                             </select>
    903                                                                             <br>
    904                                                                             <select multiple="" class="form-control">
    905                                                                                     <option>1</option>
    906                                                                                     <option>2</option>
    907                                                                                     <option>3</option>
    908                                                                                     <option>4</option>
    909                                                                                     <option>5</option>
    910                                                                             </select>
    911                                                                     </div>
    912                                                             </div>
    913                                                             <div class="form-group">
    914                                                                     <div class="col-lg-10 col-lg-offset-2">
    915                                                                             <button type="reset" class="btn btn-default">Cancel</button>
    916                                                                             <button type="submit" class="btn btn-primary">Submit</button>
    917                                                                     </div>
    918                                                             </div>
    919                                                     </fieldset>
    920                                             </form>
    921                                     </div>
    922                             </div>
    923                             <div class="col-lg-4 col-lg-offset-1">
    924 
    925                                     <form class="bs-component p">
    926                                             <div class="form-group">
    927                                                     <label class="control-label" for="focusedInput">Focused input</label>
    928                                                     <input class="form-control" id="focusedInput" type="text" value="This is focused...">
    929                                             </div>
    930 
    931                                             <div class="form-group">
    932                                                     <label class="control-label" for="disabledInput">Disabled input</label>
    933                                                     <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..."
    934                                                            disabled="">
    935                                             </div>
    936 
    937                                             <div class="form-group has-warning">
    938                                                     <label class="control-label" for="inputWarning">Input warning</label>
    939                                                     <input type="text" class="form-control" id="inputWarning">
    940                                             </div>
    941 
    942                                             <div class="form-group has-error">
    943                                                     <label class="control-label" for="inputError">Input error</label>
    944                                                     <input type="text" class="form-control" id="inputError">
    945                                             </div>
    946 
    947                                             <div class="form-group has-success">
    948                                                     <label class="control-label" for="inputSuccess">Input success</label>
    949                                                     <input type="text" class="form-control" id="inputSuccess">
    950                                             </div>
    951 
    952                                             <div class="form-group">
    953                                                     <label class="control-label" for="inputLarge">Large input</label>
    954                                                     <input class="form-control input-lg" type="text" id="inputLarge">
    955                                             </div>
    956 
    957                                             <div class="form-group">
    958                                                     <label class="control-label" for="inputDefault">Default input</label>
    959                                                     <input type="text" class="form-control" id="inputDefault">
    960                                             </div>
    961 
    962                                             <div class="form-group">
    963                                                     <label class="control-label" for="inputSmall">Small input</label>
    964                                                     <input class="form-control input-sm" type="text" id="inputSmall">
    965                                             </div>
    966 
    967                                             <div class="form-group">
    968                                                     <label class="control-label">Input addons</label>
    969 
    970                                                     <div class="input-group">
    971                                                             <span class="input-group-addon">$</span>
    972                                                             <input type="text" class="form-control">
    973                                    <span class="input-group-btn">
    974                                      <button class="btn btn-default" type="button">Button</button>
    975                                    </span>
    976                                                     </div>
    977                                             </div>
    978                                     </form>
    979 
    980                             </div>
    981                     </div>
    982             </div>
    983 
    984 
    985             <!-- Tables
    986         ================================================== -->
    987       <div class="bs-docs-section">
    988 
    989         <div class="row">
    990           <div class="col-lg-12">
    991             <div class="page-header">
    992               <h2 id="tables">Tables</h2>
    993             </div>
    994 
    995             <div class="bs-component p">
    996               <table class="table table-striped table-hover ">
     964                    <form class="form-inline my-2 my-lg-0">
     965                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     966                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     967                    </form>
     968                  </div>
     969                </nav>
     970
     971                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     972                  <a class="navbar-brand" href="#">SPIP</a>
     973                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     974                    <span class="navbar-toggler-icon"></span>
     975                  </button>
     976
     977                  <div class="collapse navbar-collapse">
     978                    <ul class="navbar-nav mr-auto">
     979                      <li class="nav-item active">
     980                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     981                      </li>
     982                      <li class="nav-item">
     983                        <a class="nav-link" href="#">Link</a>
     984                      </li>
     985                      <li class="nav-item dropdown">
     986                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     987                          Dropdown
     988                        </a>
     989                        <div class="dropdown-menu">
     990                          <a class="dropdown-item" href="#">Action</a>
     991                          <a class="dropdown-item" href="#">Another action</a>
     992                          <div class="dropdown-divider"></div>
     993                          <a class="dropdown-item" href="#">Something else here</a>
     994                        </div>
     995                      </li>
     996                      <li class="nav-item">
     997                        <a class="nav-link disabled" href="#">Disabled</a>
     998                      </li>
     999                    </ul>
     1000                    <form class="form-inline my-2 my-lg-0">
     1001                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     1002                      <button class="btn btn-outline-white my-2 my-sm-0" type="submit">Search</button>
     1003                    </form>
     1004                  </div>
     1005                </nav>
     1006
     1007                <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     1008                  <a class="navbar-brand" href="#">SPIP</a>
     1009                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     1010                    <span class="navbar-toggler-icon"></span>
     1011                  </button>
     1012
     1013                  <div class="collapse navbar-collapse">
     1014                    <ul class="navbar-nav mr-auto">
     1015                      <li class="nav-item active">
     1016                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     1017                      </li>
     1018                      <li class="nav-item">
     1019                        <a class="nav-link" href="#">Link</a>
     1020                      </li>
     1021                      <li class="nav-item dropdown">
     1022                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     1023                          Dropdown
     1024                        </a>
     1025                        <div class="dropdown-menu">
     1026                          <a class="dropdown-item" href="#">Action</a>
     1027                          <a class="dropdown-item" href="#">Another action</a>
     1028                          <div class="dropdown-divider"></div>
     1029                          <a class="dropdown-item" href="#">Something else here</a>
     1030                        </div>
     1031                      </li>
     1032                      <li class="nav-item">
     1033                        <a class="nav-link disabled" href="#">Disabled</a>
     1034                      </li>
     1035                    </ul>
     1036                    <form class="form-inline my-2 my-lg-0">
     1037                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     1038                      <button class="btn btn-outline-white my-2 my-sm-0" type="submit">Search</button>
     1039                    </form>
     1040                  </div>
     1041                </nav>
     1042
     1043                <nav class="navbar navbar-expand-lg navbar-dark bg-info">
     1044                  <a class="navbar-brand" href="#">SPIP</a>
     1045                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     1046                    <span class="navbar-toggler-icon"></span>
     1047                  </button>
     1048
     1049                  <div class="collapse navbar-collapse">
     1050                    <ul class="navbar-nav mr-auto">
     1051                      <li class="nav-item active">
     1052                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     1053                      </li>
     1054                      <li class="nav-item">
     1055                        <a class="nav-link" href="#">Link</a>
     1056                      </li>
     1057                      <li class="nav-item dropdown">
     1058                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     1059                          Dropdown
     1060                        </a>
     1061                        <div class="dropdown-menu">
     1062                          <a class="dropdown-item" href="#">Action</a>
     1063                          <a class="dropdown-item" href="#">Another action</a>
     1064                          <div class="dropdown-divider"></div>
     1065                          <a class="dropdown-item" href="#">Something else here</a>
     1066                        </div>
     1067                      </li>
     1068                      <li class="nav-item">
     1069                        <a class="nav-link disabled" href="#">Disabled</a>
     1070                      </li>
     1071                    </ul>
     1072                    <form class="form-inline my-2 my-lg-0">
     1073                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     1074                      <button class="btn btn-outline-white my-2 my-sm-0" type="submit">Search</button>
     1075                    </form>
     1076                  </div>
     1077                </nav>
     1078
     1079                <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
     1080                  <a class="navbar-brand" href="#">SPIP</a>
     1081                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     1082                    <span class="navbar-toggler-icon"></span>
     1083                  </button>
     1084
     1085                  <div class="collapse navbar-collapse">
     1086                    <ul class="navbar-nav mr-auto">
     1087                      <li class="nav-item active">
     1088                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     1089                      </li>
     1090                      <li class="nav-item">
     1091                        <a class="nav-link" href="#">Link</a>
     1092                      </li>
     1093                      <li class="nav-item dropdown">
     1094                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     1095                          Dropdown
     1096                        </a>
     1097                        <div class="dropdown-menu">
     1098                          <a class="dropdown-item" href="#">Action</a>
     1099                          <a class="dropdown-item" href="#">Another action</a>
     1100                          <div class="dropdown-divider"></div>
     1101                          <a class="dropdown-item" href="#">Something else here</a>
     1102                        </div>
     1103                      </li>
     1104                      <li class="nav-item">
     1105                        <a class="nav-link disabled" href="#">Disabled</a>
     1106                      </li>
     1107                    </ul>
     1108                    <form class="form-inline my-2 my-lg-0">
     1109                      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     1110                      <button class="btn btn-outline-white my-2 my-sm-0" type="submit">Search</button>
     1111                    </form>
     1112                  </div>
     1113                </nav>
     1114              </div>
     1115
     1116              <p class="mt-3">
     1117                <a href="https://getbootstrap.com/docs/4.0/components/navbar/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1118              </p>
     1119              <hr class="my-5" />
     1120            </div><!-- /#navbar -->
     1121
     1122            <div id="pagination">
     1123              <h2>Pagination</h2>
     1124              <p class="lead">Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
     1125
     1126              <div class="card mb-4">
     1127                <div class="card-body">
     1128                  <h5 class="card-title">Small pagination</h5>
     1129
     1130                  <nav>
     1131                    <ul class="pagination pagination-sm">
     1132                      <li class="page-item disabled">
     1133                        <a class="page-link" href="#" tabindex="-1">Previous</a>
     1134                      </li>
     1135                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
     1136                      <li class="page-item"><a class="page-link" href="#">2</a></li>
     1137                      <li class="page-item"><a class="page-link" href="#">3</a></li>
     1138                      <li class="page-item">
     1139                        <a class="page-link" href="#">Next</a>
     1140                      </li>
     1141                    </ul>
     1142                  </nav>
     1143                </div>
     1144              </div>
     1145
     1146              <div class="card mb-4">
     1147                <div class="card-body">
     1148                  <h5 class="card-title">Medium pagination</h5>
     1149
     1150                  <nav>
     1151                    <ul class="pagination">
     1152                      <li class="page-item disabled">
     1153                        <a class="page-link" href="#" tabindex="-1">Previous</a>
     1154                      </li>
     1155                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
     1156                      <li class="page-item"><a class="page-link" href="#">2</a></li>
     1157                      <li class="page-item"><a class="page-link" href="#">3</a></li>
     1158                      <li class="page-item">
     1159                        <a class="page-link" href="#">Next</a>
     1160                      </li>
     1161                    </ul>
     1162                  </nav>
     1163                </div>
     1164              </div>
     1165
     1166              <div class="card mb-4">
     1167                <div class="card-body">
     1168                  <h5 class="card-title">Large pagination</h5>
     1169
     1170                  <nav>
     1171                    <ul class="pagination pagination-lg">
     1172                      <li class="page-item disabled">
     1173                        <a class="page-link" href="#" tabindex="-1">Previous</a>
     1174                      </li>
     1175                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
     1176                      <li class="page-item"><a class="page-link" href="#">2</a></li>
     1177                      <li class="page-item"><a class="page-link" href="#">3</a></li>
     1178                      <li class="page-item">
     1179                        <a class="page-link" href="#">Next</a>
     1180                      </li>
     1181                    </ul>
     1182                  </nav>
     1183                </div>
     1184              </div>
     1185
     1186              <p class="mt-3">
     1187                <a href="https://getbootstrap.com/docs/4.0/components/pagination/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1188              </p>
     1189              <hr class="my-5" />
     1190            </div><!-- /#pagination -->
     1191
     1192            <div id="popovers">
     1193              <h2>Popovers</h2>
     1194              <p class="lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.</p>
     1195
     1196              <div class="card mb-4">
     1197                <div class="card-body">
     1198                  <h5 class="card-title">Examples</h5>
     1199
     1200                  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     1201                    Popover on top
     1202                  </button>
     1203
     1204                  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     1205                    Popover on right
     1206                  </button>
     1207
     1208                  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
     1209                  sagittis lacus vel augue laoreet rutrum faucibus.">
     1210                    Popover on bottom
     1211                  </button>
     1212
     1213                  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
     1214                    Popover on left
     1215                  </button>
     1216                </div>
     1217              </div>
     1218
     1219              <p class="mt-3">
     1220                <a href="https://getbootstrap.com/docs/4.0/components/popovers/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1221              </p>
     1222              <hr class="my-5" />
     1223            </div><!-- /#popovers -->
     1224
     1225            <div id="progress">
     1226              <h2>Progress</h2>
     1227              <p class="lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.</p>
     1228
     1229              <div class="card mb-4">
     1230                <div class="card-body">
     1231                  <h5 class="card-title">Examples</h5>
     1232                  <div class="progress mb-3">
     1233                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
     1234                  </div>
     1235                  <div class="progress mb-3">
     1236                    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
     1237                  </div>
     1238                  <div class="progress mb-3">
     1239                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
     1240                  </div>
     1241                  <div class="progress mb-3">
     1242                    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
     1243                  </div>
     1244                </div>
     1245              </div>
     1246
     1247              <p class="mt-3">
     1248                <a href="https://getbootstrap.com/docs/4.0/components/progress/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1249              </p>
     1250              <hr class="my-5" />
     1251            </div><!-- /#progress -->
     1252
     1253            <div id="tables">
     1254              <h2>Tables</h2>
     1255              <p class="lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
     1256
     1257              <table class="table table-bordered">
    9971258                <thead>
    9981259                  <tr>
    999                     <th>#</th>
    1000                     <th>Column heading</th>
    1001                     <th>Column heading</th>
    1002                     <th>Column heading</th>
     1260                    <th scope="col">#</th>
     1261                    <th scope="col">First</th>
     1262                    <th scope="col">Last</th>
     1263                    <th scope="col">Handle</th>
    10031264                  </tr>
    10041265                </thead>
    10051266                <tbody>
    10061267                  <tr>
    1007                     <td>1</td>
    1008                     <td>Column content</td>
    1009                     <td>Column content</td>
    1010                     <td>Column content</td>
     1268                    <th scope="row">1</th>
     1269                    <td>Mark</td>
     1270                    <td>Otto</td>
     1271                    <td>@mdo</td>
    10111272                  </tr>
    10121273                  <tr>
    1013                     <td>2</td>
    1014                     <td>Column content</td>
    1015                     <td>Column content</td>
    1016                     <td>Column content</td>
     1274                    <th scope="row">2</th>
     1275                    <td>Jacob</td>
     1276                    <td>Thornton</td>
     1277                    <td>@fat</td>
    10171278                  </tr>
    1018                   <tr class="info">
    1019                     <td>3</td>
    1020                     <td>Column content</td>
    1021                     <td>Column content</td>
    1022                     <td>Column content</td>
    1023                   </tr>
    1024                   <tr class="success">
    1025                     <td>4</td>
    1026                     <td>Column content</td>
    1027                     <td>Column content</td>
    1028                     <td>Column content</td>
    1029                   </tr>
    1030                   <tr class="danger">
    1031                     <td>5</td>
    1032                     <td>Column content</td>
    1033                     <td>Column content</td>
    1034                     <td>Column content</td>
    1035                   </tr>
    1036                   <tr class="warning">
    1037                     <td>6</td>
    1038                     <td>Column content</td>
    1039                     <td>Column content</td>
    1040                     <td>Column content</td>
    1041                   </tr>
    1042                   <tr class="active">
    1043                     <td>7</td>
    1044                     <td>Column content</td>
    1045                     <td>Column content</td>
    1046                     <td>Column content</td>
     1279                  <tr>
     1280                    <th scope="row">3</th>
     1281                    <td>Larry</td>
     1282                    <td>the Bird</td>
     1283                    <td>@twitter</td>
    10471284                  </tr>
    10481285                </tbody>
    1049               </table>
    1050             </div><!-- /example -->
     1286              </table>
     1287
     1288              <p class="mt-3">
     1289                <a href="https://getbootstrap.com/docs/4.0/components/tables/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1290              </p>
     1291              <hr class="my-5" />
     1292            </div><!-- /#tables -->
     1293
     1294            <div id="tooltips">
     1295              <h2>Tooltips</h2>
     1296              <p class="lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.</p>
     1297
     1298              <div class="card mb-4">
     1299                <div class="card-body">
     1300                  <h5 class="card-title">Examples</h5>
     1301
     1302                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
     1303                    Tooltip on top
     1304                  </button>
     1305
     1306                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
     1307                    Tooltip on right
     1308                  </button>
     1309
     1310                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
     1311                    Tooltip on bottom
     1312                  </button>
     1313
     1314                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
     1315                    Tooltip on left
     1316                  </button>
     1317                </div>
     1318              </div>
     1319
     1320              <p class="mt-3">
     1321                <a href="https://getbootstrap.com/docs/4.0/components/tooltips/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1322              </p>
     1323              <hr class="my-5" />
     1324            </div><!-- /#tooltips -->
     1325
     1326            <div id="typography">
     1327              <h2>Typography</h2>
     1328
     1329              <div class="typo-spip">
     1330
     1331
     1332
     1333                <div class="cartouche">
     1334                                                    <p class="surtitre">Ceci est le sur-titre de l’article</p>
     1335
     1336                                                    <h1 class="surlignable">Charte typo
     1337                                                            <small>par tetue</small>
     1338                                                    </h1>
     1339
     1340                                                    <p class="soustitre">Ceci est le sous-titre de l’article</p>
     1341
     1342                                                    <p class="info-publi"><abbr class="published" title="2007-06-30T22:00:00Z">dimanche 1er juillet
     1343                                                            2007</abbr><span
     1344                                                            class="sep">, </span><span class="auteurs">par  <span class="vcard author"><a class="url fn spip_in"
     1345                                                                                                                                    href="spip.php?auteur1">Webmestre</a></span></span>
     1346                                                    </p>
     1347
     1348                                            </div>
     1349
     1350                                            <div class="chapo surlignable"><p>Cette page présente un échantillon des enrichissements typographiques
     1351                                                    possibles
     1352                                                    sur ce site. Leur habillage est réalisé par le webmestre, en&nbsp;CSS, via des feuilles de style externes.
     1353                                                    Ce&nbsp;paragraphe
     1354                                                    constitue donc le&nbsp;chapeau.</p></div>
     1355                                            <div class="texte surlignable"><h3 class="spip">Paragraphes</h3>
     1356
     1357                                                    <p>Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
     1358                                                            Suspendisse
     1359                                                            lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
     1360                                                            diam.<br
     1361                                                                    class='manualbr'/>Ici, retour à la ligne, généré par le raccourci SPIP &#171;&nbsp;<code
     1362                                                                    class='spip_code'
     1363                                                                    dir='ltr'>_ </code>&nbsp;&#187;.
     1364                                                            Espace&nbsp;insécable.</p>
     1365
     1366                                                    <p>Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam
     1367                                                            nisl
     1368                                                            sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
     1369                                                            Pellentesque
     1370                                                            congue.</p>
     1371                                                    <hr class="spip"/>
     1372                                                    <p>Troisième paragraphe, précédé d&#8217;une ligne horizontale de séparation, générée par le raccourci
     1373                                                            SPIP
     1374                                                            &#171;&nbsp;<code class='spip_code' dir='ltr'>----</code>&nbsp;&#187;. Praesent egestas leo in pede.
     1375                                                            Praesent
     1376                                                            blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>
     1377
     1378                                                    <h3 class="spip">Un intertitre normal</h3>
     1379
     1380                                                    <p>Voici du <i>texte en italique</i> et du <strong>texte en gras</strong>.<br class='manualbr'/>Voici un
     1381                                                            <del>texte supprimé</del>
     1382                                                            et le
     1383                                                            <ins>texte inséré en correction</ins>
     1384                                                            .<br class='manualbr'/>Une <dfn>définition</dfn> de terme avec la balise <code class='spip_code'
     1385                                                                                                                                           dir='ltr'>
     1386                                                                    &lt;dfn&gt;</code>.<br class='manualbr'/>Un sigle, par exemple <abbr title="World Wide Web Consortium"
     1387                                                                                                                                   lang="en">W3C</abbr>, est lu
     1388                                                            lettre par
     1389                                                            lettre, tandis que <acronym title="Système de Publication pour Internet">SPIP</acronym> est un acronyme
     1390                                                            puisqu&#8217;il
     1391                                                            forme un mot qui est lu normalement.
     1392                                                    </p>
     1393
     1394                                                    <p><bdo dir="ltr">Texte de gauche à droite</bdo> et <bdo dir="rtl">Texte de droite à gauche</bdo> avec
     1395                                                            <code
     1396                                                                    class='spip_code' dir='ltr'>&lt;bdo&gt;</code>.<br class='manualbr'/>Mise en exposant <sup>2</sup> et
     1397                                                            mise
     1398                                                            en indice&nbsp;: <abbr>H<sub>2</sub>O</abbr>.<br class='manualbr'/>Et voici une note de bas de page<span
     1399                                                                    class="spip_note_ref">&nbsp;[<a href='#nb1' class='spip_note' rel='footnote'
     1400                                                                                              title='Une note de bas de page est, habituellement, signalée par un numéro placé à&nbsp;(...)'
     1401                                                                                              id='nh1'>1</a>]</span>.</p>
     1402
     1403                                                    <p><span class="spip-puce ltr"><b>–</b></span>&nbsp;Ici,
     1404                                                            exemple de raccourci SPIP &#171;&nbsp;<code class='spip_code' dir='ltr'>- </code>&nbsp;&#187;.
     1405                                                            Attention, leur
     1406                                                            succession ne constitue pas une liste&nbsp;! Pour les listes, voir ci-dessous.</p>
     1407
     1408                                                    <p>&mdash;&nbsp;Un tiret long, généré par le raccourci SPIP &#171;&nbsp;<code class='spip_code'
     1409                                                                                                                                  dir='ltr'>--</code>&nbsp;&#187;,
     1410                                                            utile pour les dialogues.</p>
     1411
     1412                                                    <h3 class="spip">Hyperliens</h3>
     1413
     1414                                                    <p>SPIP distingue les <a href="spip.php?article1" class='spip_in'>liens internes</a> des <a
     1415                                                            href="http://checklists.opquast.com/11/criteria/687/" class='spip_out'
     1416                                                            title="Bonne pratique Opquast N&#176;188" rel='external'>liens externes</a> dont URLs directes&nbsp;: <a
     1417                                                            href="https://www.spip.net" class='spip_url spip_out' rel='external'>https://www.spip.net</a>, et lien
     1418                                                            généré
     1419                                                            par le raccourci <code class='spip_code' dir='ltr'>[-&gt;site2]</code>&nbsp;: <a href="spip.php?site2"
     1420                                                                                                                                             class='spip_out'>site
     1421                                                                    2</a>.<br class='manualbr'/>Mieux vaut spécifier la langue de destination, par exemple&nbsp;: <a
     1422                                                                    href="http://checklists.opquast.com/11/criteria/628/" class='spip_out' hreflang='en' rel='external'>Bonne
     1423                                                                    pratique Opquast N&#176;129</a>.<br class='manualbr'/>Lien vers une définition du glossaire prédéfini&nbsp;:
     1424                                                            <a href="http://fr.wikipedia.org/wiki/Wikip%C3%A9dia" class='spip_glossaire'
     1425                                                               rel='external'>Wikipédia</a><br
     1426                                                                    class='manualbr'/>Lien vers un document, avec le raccourci <code class='spip_code'
     1427                                                                                                                               dir='ltr'>[-&gt;doc3]</code>&nbsp;:
     1428                                                            <a
     1429                                                                    href="IMG/jpg/doc3.jpg" class='spip_in' type='image/jpeg'>Titre du document</a><br class='manualbr'/>Lien
     1430                                                            vers un auteur, avec le raccourci <code class='spip_code' dir='ltr'>[-&gt;auteur1]</code>&nbsp;: <a
     1431                                                                    href="spip.php?auteur1" class='spip_in'>Webmestre</a><br class='manualbr'/>Courriel&nbsp;: <a
     1432                                                                    href="mailto:adresse@courriel.net" class='spip_mail'>adresse@courriel.net</a><br class='manualbr'/>Une
     1433                                                            ancre vers les citations&nbsp;: <a href="#citations" class='spip_ancre'>#citations</a></p>
     1434
     1435                                                    <h3 class="spip">Listes</h3>
     1436
     1437                                                    <p>Liste non ordonnée (<code class='spip_code' dir='ltr'>ul</code>), générée avec le raccourci SPIP &#171;&nbsp;<code
     1438                                                            class='spip_code' dir='ltr'>-* </code>&nbsp;&#187;&nbsp;:</p>
     1439                                                    <ul class="spip">
     1440                                                            <li> Élément de liste non numérotée</li>
     1441                                                            <li> Élément de liste non numérotée</li>
     1442                                                            <li> Élément de liste non numérotée
     1443                                                                    <ul class="spip">
     1444                                                                            <li> Plantes
     1445                                                                                    <ul class="spip">
     1446                                                                                            <li> Ficus</li>
     1447                                                                                            <li> Olivier</li>
     1448                                                                                    </ul>
     1449                                                                            </li>
     1450                                                                            <li> Animaux de compagnie
     1451                                                                                    <ul class="spip">
     1452                                                                                            <li> Chat</li>
     1453                                                                                            <li> Chien</li>
     1454                                                                                    </ul>
     1455                                                                            </li>
     1456                                                                    </ul>
     1457                                                            </li>
     1458                                                    </ul>
     1459                                                    <p>Et une liste numérotée (<code class='spip_code' dir='ltr'>ol</code>), générée avec le raccourci SPIP
     1460                                                            &#171;&nbsp;<code
     1461                                                                    class='spip_code' dir='ltr'>-# </code>&nbsp;&#187;&nbsp;:</p>
     1462                                                    <ol class="spip">
     1463                                                            <li> Voici ma main&nbsp;: elle a cinq doigts. En voici deux, en voici trois.<br class='manualbr'/>Le
     1464                                                                    premier,
     1465                                                                    ce gros bonhomme, C’est le pouce qu’il se nomme.
     1466                                                            </li>
     1467                                                            <li> L’index qui montre le chemin, Est le second doigt de la main.</li>
     1468                                                            <li> Entre l’index et l’annulaire, Le majeur paraît un grand frère.</li>
     1469                                                            <li> L’annulaire porte l’anneau, Avec sa bague, il fait le beau.</li>
     1470                                                            <li> Le tout petit auriculaire Marche à côté de l’annulaire.</li>
     1471                                                    </ol>
     1472                                                    <p>Regardez mes doigts travailler. Chacun fait son petit métier.</p>
     1473
     1474                                                    <p>N&#8217;oublions pas les listes de définition, générées avec les balises HTML <code class='spip_code'
     1475                                                                                                                                           dir='ltr'>
     1476                                                            &lt;dl&gt;</code>, <code class='spip_code' dir='ltr'>&lt;dd&gt;</code>, <code class='spip_code'
     1477                                                                                                                                    dir='ltr'>
     1478                                                            &lt;dt&gt;</code>&nbsp;:
     1479                                                    </p>
     1480                                                    <dl class="spip">
     1481                                                            <dt>polatouche (n.m.)</dt>
     1482                                                            <dd><span class='spip_document_1 spip_documents spip_documents_right' style='float:right; width:146px;'>
     1483                                <img src='#CHEMIN{demo/img/polatouche.jpg}' width='146' height='80' alt=""/></span>Mammifère rongeur
     1484                                                                    omnivore méconnu d&#8217;Eurasie ou d&#8217;Amérique du Nord, dit &#171;&nbsp;écureuil volant&nbsp;&#187;
     1485                                                                    car il est capable de planer en ligne droite d&#8217;un arbre à l&#8217;autre grâce à son patagium
     1486                                                                    (membrane
     1487                                                                    qui réunit ses pattes à son corps). Pelage gris et blanc.
     1488                                                            </dd>
     1489                                                            <dt>écureuil (n.m.)</dt>
     1490                                                            <dd>Petit rongeur arboricole d&#8217;Europe à longue queue très touffue, excellent grimpeur, capable de
     1491                                                                    sauts
     1492                                                                    très étendus, amassant des provisions pour l&#8217;hiver et aisément familier de l&#8217;homme. Pelage
     1493                                                                    gris
     1494                                                                    ou roux.
     1495                                                            </dd>
     1496                                                    </dl>
     1497                                                    <h3 class="spip">Tableaux</h3>
     1498                                                    <table class="spip" summary="summary">
     1499                                                            <caption>Titre du tableau (caption)</caption>
     1500                                                            <thead>
     1501                                                            <tr class='row_first'>
     1502                                                                    <th id='idcbd5_c0'>entête</th>
     1503                                                                    <th id='idcbd5_c1'>entête</th>
     1504                                                                    <th id='idcbd5_c2'>entête</th>
     1505                                                            </tr>
     1506                                                            </thead>
     1507                                                            <tbody>
     1508                                                            <tr class='row_odd odd'>
     1509                                                                    <td headers='idcbd5_c0'>valeur</td>
     1510                                                                    <td headers='idcbd5_c1'>valeur</td>
     1511                                                                    <td headers='idcbd5_c2'>valeur</td>
     1512                                                            </tr>
     1513                                                            <tr class='row_even even'>
     1514                                                                    <td headers='idcbd5_c0'>valeur</td>
     1515                                                                    <td headers='idcbd5_c1'>valeur</td>
     1516                                                                    <td headers='idcbd5_c2'>valeur</td>
     1517                                                            </tr>
     1518                                                            <tr class='row_odd odd'>
     1519                                                                    <td headers='idcbd5_c0'>valeur</td>
     1520                                                                    <td headers='idcbd5_c1'>valeur</td>
     1521                                                                    <td headers='idcbd5_c2'>valeur</td>
     1522                                                            </tr>
     1523                                                            </tbody>
     1524                                                    </table>
     1525                                                    <p><a name="citations"></a></p>
     1526
     1527                                                    <h3 class="spip">Citations</h3>
     1528
     1529                                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <q>Ceci est une citation au fil du texte
     1530                                                            (avec la
     1531                                                            balise HTML <code class='spip_code' dir='ltr'>&lt;q&gt;</code>)</q>.</p>
     1532                                                    <blockquote>Ceci est une citation ordinaire, avec la balise HTML <code class='spip_code' dir='ltr'>&lt;blockquote&gt;</code>.
     1533                                                            La route est longue mais la voie est libre.
     1534                                                            <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
     1535                                                                    Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
     1536                                                    </blockquote>
     1537                                                    <blockquote class="spip">
     1538                                                            <p>Ceci est une citation générée avec le raccourci SPIP <code class='spip_code' dir='ltr'>
     1539                                                                    &lt;quote&gt;</code>.
     1540                                                                    La route est longue mais la voie est libre.</p>
     1541
     1542                                                            <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
     1543                                                                    Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
     1544                                                    </blockquote>
     1545                                                    <blockquote class="spip_poesie">
     1546                                                            <div>Je le vis, je rougis, je pâlis à sa vue</div>
     1547                                                            <div>Un trouble s’éleva dans mon âme éperdue</div>
     1548                                                            <div>Mes yeux ne voyaient plus, je ne pouvais parler</div>
     1549                                                            <div>Je sentis tout mon corps et transir et brûler.</div>
     1550                                                            <div>&nbsp;</div>
     1551                                                            <div>Ceci est une citation du <cite>Phédre</cite> de Racine, générée avec le raccourci&nbsp;SPIP <code
     1552                                                                    class='spip_code' dir='ltr'>&lt;poesie&gt;</code>, idéal pour les vers des poèmes et chansons.
     1553                                                            </div>
     1554                                                    </blockquote>
     1555                                                    <p>Maecenas mollis. Et voici du code, généré avec le raccourci SPIP <code class='spip_code' dir='ltr'>&lt;code&gt;</code>&nbsp;:
     1556                                                    </p>
     1557
     1558                                                    <div style='text-align: left;' class='spip_code' dir='ltr'><code>&lt;?php<br/>
     1559                                                            &nbsp; &nbsp; // ceci est du langage php<br/>
     1560                                                            &nbsp; &nbsp; echo &quot;bonjour&quot;;<br/>
     1561                                                            ?&gt;</code></div>
     1562                                                <textarea readonly='readonly' cols='40' rows='7' class='spip_cadre' dir='ltr'>Le raccourci SPIP &lt;cadre&gt; permet publier des extraits de code que l&#039;on peut facilement copier-coller.
     1563
     1564                   &lt;?php
     1565                   // ceci est du langage php
     1566                   echo &quot;au revoir&quot;;
     1567                   ?&gt;</textarea>
     1568
     1569                                                    <p>Sans oublier un <kbd>raccourci-clavier</kbd> (<code class='spip_code' dir='ltr'>&lt;kbd&gt;</code>), un
     1570                                                            <samp>extrait de script</samp> (<code class='spip_code' dir='ltr'>&lt;samp&gt;</code>) et une
     1571                                                            <var>variable</var> (<code class='spip_code' dir='ltr'>&lt;var&gt;</code>).</p>
     1572
     1573                                                    <p>Et pour finir en beauté, voici une formule mathématique, générée avec <code class='spip_code'
     1574                                                                                                                                   dir='ltr'>
     1575                                                            &lt;math&gt;</code>&nbsp;:<br
     1576                                                            class='autobr'/>
     1577                                                            <img src="#CHEMIN{demo/img/math.png}"
     1578                                                                 style='vertical-align:middle;' width='85' height='38' alt="a = \sqrt{b^{2} + c^{2}}"
     1579                                                                 title="a = \sqrt{b^{2} + c^{2}}"/></p>
     1580
     1581                                                    <h3 class="spip">À éviter</h3>
     1582
     1583                                                    <p>Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML&nbsp;1.0 Strict&nbsp;:
     1584                                                            <basefont>exemple de basefont</basefont>, <font>exemple de font</font>, <u>exemple de u</u>, <s>exemple
     1585                                                                    de
     1586                                                                    s</s>, <strike>exemple de strike</strike>, etc. Celles-ci sont déconseillées&nbsp;: <b>exemple de
     1587                                                                    b</b>, <i>exemple
     1588                                                                    de i</i>, <big>exemple de big</big>,
     1589                                                            <small>exemple de small</small>
     1590                                                            , <tt>exemple de tt</tt>.
     1591                                                    </p>
     1592                                            </div>
     1593
     1594                                            <hr/>
     1595                                            <p class="hyperlien">Voir en ligne : <a href="https://www.spip.net">Lien hypertexte</a></p>
     1596
     1597                                            <hr/>
     1598                                            <div class="ps surlignable">
     1599                                                    <p>Ceci est le texte du Post-Scriptum. Cette page fait partie de la <a
     1600                                                            href="https://contrib.spip.net/3716"
     1601                                                            class='spip_out' rel='external'>base de
     1602                                                            démarrage</a> pour SPIP. Voici un autre <a href="http://romy.tetue.net/11" class='spip_out'
     1603                                                                                                 rel='external'>exemple
     1604                                                            de cette charte typo</a>.</p></div>
     1605
     1606
     1607
     1608
     1609              </div>
     1610
     1611              <hr />
     1612
     1613              <p class="lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
     1614
     1615              <div class="card mb-4">
     1616                <div class="card-body">
     1617                  <h5 class="card-title">Displays</h5>
     1618                  <h1 class="display-1">Display 1</h1>
     1619                  <h1 class="display-2">Display 2</h1>
     1620                  <h1 class="display-3">Display 3</h1>
     1621                  <h1 class="display-4">Display 4</h1>
     1622                </div>
     1623              </div>
     1624
     1625              <div class="card mb-4">
     1626                <div class="card-body">
     1627                  <h5 class="card-title">Headings</h5>
     1628                  <h1>h1. Bootstrap heading</h1>
     1629                  <h2>h2. Bootstrap heading</h2>
     1630                  <h3>h3. Bootstrap heading</h3>
     1631                  <h4>h4. Bootstrap heading</h4>
     1632                  <h5>h5. Bootstrap heading</h5>
     1633                  <h6>h6. Bootstrap heading</h6>
     1634                </div>
     1635              </div>
     1636
     1637              <div class="card mb-4">
     1638                <div class="card-body">
     1639                  <h5 class="card-title">Inline text elements</h5>
     1640                  <p>You can use the mark tag to <mark>highlight</mark> text.</p>
     1641                  <p><del>This line of text is meant to be treated as deleted text.</del></p>
     1642                  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
     1643                  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
     1644                  <p><u>This line of text will render as underlined</u></p>
     1645                  <p><small>This line of text is meant to be treated as fine print.</small></p>
     1646                  <p><strong>This line rendered as bold text.</strong></p>
     1647                  <p><em>This line rendered as italicized text.</em></p>
     1648                </div>
     1649              </div>
     1650
     1651              <div class="card mb-4">
     1652                <div class="card-body">
     1653                  <h5 class="card-title">Lists</h5>
     1654                  <ul class="list-unstyled">
     1655                    <li>Lorem ipsum dolor sit amet</li>
     1656                    <li>Consectetur adipiscing elit</li>
     1657                    <li>Facilisis in pretium nisl aliquet</li>
     1658                    <li>
     1659                      <ul>
     1660                        <li>Phasellus iaculis neque</li>
     1661                        <li>Vestibulum laoreet porttitor sem</li>
     1662                      </ul>
     1663                    </li>
     1664                    <li>Aenean sit amet erat nunc</li>
     1665                    <li>Eget porttitor lorem</li>
     1666                  </ul>
     1667                </div>
     1668              </div>
     1669
     1670              <p class="mt-3">
     1671                <a href="https://getbootstrap.com/docs/4.0/content/typography/" target="_blank">See full documentation <i class="fa fa-external-link-alt"></i></a>
     1672              </p>
     1673
     1674              <hr class="my-5" />
     1675            </div><!-- /#typography -->
     1676
    10511677          </div>
    1052         </div>
    1053       </div>
    1054 
    1055 
    1056 
    1057       <!-- Navs
    1058       ================================================== -->
    1059       <div class="bs-docs-section">
    1060 
    1061         <div class="row">
    1062           <div class="col-lg-12">
    1063             <div class="page-header">
    1064               <h2 id="nav">Navs</h2>
    1065             </div>
    1066           </div>
    1067         </div>
    1068 
    1069         <div class="row">
    1070           <div class="col-lg-4">
    1071             <h2 id="nav-tabs">Tabs</h2>
    1072             <div class="bs-component p">
    1073               <ul class="nav nav-tabs">
    1074                 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    1075                 <li><a href="#profile" data-toggle="tab">Profile</a></li>
    1076                 <li class="disabled"><a>Disabled</a></li>
    1077                 <li class="dropdown">
    1078                   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    1079                     Dropdown <span class="caret"></span>
    1080                   </a>
    1081                   <ul class="dropdown-menu">
    1082                     <li><a href="#dropdown1" data-toggle="tab">Action</a></li>
    1083                     <li class="divider"></li>
    1084                     <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
    1085                   </ul>
    1086                 </li>
    1087               </ul>
    1088               <div id="myTabContent" class="tab-content">
    1089                 <div class="tab-pane fade active in" id="home">
    1090                   <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    1091                 </div>
    1092                 <div class="tab-pane fade" id="profile">
    1093                   <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
    1094                 </div>
    1095                 <div class="tab-pane fade" id="dropdown1">
    1096                   <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
    1097                 </div>
    1098                 <div class="tab-pane fade" id="dropdown2">
    1099                   <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
    1100                 </div>
    1101               </div>
    1102             </div>
    1103           </div>
    1104           <div class="col-lg-4">
    1105             <h2 id="nav-pills">Pills</h2>
    1106             <div class="bs-component p">
    1107               <ul class="nav nav-pills">
    1108                 <li class="active"><a href="#">Home</a></li>
    1109                 <li><a href="#">Profile</a></li>
    1110                 <li class="disabled"><a href="#">Disabled</a></li>
    1111                 <li class="dropdown">
    1112                   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    1113                     Dropdown <span class="caret"></span>
    1114                   </a>
    1115                   <ul class="dropdown-menu">
    1116                     <li><a href="#">Action</a></li>
    1117                     <li><a href="#">Another action</a></li>
    1118                     <li><a href="#">Something else here</a></li>
    1119                     <li class="divider"></li>
    1120                     <li><a href="#">Separated link</a></li>
    1121                   </ul>
    1122                 </li>
    1123               </ul>
    1124             </div>
    1125             <br>
    1126             <div class="bs-component p">
    1127               <ul class="nav nav-pills nav-stacked">
    1128                 <li class="active"><a href="#">Home</a></li>
    1129                 <li><a href="#">Profile</a></li>
    1130                 <li class="disabled"><a href="#">Disabled</a></li>
    1131                 <li class="dropdown">
    1132                   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    1133                     Dropdown <span class="caret"></span>
    1134                   </a>
    1135                   <ul class="dropdown-menu">
    1136                     <li><a href="#">Action</a></li>
    1137                     <li><a href="#">Another action</a></li>
    1138                     <li><a href="#">Something else here</a></li>
    1139                     <li class="divider"></li>
    1140                     <li><a href="#">Separated link</a></li>
    1141                   </ul>
    1142                 </li>
    1143               </ul>
    1144             </div>
    1145           </div>
    1146           <div class="col-lg-4">
    1147             <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
    1148             <div class="bs-component p">
    1149               <ul class="breadcrumb">
    1150                 <li class="active">Home</li>
    1151               </ul>
    1152 
    1153               <ul class="breadcrumb">
    1154                 <li><a href="#">Home</a></li>
    1155                 <li class="active">Library</li>
    1156               </ul>
    1157 
    1158               <ul class="breadcrumb">
    1159                 <li><a href="#">Home</a></li>
    1160                 <li><a href="#">Library</a></li>
    1161                 <li class="active">Data</li>
    1162               </ul>
    1163             </div>
    1164 
    1165           </div>
    1166         </div>
    1167 
    1168 
    1169         <div class="row">
    1170           <div class="col-lg-4">
    1171             <h2 id="pagination">Pagination</h2>
    1172             <div class="bs-component p">
    1173               <ul class="pagination">
    1174                 <li class="disabled"><a href="#">&laquo;</a></li>
    1175                 <li class="active"><a href="#">1</a></li>
    1176                 <li><a href="#">2</a></li>
    1177                 <li><a href="#">3</a></li>
    1178                 <li><a href="#">4</a></li>
    1179                 <li><a href="#">5</a></li>
    1180                 <li><a href="#">&raquo;</a></li>
    1181               </ul>
    1182 
    1183               <ul class="pagination pagination-lg">
    1184                 <li class="disabled"><a href="#">&laquo;</a></li>
    1185                 <li class="active"><a href="#">1</a></li>
    1186                 <li><a href="#">2</a></li>
    1187                 <li><a href="#">3</a></li>
    1188                 <li><a href="#">&raquo;</a></li>
    1189               </ul>
    1190 
    1191               <ul class="pagination pagination-sm">
    1192                 <li class="disabled"><a href="#">&laquo;</a></li>
    1193                 <li class="active"><a href="#">1</a></li>
    1194                 <li><a href="#">2</a></li>
    1195                 <li><a href="#">3</a></li>
    1196                 <li><a href="#">4</a></li>
    1197                 <li><a href="#">5</a></li>
    1198                 <li><a href="#">&raquo;</a></li>
    1199               </ul>
    1200             </div>
    1201           </div>
    1202           <div class="col-lg-4">
    1203             <h2 id="pager">Pager</h2>
    1204             <div class="bs-component p">
    1205               <ul class="pager">
    1206                 <li><a href="#">Previous</a></li>
    1207                 <li><a href="#">Next</a></li>
    1208               </ul>
    1209 
    1210               <ul class="pager">
    1211                 <li class="previous disabled"><a href="#">&larr; Older</a></li>
    1212                 <li class="next"><a href="#">Newer &rarr;</a></li>
    1213               </ul>
    1214             </div>
    1215           </div>
    1216           <div class="col-lg-4">
    1217 
    1218           </div>
    1219         </div>
    1220       </div>
    1221 
    1222       <!-- Indicators
    1223       ================================================== -->
    1224       <div class="bs-docs-section">
    1225 
    1226         <div class="row">
    1227           <div class="col-lg-12">
    1228             <div class="page-header">
    1229               <h2 id="indicators">Indicators</h2>
    1230             </div>
    1231           </div>
    1232         </div>
    1233 
    1234         <div class="row">
    1235           <div class="col-lg-12">
    1236             <h2>Alerts</h2>
    1237             <div class="bs-component p">
    1238               <div class="alert alert-dismissible alert-warning">
    1239                 <button type="button" class="close" data-dismiss="alert">&times;</button>
    1240                 <h4>Warning!</h4>
    1241                 <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
    1242               </div>
    1243             </div>
    1244           </div>
    1245         </div>
    1246         <div class="row">
    1247           <div class="col-lg-4">
    1248             <div class="bs-component p">
    1249               <div class="alert alert-dismissible alert-danger">
    1250                 <button type="button" class="close" data-dismiss="alert">&times;</button>
    1251                 <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    1252               </div>
    1253             </div>
    1254           </div>
    1255           <div class="col-lg-4">
    1256             <div class="bs-component p">
    1257               <div class="alert alert-dismissible alert-success">
    1258                 <button type="button" class="close" data-dismiss="alert">&times;</button>
    1259                 <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
    1260               </div>
    1261             </div>
    1262           </div>
    1263           <div class="col-lg-4">
    1264             <div class="bs-component p">
    1265               <div class="alert alert-dismissible alert-info">
    1266                 <button type="button" class="close" data-dismiss="alert">&times;</button>
    1267                 <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
    1268               </div>
    1269             </div>
    1270           </div>
    1271         </div>
    1272         <div class="row">
    1273           <div class="col-lg-4">
    1274             <h2>Labels</h2>
    1275             <div class="bs-component p" style="margin-bottom: 40px;">
    1276               <span class="label label-default">Default</span>
    1277               <span class="label label-primary">Primary</span>
    1278               <span class="label label-success">Success</span>
    1279               <span class="label label-warning">Warning</span>
    1280               <span class="label label-danger">Danger</span>
    1281               <span class="label label-info">Info</span>
    1282             </div>
    1283           </div>
    1284           <div class="col-lg-4">
    1285             <h2>Badges</h2>
    1286             <div class="bs-component p">
    1287               <ul class="nav nav-pills">
    1288                 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
    1289                 <li><a href="#">Profile <span class="badge"></span></a></li>
    1290                 <li><a href="#">Messages <span class="badge">3</span></a></li>
    1291               </ul>
     1678          <div class="col-md-3 col-xl-2 ml-auto">
     1679            <div class="nav nav-list nav-sticky nav-sidebar">
     1680              <a class="nav-link" href="#alerts">Alerts</a>
     1681              <a class="nav-link" href="#badges">Badges</a>
     1682              <a class="nav-link" href="#breadcrumb">Breadcrumb</a>
     1683              <a class="nav-link" href="#buttons">Buttons</a>
     1684              <a class="nav-link" href="#cards">Cards</a>
     1685              <a class="nav-link" href="#carousel">Carousel</a>
     1686              <a class="nav-link" href="#dropdowns">Dropdowns</a>
     1687              <a class="nav-link" href="#forms">Forms</a>
     1688              <a class="nav-link" href="#jumbotron">Jumbotron</a>
     1689              <a class="nav-link" href="#modal">Modal</a>
     1690              <a class="nav-link" href="#navs">Navs</a>
     1691              <a class="nav-link" href="#navbar">Navbar</a>
     1692              <a class="nav-link" href="#pagination">Pagination</a>
     1693              <a class="nav-link" href="#popovers">Popovers</a>
     1694              <a class="nav-link" href="#progress">Progress</a>
     1695              <a class="nav-link" href="#tables">Tables</a>
     1696              <a class="nav-link" href="#tooltips">Tooltips</a>
     1697              <a class="nav-link" href="#typography">Typography</a>
     1698              <a class="nav-link text-muted text-sm mt-1" href="#top">Back to top</a>
    12921699            </div>
    12931700          </div>
    12941701        </div>
    12951702      </div>
    1296 
    1297       <!-- Progress bars
    1298       ================================================== -->
    1299       <div class="bs-docs-section">
    1300 
    1301         <div class="row">
    1302           <div class="col-lg-12">
    1303             <div class="page-header">
    1304               <h2 id="progress">Progress bars</h2>
    1305             </div>
    1306 
    1307             <h3 id="progress-basic">Basic</h3>
    1308             <div class="bs-component p">
    1309               <div class="progress">
    1310                 <div class="progress-bar" style="width: 60%;"></div>
    1311               </div>
    1312             </div>
    1313 
    1314             <h3 id="progress-alternatives">Contextual alternatives</h3>
    1315             <div class="bs-component p">
    1316               <div class="progress">
    1317                 <div class="progress-bar progress-bar-info" style="width: 20%"></div>
    1318               </div>
    1319 
    1320               <div class="progress">
    1321                 <div class="progress-bar progress-bar-success" style="width: 40%"></div>
    1322               </div>
    1323 
    1324               <div class="progress">
    1325                 <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
    1326               </div>
    1327 
    1328               <div class="progress">
    1329                 <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
    1330               </div>
    1331             </div>
    1332 
    1333             <h3 id="progress-striped">Striped</h3>
    1334             <div class="bs-component p">
    1335               <div class="progress progress-striped">
    1336                 <div class="progress-bar progress-bar-info" style="width: 20%"></div>
    1337               </div>
    1338 
    1339               <div class="progress progress-striped">
    1340                 <div class="progress-bar progress-bar-success" style="width: 40%"></div>
    1341               </div>
    1342 
    1343               <div class="progress progress-striped">
    1344                 <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
    1345               </div>
    1346 
    1347               <div class="progress progress-striped">
    1348                 <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
    1349               </div>
    1350             </div>
    1351 
    1352             <h3 id="progress-animated">Animated</h3>
    1353             <div class="bs-component p">
    1354               <div class="progress progress-striped active">
    1355                 <div class="progress-bar" style="width: 45%"></div>
    1356               </div>
    1357             </div>
    1358 
    1359             <h3 id="progress-stacked">Stacked</h3>
    1360             <div class="bs-component p">
    1361               <div class="progress">
    1362                 <div class="progress-bar progress-bar-success" style="width: 35%"></div>
    1363                 <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
    1364                 <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
    1365               </div>
    1366             </div>
    1367           </div>
     1703    </div>
     1704  </main>
     1705
     1706  <footer role="contentinfo" class="py-6 lh-1 bg-white">
     1707    <div class="container">
     1708      <div class="row">
     1709        <div class="col-md-4">
     1710          <h3 class="h4 mb-4">SPIP + BootStrap 4</h3>
     1711        </div>
     1712        <div class="col-md-8 text-right">
     1713          <a href="https://www.spip.net/" rel="generator" title="<:site_realise_avec_spip:>" class="spip_out">[(#CHEMIN{spip.png}|balise_img{SPIP})]</a>
    13681714        </div>
    13691715      </div>
    1370 
    1371       <!-- Containers
    1372       ================================================== -->
    1373       <div class="bs-docs-section">
    1374 
    1375         <div class="row">
    1376           <div class="col-lg-12">
    1377             <div class="page-header">
    1378               <h2 id="container">Containers</h2>
    1379             </div>
    1380             <div class="bs-component p">
    1381               <div class="jumbotron">
    1382                 <h1>Jumbotron</h1>
    1383                 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    1384                 <p><a class="btn btn-primary btn-lg">Learn more</a></p>
    1385               </div>
    1386             </div>
    1387           </div>
    1388         </div>
    1389 
    1390 
    1391         <div class="row">
    1392           <div class="col-lg-12">
    1393             <h2>List groups</h2>
    1394           </div>
    1395         </div>
    1396         <div class="row">
    1397           <div class="col-lg-4">
    1398             <div class="bs-component p">
    1399               <ul class="list-group">
    1400                 <li class="list-group-item">
    1401                   <span class="badge">14</span>
    1402                   Cras justo odio
    1403                 </li>
    1404                 <li class="list-group-item">
    1405                   <span class="badge">2</span>
    1406                   Dapibus ac facilisis in
    1407                 </li>
    1408                 <li class="list-group-item">
    1409                   <span class="badge">1</span>
    1410                   Morbi leo risus
    1411                 </li>
    1412               </ul>
    1413             </div>
    1414           </div>
    1415           <div class="col-lg-4">
    1416             <div class="bs-component p">
    1417               <div class="list-group">
    1418                 <a href="#" class="list-group-item active">
    1419                   Cras justo odio
    1420                 </a>
    1421                 <a href="#" class="list-group-item">Dapibus ac facilisis in
    1422                 </a>
    1423                 <a href="#" class="list-group-item">Morbi leo risus
    1424                 </a>
    1425               </div>
    1426             </div>
    1427           </div>
    1428           <div class="col-lg-4">
    1429             <div class="bs-component p">
    1430               <div class="list-group">
    1431                 <a href="#" class="list-group-item">
    1432                   <h4 class="list-group-item-heading">List group item heading</h4>
    1433                   <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    1434                 </a>
    1435                 <a href="#" class="list-group-item">
    1436                   <h4 class="list-group-item-heading">List group item heading</h4>
    1437                   <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    1438                 </a>
    1439               </div>
    1440             </div>
    1441           </div>
    1442         </div>
    1443 
    1444 
    1445         <div class="row">
    1446           <div class="col-lg-12">
    1447             <h2>Panels</h2>
    1448           </div>
    1449         </div>
    1450         <div class="row">
    1451           <div class="col-lg-4">
    1452             <div class="bs-component p">
    1453               <div class="panel panel-default">
    1454                 <div class="panel-body">
    1455                   Basic panel
    1456                 </div>
    1457               </div>
    1458 
    1459               <div class="panel panel-default">
    1460                 <div class="panel-heading">Panel heading</div>
    1461                 <div class="panel-body">
    1462                   Panel content
    1463                 </div>
    1464               </div>
    1465 
    1466               <div class="panel panel-default">
    1467                 <div class="panel-body">
    1468                   Panel content
    1469                 </div>
    1470                 <div class="panel-footer">Panel footer</div>
    1471               </div>
    1472             </div>
    1473           </div>
    1474           <div class="col-lg-4">
    1475             <div class="bs-component p">
    1476               <div class="panel panel-primary">
    1477                 <div class="panel-heading">
    1478                   <h3 class="panel-title">Panel primary</h3>
    1479                 </div>
    1480                 <div class="panel-body">
    1481                   Panel content
    1482                 </div>
    1483               </div>
    1484 
    1485               <div class="panel panel-success">
    1486                 <div class="panel-heading">
    1487                   <h3 class="panel-title">Panel success</h3>
    1488                 </div>
    1489                 <div class="panel-body">
    1490                   Panel content
    1491                 </div>
    1492               </div>
    1493 
    1494               <div class="panel panel-warning">
    1495                 <div class="panel-heading">
    1496                   <h3 class="panel-title">Panel warning</h3>
    1497                 </div>
    1498                 <div class="panel-body">
    1499                   Panel content
    1500                 </div>
    1501               </div>
    1502             </div>
    1503           </div>
    1504           <div class="col-lg-4">
    1505             <div class="bs-component p">
    1506               <div class="panel panel-danger">
    1507                 <div class="panel-heading">
    1508                   <h3 class="panel-title">Panel danger</h3>
    1509                 </div>
    1510                 <div class="panel-body">
    1511                   Panel content
    1512                 </div>
    1513               </div>
    1514 
    1515               <div class="panel panel-info">
    1516                 <div class="panel-heading">
    1517                   <h3 class="panel-title">Panel info</h3>
    1518                 </div>
    1519                 <div class="panel-body">
    1520                   Panel content
    1521                 </div>
    1522               </div>
    1523             </div>
    1524           </div>
    1525         </div>
    1526 
    1527         <div class="row">
    1528           <div class="col-lg-12">
    1529             <h2>Wells</h2>
    1530           </div>
    1531         </div>
    1532         <div class="row">
    1533           <div class="col-lg-4">
    1534             <div class="bs-component p">
    1535               <div class="well">
    1536                 Look, I'm in a well!
    1537               </div>
    1538             </div>
    1539           </div>
    1540           <div class="col-lg-4">
    1541             <div class="bs-component p">
    1542               <div class="well well-sm">
    1543                 Look, I'm in a small well!
    1544               </div>
    1545             </div>
    1546           </div>
    1547           <div class="col-lg-4">
    1548             <div class="bs-component p">
    1549               <div class="well well-lg">
    1550                 Look, I'm in a large well!
    1551               </div>
    1552             </div>
    1553           </div>
    1554         </div>
    1555       </div>
    1556 
    1557       <!-- Dialogs
    1558       ================================================== -->
    1559       <div class="bs-docs-section">
    1560 
    1561         <div class="row">
    1562           <div class="col-lg-12">
    1563             <div class="page-header">
    1564               <h2 id="dialogs">Dialogs</h2>
    1565             </div>
    1566           </div>
    1567         </div>
    1568         <div class="row">
    1569           <div class="col-lg-6">
    1570             <h3>Modals</h3>
    1571             <div class="bs-component p">
    1572               <div class="modal">
    1573                 <div class="modal-dialog">
    1574                   <div class="modal-content">
    1575                     <div class="modal-header">
    1576                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    1577                       <h4 class="modal-title">Modal title</h4>
    1578                     </div>
    1579                     <div class="modal-body">
    1580                       <p>One fine body…</p>
    1581                     </div>
    1582                     <div class="modal-footer">
    1583                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    1584                       <button type="button" class="btn btn-primary">Save changes</button>
    1585                     </div>
    1586                   </div>
    1587                 </div>
    1588               </div>
    1589             </div>
    1590           </div>
    1591           <div class="col-lg-6">
    1592             <h3>Popovers</h3>
    1593             <div class="bs-component p">
    1594               <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
    1595 
    1596               <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
    1597 
    1598               <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
    1599               sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
    1600 
    1601               <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
    1602             </div>
    1603             <h3>Tooltips</h3>
    1604             <div class="bs-component p">
    1605               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button>
    1606 
    1607               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button>
    1608 
    1609               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button>
    1610 
    1611               <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>
    1612             </div>
    1613           </div>
    1614         </div>
    1615       </div>
    1616 
    1617       <div id="source-modal" class="modal fade">
    1618         <div class="modal-dialog modal-lg">
    1619           <div class="modal-content">
    1620             <div class="modal-header">
    1621               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    1622               <h4 class="modal-title">Source Code</h4>
    1623             </div>
    1624             <div class="modal-body">
    1625               <pre></pre>
    1626             </div>
    1627           </div>
    1628         </div>
    1629       </div>
    1630 
    1631       <footer id="footer">
    1632         <div class="row">
    1633           <div class="col-lg-12">
    1634             <ul class="list-inline">
    1635               <li class="pull-right"><a href="#top">Back to top</a></li>
    1636               <li><a href="https://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap">SPIP-Zone</a></li>
    1637               <li><a href="https://zone.spip.org/trac/spip-zone/log/_plugins_/bootstrap?format=rss&limit=100&mode=stop_on_copy">RSS</a></li>
    1638               <li><a href="http://spip.net">SPIP</a></li>
    1639               <li><a href="https://twitter.com/spip">Twitter</a></li>
    1640             </ul>
    1641             <p>
    1642                     Code licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GPL</a>.<br/>
    1643                     Based on <a href="http://getbootstrap.com" rel="nofollow">Bootstrap</a>. Icons from <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>.
    1644             </p>
    1645           </div>
    1646         </div>
    1647 
    1648       </footer>
    16491716    </div>
    1650 
    1651         </body>
     1717  </footer>
     1718</body>
    16521719</html>
Note: See TracChangeset for help on using the changeset viewer.