Bootstrap pour SPIP

Page de demonstration

Ceci est le sur-titre de l’article

Charte typo par tetue

Ceci est le sous-titre de l’article

dimanche 1er juillet 2007, par Webmestre

Cette page présente un échantillon des enrichissements typographiques possibles sur ce site. Leur habillage est réalisé par le webmestre, en CSS, via des feuilles de style externes. Ce paragraphe constitue donc le chapeau.

Paragraphes

Premier paragraphe. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Ici, retour à la ligne, généré par le raccourci SPIP « _  ». Espace insécable.

Second paragraphe. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.


Troisième paragraphe, précédé d’une ligne horizontale de séparation, générée par le raccourci SPIP « ---- ». Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

Un intertitre normal

Voici du texte en italique et du texte en gras.
Voici un texte supprimé et le texte inséré en correction .
Une définition de terme avec la balise <dfn>.
Un sigle, par exemple W3C, est lu lettre par lettre, tandis que SPIP est un acronyme puisqu’il forme un mot qui est lu normalement.

Texte de gauche à droite et Texte de droite à gauche avec <bdo>.
Mise en exposant 2 et mise en indice : H2O.
Et voici une note de bas de page [1].

- Ici, exemple de raccourci SPIP « -  ». Attention, leur succession ne constitue pas une liste ! Pour les listes, voir ci-dessous.

— Un tiret long, généré par le raccourci SPIP « -- », utile pour les dialogues.

Hyperliens

SPIP distingue les liens internes des liens externes dont URLs directes : http://www.spip.net, et lien généré par le raccourci [->site2] : site 2.
Mieux vaut spécifier la langue de destination, par exemple : Bonne pratique Opquast N°129.
Lien vers une définition du glossaire prédéfini : Wikipédia
Lien vers un document, avec le raccourci [->doc3] : Titre du document
Lien vers un auteur, avec le raccourci [->auteur1] : Webmestre
Courriel : adresse@courriel.net
Une ancre vers les citations : #citations

Listes

Liste non ordonnée (ul), générée avec le raccourci SPIP « -*  » :

  • Élément de liste non numérotée
  • Élément de liste non numérotée
  • Élément de liste non numérotée
    • Plantes
      • Ficus
      • Olivier
    • Animaux de compagnie
      • Chat
      • Chien

Et une liste numérotée (ol), générée avec le raccourci SPIP « -#  » :

  1. Voici ma main : elle a cinq doigts. En voici deux, en voici trois.
    Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.
  2. L’index qui montre le chemin, Est le second doigt de la main.
  3. Entre l’index et l’annulaire, Le majeur paraît un grand frère.
  4. L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
  5. Le tout petit auriculaire Marche à côté de l’annulaire.

Regardez mes doigts travailler. Chacun fait son petit métier.

N’oublions pas les listes de définition, générées avec les balises HTML <dl>, <dd>, <dt> :

polatouche (n.m.)
Mammifère rongeur omnivore méconnu d’Eurasie ou d’Amérique du Nord, dit « écureuil volant » car il est capable de planer en ligne droite d’un arbre à l’autre grâce à son patagium (membrane qui réunit ses pattes à son corps). Pelage gris et blanc.
écureuil (n.m.)
Petit rongeur arboricole d’Europe à longue queue très touffue, excellent grimpeur, capable de sauts très étendus, amassant des provisions pour l’hiver et aisément familier de l’homme. Pelage gris ou roux.

Tableaux

Titre du tableau (caption)
entête entête entête
valeur valeur valeur
valeur valeur valeur
valeur valeur valeur

Citations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ceci est une citation au fil du texte (avec la balise HTML <q>).

Ceci est une citation ordinaire, avec la balise HTML <blockquote>. La route est longue mais la voie est libre.

Second paragraphe. Deux humains s’échangent une pièce de 1€. Chacun repart avec une pièce de 1€. Deux humains s’échangent une idée. Chacun repart avec deux idées.

Ceci est une citation générée avec le raccourci SPIP <quote>. La route est longue mais la voie est libre.

Second paragraphe. Deux humains s’échangent une pièce de 1€. Chacun repart avec une pièce de 1€. Deux humains s’échangent une idée. Chacun repart avec deux idées.

Je le vis, je rougis, je pâlis à sa vue
Un trouble s’éleva dans mon âme éperdue
Mes yeux ne voyaient plus, je ne pouvais parler
Je sentis tout mon corps et transir et brûler.
 
Ceci est une citation du Phédre de Racine, générée avec le raccourci SPIP <poesie>, idéal pour les vers des poèmes et chansons.

Maecenas mollis. Et voici du code, généré avec le raccourci SPIP <code> :

<?php
    // ceci est du langage php
    echo "bonjour";
?>

Sans oublier un raccourci-clavier (<kbd>), un extrait de script (<samp>) et une variable (<var>).

Et pour finir en beauté, voici une formule mathématique, générée avec <math> :
a = \sqrt{b^{2} + c^{2}}

À éviter

Ces balises ne doivent plus être utilisées car elles sont dépréciées en XHTML 1.0 Strict : exemple de basefont, exemple de font, exemple de u, exemple de s, exemple de strike, etc. Celles-ci sont déconseillées : exemple de b, exemple de i, exemple de big, exemple de small , exemple de tt.


Voir en ligne : Lien hypertexte


Ceci est le texte du Post-Scriptum. Cette page fait partie de la base de démarrage pour SPIP. Voici un autre exemple de cette charte typo.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Example addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

[1Une note de bas de page est, habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris en bas de page et proposant un complément d’information. Cette fonctionnalité est automatisée dans SPIP.

Button Large Button Small Button Disabled Button Button with Icon Split Button
Default Default Default Default Default
Primary Primary Primary Primary Primary
Info Info Info Info Info
Success Success Success Success Success
Warning Warning Warning Warning Warning
Danger Danger Danger Danger Danger
Inverse Inverse Inverse Inverse Inverse

Bootstrap Forms

Controls Bootstrap supports

In addition to freeform text, any HTML5 text-based input appears like so.

Some value here
Something may have gone wrong
Please correct the error
Woohoo!
Woohoo!

SPIP Forms

Titre du formulaire

Des fois on utilise un sous-titre (Étape 1/N)

Un texte d'introduction, qui peut parfois être sur plusieurs lignes. Un texte d'introduction, qui peut parfois être sur plusieurs lignes. Un texte d'introduction, qui peut parfois être sur plusieurs lignes. Un texte d'introduction, qui peut parfois être sur plusieurs lignes.

  • avec une énumération
  • de plusieurs items
  • qui doivent «bien tomber»

Des explications préliminaires, en début de formulaire

legend

Des explications dans un fieldset

legend
  • Des explications au dessus d'un champ de saisie

  • Des explications après un champ de saisie

  • Des explications au-dessus d'un choix

  • Des explications au-dessus d'un choix

  • Des explications au-dessous d'un choix

  • legend

Cliquez sur Annuler pour tester les messages d'erreur et sur Enregistrer pour tester les messages de succès.

 

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Pagination

Tabs

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Lists

Labels

Default Success Warning Important Info Inverse

Badges

Default Success Warning Important Info Inverse

Progress bars


Alerts

×

Alert block

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

× Error Change a few things up and try submitting again.
× Success You successfully read this important alert message.
× Information This alert needs your attention, but it's not super important.