source: spip-zone/_plugins_/bootstrap/trunk/demo/v3/bootstrap.html @ 90757

Last change on this file since 90757 was 90757, checked in by cedric@…, 5 years ago

largeur maxi sur la modale

File size: 69.0 KB
Line 
1<!DOCTYPE html>
2<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/affix.js}"></script>
31                <script src="#CHEMIN{js/alert.js}"></script>
32                <script src="#CHEMIN{js/button.js}"></script>
33                <script src="#CHEMIN{js/carousel.js}"></script>
34                <script src="#CHEMIN{js/collapse.js}"></script>
35                <script src="#CHEMIN{js/dropdown.js}"></script>
36                <script src="#CHEMIN{js/modal.js}"></script>
37                <script src="#CHEMIN{js/scrollspy.js}"></script>
38                <script src="#CHEMIN{js/tab.js}"></script>
39                <script src="#CHEMIN{js/tooltip.js}"></script>
40                <script src="#CHEMIN{js/popover.js}"></script>
41                <script src="#CHEMIN{js/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>
108      </div>
109    </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="http://www.spip.net" class='spip_url spip_out' rel='external'>http://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="http://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="http://www.spip-contrib.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      ================================================== -->
469        <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>
562                    </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>
581                      </li>
582                    </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>
588                    </form>
589                    <ul class="nav navbar-nav navbar-right">
590                      <li><a href="#">Link</a></li>
591                    </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>
625                      </li>
626                    </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>
632                    </form>
633                    <ul class="nav navbar-nav navbar-right">
634                      <li><a href="#">Link</a></li>
635                    </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 ">
997                <thead>
998                  <tr>
999                    <th>#</th>
1000                    <th>Column heading</th>
1001                    <th>Column heading</th>
1002                    <th>Column heading</th>
1003                  </tr>
1004                </thead>
1005                <tbody>
1006                  <tr>
1007                    <td>1</td>
1008                    <td>Column content</td>
1009                    <td>Column content</td>
1010                    <td>Column content</td>
1011                  </tr>
1012                  <tr>
1013                    <td>2</td>
1014                    <td>Column content</td>
1015                    <td>Column content</td>
1016                    <td>Column content</td>
1017                  </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>
1047                  </tr>
1048                </tbody>
1049              </table> 
1050            </div><!-- /example -->
1051          </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>
1292            </div>
1293          </div>
1294        </div>
1295      </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>
1368        </div>
1369      </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="http://zone.spip.org/trac/spip-zone/browser/_plugins_/bootstrap">SPIP-Zone</a></li>
1637              <li><a href="http://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>
1649    </div>
1650
1651        </body>
1652</html>
Note: See TracBrowser for help on using the repository browser.