header RT26

Les Typographies disponibles dans le template

Les titres | Contenu spécial | Les listes | Les paragraphes | Les bulles | Les boites et légendes | Les modules

1- Les titres

Titre 1

pour obtenir cette typographie, il faut utiliser la syntaxe <h1>contenu </h1>

Titre 1: dégradé jaune centré

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="h1_jaune">contenu </h1>

Titre 1 : dégradé centré

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="titre1Centre">contenu </h1>

Titre 1 : dégradé

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="titre1Degrade">contenu </h1>

Titre 2

pour obtenir cette typographie, il faut utiliser la syntaxe <h2>contenu</h2>

Titre 3

pour obtenir cette typographie, il faut utiliser la syntaxe <h3>contenu</h3>

Titre 4

pour obtenir cette typographie, il faut utiliser la syntaxe <h4>contenu</h4>

Titre 5

pour obtenir cette typographie, il faut utiliser la syntaxe <h5>contenu</h5>

Titre 6

pour obtenir cette typographie, il faut utiliser la syntaxe <h6>contenu</h6>

2- Contenu spécial

Insersion de Code :

#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}

Pour obtenir cette typographie, il faut utiliser la syntaxe <pre></pre> ou <div class="code"> à noter que celà fonctionne aussi avec  la balise <p>.

Lettrine :

Nous allons utiliser la syntaxe <p><span class="dropcap">1ere lettre</span>contenu</p>

CCeci est un exemple d'utilisation de la classe dropcap. On utilise souvent ce style pour la première lettre d'un article ou d'un paragraphe dans les magazines ou journaux. Si vous essayez cette pseudo classe, il faut avoir suffisament de mots pour que l'affichage soit sur plusieurs lignes, sinon le rendu ne sera pas terrible.

Citations :

Pour obtenir ce résultat, il faut utiliser la syntaxe suivante :

<blockquote><span class="open"></span>contenu<span class="close"></span></blockquote>

 Il faut impérativement désactiver le nettoyage du code du plugin de l'éditeur, sinon les quotes ne seront pas affichées

 

3- Les styles de listes

  1. Ceci est une liste ordonnée.
  2. Voici la syntaxe à utiliser :
  3. <ol><li>texte première ligne</li><li>texte deuxième ligne</li><li>texte troisième ligne</li></ol>
  • Ceci est une liste non-ordonnée.
  • Voici la syntaxe à utiliser :
  • <ul><li>texte première ligne</li><li>texte deuxième ligne</li><li>texte troisième ligne</li></ul>
  • Ceci est une liste flèche.
  • voici la syntaxe à utiliser :
  • <ul class="arrow"><li><span class="icon"></span>contenu de la liste ici</li></ul>
  • Ceci est une liste étoile.
  • Voici la syntaxe à utiliser :
  • <ul class="star"><li><span class="icon"> </span>contenu de la liste ici</li></ul>
  • Ceci est un exemple de  Checklist.
  • Utiliser <ul class="checklist"><li><span class="icon"> </span>Votre texte ici</li></ul>
  • En utilisant la syntaxe ci-dessus vous obtiendrez ce résultat.
  • Ceci est une Liste téléphone.
  • Utiliser <ul class="phone"><li><span class="icon"> </span>Le contenu de votre liste ici</li></ul>
  • Utilisez la syntaxe ci-dessus pour obtenir ce résultat.
  • Ceci est une Liste adresses.
  • Utiliser <ul class="address"><li><span class="icon"> </span>contenu de votre liste ici</li></ul>
  • Utilisez la syntaxe ci-dessus pour obtenir ce résultat.

01Ceci est un exemple de bloc de nombre. Utiliser <p class="blocknumber-1"><span class="bignumber">01.</span>Votre contenu ici!</p> pour avoir un bloc de nombre!

152Voici un autre exemple de bloc de nombre. Utiliser <p class="blocknumber-2"><span class="bignumber">152.</span>Votre texte ici!</p> pour avoir un bloc de nombre !

199Ceci est encore un exemple de bloc de nombre. Utiliser <p class="blocknumber-3"><span class="bignumber">199.</span>votre texte ici !</p> pour former un bloc de nombre !

