Changeset 69111 in spip-zone


Ignore:
Timestamp:
Jan 20, 2013, 3:24:37 PM (7 years ago)
Author:
cedric@…
Message:

Variante de la page de demo avec la page de typo de http://demo.spip.net/spip.php?article11 pour avoir un aperçu plus complet de tout ce qu'on utilise dans SPIP

Location:
_plugins_/bootstrap/demo
Files:
2 added
1 copied

Legend:

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

    r69018 r69111  
    126126        ================================================== -->
    127127        <section id="typography">
    128           <div class="page-header">
    129             <h1>Typography</h1>
    130           </div>
    131 
    132           <!-- Headings & Paragraph Copy -->
    133           <div class="row">
    134 
    135             <div class="span4">
    136               <div class="well">
    137                 <h1>h1. Heading 1</h1>
    138                 <h2>h2. Heading 2</h2>
    139                 <h3>h3. Heading 3</h3>
    140                 <h4>h4. Heading 4</h4>
    141                 <h5>h5. Heading 5</h5>
    142                 <h6>h6. Heading 6</h6>
    143               </div>
    144             </div>
    145 
    146             <div class="span4">
    147               <h3>Example body text</h3>
    148               <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    149               <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
    150             </div>
    151 
    152             <div class="span4">
    153               <h3>Example addresses</h3>
    154               <address>
    155                 <strong>Twitter, Inc.</strong><br>
    156                 795 Folsom Ave, Suite 600<br>
    157                 San Francisco, CA 94107<br>
    158                 <abbr title="Phone">P:</abbr> (123) 456-7890
    159               </address>
    160               <address>
    161                 <strong>Full Name</strong><br>
    162                 <a href="mailto:#">first.last@gmail.com</a>
    163               </address>
    164             </div>
    165 
    166           </div>
    167 
    168           <div class="row">
    169             <div class="span6">
    170               <blockquote>
    171                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    172                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    173               </blockquote>
    174             </div>
    175             <div class="span6">
    176               <blockquote class="pull-right">
    177                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    178                 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    179               </blockquote>
    180             </div>
    181           </div>
     128                <div class="row">
     129
     130                 <div class="span8">
     131
     132                        <div class="cartouche">
     133                                <p class="surtitre">Ceci est le sur-titre de l’article</p>
     134
     135                                <h1 class="surlignable">Charte typo</h1>
     136
     137                                <p class="soustitre">Ceci est le sous-titre de l’article</p>
     138
     139                                <p class="info-publi"><abbr class="published" title="2007-06-30T22:00:00Z">dimanche 1er juillet 2007</abbr><span
     140                                                class="sep">, </span><span class="auteurs">par  <span class="vcard author"><a class="url fn spip_in"
     141                                                                                                                                                                                                                                                                                                                                                                        href="spip.php?auteur1">Webmestre</a></span></span>
     142                                </p>
     143
     144                        </div>
     145
     146                        <div class="chapo surlignable"><p>Cette page présente un échantillon des enrichissements typographiques possibles
     147                                sur ce site. Leur habillage est réalisé par le webmestre, en&nbsp;CSS, via des feuilles de style externes. Ce&nbsp;paragraphe
     148                                constitue donc le&nbsp;chapeau.</p></div>
     149                        <div class="texte surlignable"><h3 class="spip">Paragraphes</h3>
     150
     151                                <p>Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse
     152                                        lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.<br
     153                                                        class='manualbr'/>Ici, retour à la ligne, généré par le raccourci SPIP &#171;&nbsp;<code class='spip_code'
     154                                                                                                                                                                                                                                                                                                                                                                                                                         dir='ltr'>_ </code>&nbsp;&#187;.
     155                                        Espace&nbsp;insécable.</p>
     156
     157                                <p>Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
     158                                        sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque
     159                                        congue.</p>
     160                                <hr class="spip"/>
     161                                <p>Troisième paragraphe, précédé d&#8217;une ligne horizontale de séparation, générée par le raccourci SPIP
     162                                        &#171;&nbsp;<code class='spip_code' dir='ltr'>----</code>&nbsp;&#187;. Praesent egestas leo in pede. Praesent
     163                                        blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>
     164
     165                                <h3 class="spip">Un intertitre normal</h3>
     166
     167                                <p>Voici du <i>texte en italique</i> et du <strong>texte en gras</strong>.<br class='manualbr'/>Voici un
     168                                        <del>texte supprimé</del>
     169                                        et le
     170                                        <ins>texte inséré en correction</ins>
     171                                        .<br class='manualbr'/>Une <dfn>définition</dfn> de terme avec la balise <code class='spip_code' dir='ltr'>
     172                                                &lt;dfn&gt;</code>.<br class='manualbr'/>Un sigle, par exemple <abbr title="World Wide Web Consortium"
     173                                                                                                                                                                                                                                                                                                                                 lang="en">W3C</abbr>, est lu lettre par
     174                                        lettre, tandis que <acronym title="Système de Publication pour Internet">SPIP</acronym> est un acronyme puisqu&#8217;il
     175                                        forme un mot qui est lu normalement.
     176                                </p>
     177
     178                                <p><bdo dir="ltr">Texte de gauche à droite</bdo> et <bdo dir="rtl">Texte de droite à gauche</bdo> avec <code
     179                                                class='spip_code' dir='ltr'>&lt;bdo&gt;</code>.<br class='manualbr'/>Mise en exposant <sup>2</sup> et mise
     180                                        en indice&nbsp;: <abbr>H<sub>2</sub>O</abbr>.<br class='manualbr'/>Et voici une note de bas de page<span
     181                                                        class="spip_note_ref">&nbsp;[<a href='#nb1' class='spip_note' rel='footnote'
     182                                                                                                                                                                                        title='Une note de bas de page est, habituellement, signalée par un numéro placé à&nbsp;(...)'
     183                                                                                                                                                                                        id='nh1'>1</a>]</span>.</p>
     184
     185                                <p><img src="local/cache-vignettes/L8xH11/puce-32883.gif" width='8' height='11' class='puce' alt="-"/>&nbsp;Ici,
     186                                        exemple de raccourci SPIP &#171;&nbsp;<code class='spip_code' dir='ltr'>- </code>&nbsp;&#187;. Attention, leur
     187                                        succession ne constitue pas une liste&nbsp;! Pour les listes, voir ci-dessous.</p>
     188
     189                                <p>&mdash;&nbsp;Un tiret long, généré par le raccourci SPIP &#171;&nbsp;<code class='spip_code'
     190                                                                                                                                                                                                                                                                                                                                                        dir='ltr'>--</code>&nbsp;&#187;,
     191                                        utile pour les dialogues.</p>
     192
     193                                <h3 class="spip">Hyperliens</h3>
     194
     195                                <p>SPIP distingue les <a href="spip.php?article1" class='spip_in'>liens internes</a> des <a
     196                                                href="http://checklists.opquast.com/11/criteria/687/" class='spip_out'
     197                                                title="Bonne pratique Opquast N&#176;188" rel='external'>liens externes</a> dont URLs directes&nbsp;: <a
     198                                                href="http://www.spip.net" class='spip_url spip_out' rel='external'>http://www.spip.net</a>, et lien généré
     199                                        par le raccourci <code class='spip_code' dir='ltr'>[-&gt;site2]</code>&nbsp;: <a href="spip.php?site2"
     200                                                                                                                                                                                                                                                                                                                                                                         class='spip_out'>site
     201                                                2</a>.<br class='manualbr'/>Mieux vaut spécifier la langue de destination, par exemple&nbsp;: <a
     202                                                        href="http://checklists.opquast.com/11/criteria/628/" class='spip_out' hreflang='en' rel='external'>Bonne
     203                                                pratique Opquast N&#176;129</a>.<br class='manualbr'/>Lien vers une définition du glossaire prédéfini&nbsp;:
     204                                        <a href="http://fr.wikipedia.org/wiki/Wikip%C3%A9dia" class='spip_glossaire' rel='external'>Wikipédia</a><br
     205                                                        class='manualbr'/>Lien vers un document, avec le raccourci <code class='spip_code'
     206                                                                                                                                                                                                                                                                                                                         dir='ltr'>[-&gt;doc3]</code>&nbsp;: <a
     207                                                        href="IMG/jpg/doc3.jpg" class='spip_in' type='image/jpeg'>Titre du document</a><br class='manualbr'/>Lien
     208                                        vers un auteur, avec le raccourci <code class='spip_code' dir='ltr'>[-&gt;auteur1]</code>&nbsp;: <a
     209                                                        href="spip.php?auteur1" class='spip_in'>Webmestre</a><br class='manualbr'/>Courriel&nbsp;: <a
     210                                                        href="mailto:adresse@courriel.net" class='spip_mail'>adresse@courriel.net</a><br class='manualbr'/>Une
     211                                        ancre vers les citations&nbsp;: <a href="#citations" class='spip_ancre'>#citations</a></p>
     212
     213                                <h3 class="spip">Listes</h3>
     214
     215                                <p>Liste non ordonnée (<code class='spip_code' dir='ltr'>ul</code>), générée avec le raccourci SPIP &#171;&nbsp;<code
     216                                                class='spip_code' dir='ltr'>-* </code>&nbsp;&#187;&nbsp;:</p>
     217                                <ul class="spip">
     218                                        <li> Élément de liste non numérotée</li>
     219                                        <li> Élément de liste non numérotée</li>
     220                                        <li> Élément de liste non numérotée
     221                                                <ul class="spip">
     222                                                        <li> Plantes
     223                                                                <ul class="spip">
     224                                                                        <li> Ficus</li>
     225                                                                        <li> Olivier</li>
     226                                                                </ul>
     227                                                        </li>
     228                                                        <li> Animaux de compagnie
     229                                                                <ul class="spip">
     230                                                                        <li> Chat</li>
     231                                                                        <li> Chien</li>
     232                                                                </ul>
     233                                                        </li>
     234                                                </ul>
     235                                        </li>
     236                                </ul>
     237                                <p>Et une liste numérotée (<code class='spip_code' dir='ltr'>ol</code>), générée avec le raccourci SPIP &#171;&nbsp;<code
     238                                                class='spip_code' dir='ltr'>-# </code>&nbsp;&#187;&nbsp;:</p>
     239                                <ol class="spip">
     240                                        <li> Voici ma main&nbsp;: elle a cinq doigts. En voici deux, en voici trois.<br class='manualbr'/>Le premier,
     241                                                ce gros bonhomme, C’est le pouce qu’il se nomme.
     242                                        </li>
     243                                        <li> L’index qui montre le chemin, Est le second doigt de la main.</li>
     244                                        <li> Entre l’index et l’annulaire, Le majeur paraît un grand frère.</li>
     245                                        <li> L’annulaire porte l’anneau, Avec sa bague, il fait le beau.</li>
     246                                        <li> Le tout petit auriculaire Marche à côté de l’annulaire.</li>
     247                                </ol>
     248                                <p>Regardez mes doigts travailler. Chacun fait son petit métier.</p>
     249
     250                                <p>N&#8217;oublions pas les listes de définition, générées avec les balises HTML <code class='spip_code'
     251                                                                                                                                                                                                                                                                                                                                                                                         dir='ltr'>
     252                                        &lt;dl&gt;</code>, <code class='spip_code' dir='ltr'>&lt;dd&gt;</code>, <code class='spip_code' dir='ltr'>&lt;dt&gt;</code>&nbsp;:
     253                                </p>
     254                                <dl class="spip">
     255                                        <dt>polatouche (n.m.)</dt>
     256                                        <dd><span class='spip_document_1 spip_documents spip_documents_right' style='float:right; width:63px;'>
     257                <img src='#CHEMIN{demo/spip.gif}' width='63' height='40' alt=""/></span>Mammifère rongeur
     258                                                omnivore méconnu d&#8217;Eurasie ou d&#8217;Amérique du Nord, dit &#171;&nbsp;écureuil volant&nbsp;&#187;
     259                                                car il est capable de planer en ligne droite d&#8217;un arbre à l&#8217;autre grâce à son patagium (membrane
     260                                                qui réunit ses pattes à son corps). Pelage gris et blanc.
     261                                        </dd>
     262                                        <dt>écureuil (n.m.)</dt>
     263                                        <dd>Petit rongeur arboricole d&#8217;Europe à longue queue très touffue, excellent grimpeur, capable de sauts
     264                                                très étendus, amassant des provisions pour l&#8217;hiver et aisément familier de l&#8217;homme. Pelage gris
     265                                                ou roux.
     266                                        </dd>
     267                                </dl>
     268                                <h3 class="spip">Tableaux</h3>
     269                                <table class="spip" summary="summary">
     270                                        <caption>Titre du tableau (caption)</caption>
     271                                        <thead>
     272                                        <tr class='row_first'>
     273                                                <th id='idcbd5_c0'>entête</th>
     274                                                <th id='idcbd5_c1'>entête</th>
     275                                                <th id='idcbd5_c2'>entête</th>
     276                                        </tr>
     277                                        </thead>
     278                                        <tbody>
     279                                        <tr class='row_odd odd'>
     280                                                <td headers='idcbd5_c0'>valeur</td>
     281                                                <td headers='idcbd5_c1'>valeur</td>
     282                                                <td headers='idcbd5_c2'>valeur</td>
     283                                        </tr>
     284                                        <tr class='row_even even'>
     285                                                <td headers='idcbd5_c0'>valeur</td>
     286                                                <td headers='idcbd5_c1'>valeur</td>
     287                                                <td headers='idcbd5_c2'>valeur</td>
     288                                        </tr>
     289                                        <tr class='row_odd odd'>
     290                                                <td headers='idcbd5_c0'>valeur</td>
     291                                                <td headers='idcbd5_c1'>valeur</td>
     292                                                <td headers='idcbd5_c2'>valeur</td>
     293                                        </tr>
     294                                        </tbody>
     295                                </table>
     296                                <p><a name="citations"></a></p>
     297
     298                                <h3 class="spip">Citations</h3>
     299
     300                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <q>Ceci est une citation au fil du texte (avec la
     301                                        balise HTML <code class='spip_code' dir='ltr'>&lt;q&gt;</code>)</q>.</p>
     302                                <blockquote>Ceci est une citation ordinaire, avec la balise HTML <code class='spip_code' dir='ltr'>&lt;blockquote&gt;</code>.
     303                                        La route est longue mais la voie est libre.
     304                                        <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
     305                                                Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
     306                                </blockquote>
     307                                <blockquote class="spip">
     308                                        <p>Ceci est une citation générée avec le raccourci SPIP <code class='spip_code' dir='ltr'>&lt;quote&gt;</code>.
     309                                                La route est longue mais la voie est libre.</p>
     310
     311                                        <p>Second paragraphe. Deux humains s’échangent une pièce de&nbsp;1€. Chacun repart avec une pièce de&nbsp;1€.
     312                                                Deux humains s’échangent une idée. Chacun repart avec deux idées.</p>
     313                                </blockquote>
     314                                <blockquote class="spip_poesie">
     315                                        <div>Je le vis, je rougis, je pâlis à sa vue</div>
     316                                        <div>Un trouble s’éleva dans mon âme éperdue</div>
     317                                        <div>Mes yeux ne voyaient plus, je ne pouvais parler</div>
     318                                        <div>Je sentis tout mon corps et transir et brûler.</div>
     319                                        <div>&nbsp;</div>
     320                                        <div>Ceci est une citation du <cite>Phédre</cite> de Racine, générée avec le raccourci&nbsp;SPIP <code
     321                                                        class='spip_code' dir='ltr'>&lt;poesie&gt;</code>, idéal pour les vers des poèmes et chansons.
     322                                        </div>
     323                                </blockquote>
     324                                <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;:
     325                                </p>
     326
     327                                <div style='text-align: left;' class='spip_code' dir='ltr'><code>&lt;?php<br/>
     328                                        &nbsp; &nbsp; // ceci est du langage php<br/>
     329                                        &nbsp; &nbsp; echo &quot;bonjour&quot;;<br/>
     330                                        ?&gt;</code></div>
     331                                <textarea readonly='readonly' cols='40' rows='7' class='spip_cadre' dir='ltr'>Le raccourci SPIP &lt;cadre&gt;
     332                                        permet publier des extraits de code que l&#039;on peut facilement copier-coller.
     333
     334                                        &lt;?php
     335                                        // ceci est du langage php
     336                                        echo &quot;au revoir&quot;;
     337                                        ?&gt;</textarea>
     338
     339                                <p>Sans oublier un <kbd>raccourci-clavier</kbd> (<code class='spip_code' dir='ltr'>&lt;kbd&gt;</code>), un
     340                                        <samp>extrait de script</samp> (<code class='spip_code' dir='ltr'>&lt;samp&gt;</code>) et une
     341                                        <var>variable</var> (<code class='spip_code' dir='ltr'>&lt;var&gt;</code>).</p>
     342
     343                                <p>Et pour finir en beauté, voici une formule mathématique, générée avec <code class='spip_code' dir='ltr'>&lt;math&gt;</code>&nbsp;:<br
     344                                                class='autobr'/>
     345                                        <img src="#CHEMIN{demo/math.png}"
     346                                                         style='vertical-align:middle;' width='85' height='38' alt="a = \sqrt{b^{2} + c^{2}}"
     347                                                         title="a = \sqrt{b^{2} + c^{2}}"/></p>
     348
     349                                <h3 class="spip">À éviter</h3>
     350
     351                                <p>Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML&nbsp;1.0 Strict&nbsp;:
     352                                        <basefont>exemple de basefont</basefont>, <font>exemple de font</font>, <u>exemple de u</u>, <s>exemple de
     353                                                s</s>, <strike>exemple de strike</strike>, etc. Celles-ci sont déconseillées&nbsp;: <b>exemple de b</b>, <i>exemple
     354                                                de i</i>, <big>exemple de big</big>,
     355                                        <small>exemple de small</small>
     356                                        , <tt>exemple de tt</tt>.
     357                                </p>
     358                        </div>
     359
     360                        <hr/>
     361                        <p class="hyperlien">Voir en ligne : <a href="http://www.spip.net">Lien hypertexte</a></p>
     362
     363                        <hr/>
     364                        <div class="ps surlignable">
     365                                <p>Ceci est le texte du Post-Scriptum. Cette page fait partie de la <a href="http://www.spip-contrib.net/3716"
     366                                                                                                                                                                                                                                                                                                                         class='spip_out' rel='external'>base de
     367                                        démarrage</a> pour SPIP. Voici un autre <a href="http://romy.tetue.net/11" class='spip_out' rel='external'>exemple
     368                                        de cette charte typo</a>.</p></div>
     369
     370
     371                        <div class="notes">
     372                                <div id='nb1'>
     373                                        <p><span class="spip_note_ref">[<a href='#nh1' class='spip_note' title='Notes 1'
     374                                                                                                                                                                                 rev='footnote'>1</a>]&nbsp;</span>Une note de bas de page est,
     375                                                habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris en bas de page et
     376                                                proposant un complément d’information. Cette fonctionnalité est automatisée dans SPIP.</p>
     377                                </div>
     378                        </div>
     379                 </div>
     380                <div class="span4">
     381                        <div class="well">
     382     <h1>h1. Heading 1</h1>
     383     <h2>h2. Heading 2</h2>
     384     <h3>h3. Heading 3</h3>
     385     <h4>h4. Heading 4</h4>
     386     <h5>h5. Heading 5</h5>
     387     <h6>h6. Heading 6</h6>
     388   </div>
     389                        <h3>Example addresses</h3>
     390   <address>
     391     <strong>Twitter, Inc.</strong><br>
     392     795 Folsom Ave, Suite 600<br>
     393     San Francisco, CA 94107<br>
     394     <abbr title="Phone">P:</abbr> (123) 456-7890
     395   </address>
     396   <address>
     397     <strong>Full Name</strong><br>
     398     <a href="mailto:#">first.last@gmail.com</a>
     399   </address>
     400
     401                </div>
     402                </div>
    182403
    183404        </section>
Note: See TracChangeset for help on using the changeset viewer.