4- Les styles de paragraphes

Utiliser la syntaxe suivante : <p class="error"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="message"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="tips"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="key"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="tag"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="cart"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="doc"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="note"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="photo"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

Utiliser la syntaxe suivante : <p class="mobi"><span class="icon"></span>Votre message ici</p> pour réaliser ceci.

5- Les bulles

 
 
 
 

<div class="bubble bubble-l1 clearfix">
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur ici</span>
</div>

Nom de l'auteur ici

 

<div class="bubble bubble-l2 clearfix">
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>

Nom de l'auteur

 

 
 
 
 

<div class="bubble bubble-d1 clearfix">
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur</span>
</div>

Nom de l'auteur

 

<div class="bubble bubble-d2 clearfix">
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>
Nom de l'auteur
 
 
 
 
<div class="bubble bubble-hl1 clearfix">
<div class="box-ct">
<div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div>
Contenu de la bulle
</div>
<span class="arrow"> </span> <span class="author">Nom de l'auteur</span>
</div>
Nom de l'auteur
<div class="bubble bubble-hl2 clearfix">
<div class="box-ct">
Contenu de la bulle
</div>
<span class="arrow"> </span>
<span class="author">Nom de l'auteur</span>
</div>
Nom de l'auteur

6- Les styles de boites et légendes

Ceci est une note. Utilisez la syntaxe : <p class="box-sticky">Le texte de votre note ici</p> pour afficher votre note.

Ceci est une boite de téléchargement. Utilisez la syntaxe : <p class="box-download">Le texte de votre boite de téléchargement ici</p> pour afficher ceci.

Ceci est une boite grise. Utilisez la syntaxe : <p class="box-grey">Le texte de votre boite grise ici</p> pour afficher ceci.

Ceci est une boite hilite. Utilisez la syntaxe : <p class="box-hilite">Le texte de votre boite hilite ici</p> pour afficher ceci.

Style Légende

utiliser cette syntaxe : <div class="legend"><h3 class="legend-title">Votre titre ici</h3><p>Le texte de votre légende ici.</p></div> pour afficher le style légende comme ici.

Style Légende en surbrillance

utiliser cette syntaxe : <div class="legend-hilite"><h3 class="legend-title">Votre titre ici</h3><p>Le texte de votre légende ici.</p></div> pour afficher le style légende comme ici.

7- Style de module spécial

Utiliser ce suffixe de classe de module : _badge badge-top pour afficher ce badge sur tous les modules que vous voulez !
Utiliser ce suffixe de classe de module : _badge badge-new pour afficher ce badge sur tous les modules que vous voulez !
Utiliser ce suffixe de classe de module : _badge badge-pick pour afficher ce badge sur tous les modules que vous voulez !
Utiliser ce suffixe de classe de module : _badge badge-hot pour afficher ce badge sur tous les modules que vous voulez !

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text
h6. Heading Secondary text

TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

Example body text

This is a lead paragraph. Make a paragraph stand out by adding .lead.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

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.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
P: (123) 456-7890
This email address is being protected from spambots. You need JavaScript enabled to view it.

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Alignment classes

This is a left aligned text .text-left

This is a center aligned text .text-center

This is a right aligned text .text-right

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

Blockquotes

This is a <blockquote> in a <.well>.

Quote's author in Source Title

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

Quote's author in Source Title

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

Quote's author in Source Title

Brand Colors

#0077bb
Brand Primary
#669900
Brand Secondary
#ff8800
Brand Warning
#cc0000
Brand Danger
#0099cc
Brand Info
#669900
Brand Success

Grayscale Levels

#222222
Gray Darker
#444444
Gray Dark
#666666
Gray
#999999
Gray Light
#eeeeee
Gray Lighter
#f7f7f7
Gray Lightest

Tabs

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Buttons

Inputs

Sample Basic Form

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Primary Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Masthead

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Primary Masthead

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default example

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Custom content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

More nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Basic Tables

#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

Bordered Tables

#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

Alerts and Notifications

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.

Labels

Default Primary Success Info Warning Danger

List groups

Panels

Panel heading
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!