Système de grille

Utilisation simple

Il y a une grille responsive de 12 colonnes.
Ajoutez un ensemble de .row (lignes) dans votre div .container (conteneur), et mettez un ensemble de .span[1..12] (colonnes) dans vos lignes.

Exemple :

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span2
.span2
.span2
.span2
.span1
.span3
.span3
.span3

Colonnes imbriquées

Vous pouvez imbriquer votre contenu avec la grille par défaut. Ajoutez simplement une nouvelle .row (ligne) et un ensemble de .span* (colonnes) dans votre .span* (colonne) déjà existante.
Les lignes imbriquées devraient inclure un ensemble de colonnes de la taille de la colonne parente.

Exemple :

.span9
.span3
.span1
.span2
.span4
.span1
.span2
.span1
.span2
.span1
.span1
Vous voulez voir une grille complète de démonstration ?

Eléments de largeur maximale

Vous pouvez définir des images et des vidéos comme ayant une largeur maximale. Peut importe la résolution de l'écran, ils occuperont la largeur maximale de leur élément parent.

Conteneurs de largeur maximale

Si vous voulez ajouter un ensemble de lignes qui prennent toute la largeur de la page, insérez-les dans une div avec la classe .container-full-width au lieu de l'habituel .container.

Images de largeur maximale

Pour des images responsive, utilisez la classe .img-full-width directement sur l'image.

Exemples :

Vidéos de largeur maximale

Pour des vidéos responsive, utilisez la classe .video-full-width sur une div parente.

Exemple :

  1. <div class="video-full-width">
  2. <iframe src="http://www.youtube.com/embed/pj-T_LxSCng?wmode=transparent" frameborder="0"></iframe>
  3. </div>

Typographie

Titres

Tous les titres HTML, de <h1> à <h6> sont disponibles.

Exemple :

h1. Titre 1

h2. Titre 2

h3. Titre 3

h4. Titre 4

h5. Titre 5
h6. Titre 6

Gras & Italique

Vous pouvez utiliser les balises strong et em.

Classes d'alignement

Vous pouvez utiliser class="align-left", class="align-center" et class="align-right" pour aligner votre contenu (respectivement à gauche, au centre et à droite).

Citations

Des blocs de citation sont disponible pour mettre en forme des citations dans vos documents.

Bloc de citation par défaut

Englobez votre citation des balises <blockquote>. Pour une citation accompagnée d'une barre verticale, ajoutez un <p>.

Exemples :
Gummies jelly-o jelly-o danish sugar plum pudding candy canes.

Topping halvah apple pie sugar plum gummies chupa chups. Candy canes wypas icing tiramisu bear claw apple pie cupcake.

Citation avec une source

Ajoutez une balise <cite> pour identifier la source.

Exemple :

Chocolate cake cookie marzipan cotton candy. Croissant candy oat cake donut cake faworki candy pie chocolate.

The Cupcake Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The Cupcake Ipsum

Code

Sur une ligne

Englobez votre code avec la balise <code>.

Dans un bloc

Utilisez la balise <pre> pour plusieurs lignes de code. Pour ajouter de la coloration syntaxique, jetez un oeil à google-code-prettify.

Exemple :
  1. <div class="row">
  2. <div class="span12">
  3. <p>mon paragraphe</p>
  4. </div>
  5. </div>

Tableaux

Créez seulement vos tableaux comme d'habitude et vous obtiendrez avec une belle mise en forme.

Exemple :

# Prénom Nom Maître
1 Picchu Thomas Nico
2 Doda Maróti Hajni
3 Kira Maróti Hajni

Formulaires

Rien d'exceptionnel ici. Vous pouvez créer des formulaires horizontaux et verticaux avec Ministrap.

Exemples :

  1. <form class="form-horizontal">
  2. <input type="text" class="span2" placeholder="Nom d'utilisateur"/>
  3. <input type="text" class="span2" placeholder="Mot de passe"/>
  4. <div class="input-check"><input type="checkbox" id="remember2" name="remember"/> <label for="remember2">Souvenez-vous de moi</label></div>
  5. <input type="submit" class="btn" value="Se connecter"/>
  6. </form>

Icônes

Ministrap inclut Open Iconic, un pack de plus de 200 icônes très simples à utiliser.

Exemples :
<i class="oi oi-heart"></i>:
<i class="oi oi-graph"></i>:
<i class="oi oi-file"></i>:
<i class="oi oi-map-marker"></i>:
<i class="oi oi-musical-note"></i>:
<i class="oi oi-breaker"></i>:

Retrouvez toutes les icônes disponibles sur le site officiel : https://useiconic.com/open/

Boutons

Boutons par défaut

Le style de bouton peut être appliqué à n'importe quel élément à l'aide de la classe .btn.
Bouton class=""
Défaut btn
Bleu btn blue
Vert btn green
Orange btn orange
Rouge btn red
Violet btn violet
Marron btn brown
Rose btn pink
Bleu foncé btn dark-blue
Vert foncé btn dark-green

Tailles de boutons

Vous voulez des boutons plus grands ou plus petits ? Ajoutez .btn-large, .btn-small, ou .btn-mini pour changer la taille de vos boutons.

Exemple :

Forme de boutons

Vous voulez des formes différentes ? Ajoutez .oval ou .square.

Exemple :

Etat désactivé

Grand bouton Grand bouton

Etiquettes et badges

Etiquettes Code
Défaut <span class="label">Défaut</span>
Réussi <span class="label green">Réussi</span>
Attention <span class="label orange">Attention</span>
Important <span class="label red">Important</span>
Info <span class="label blue">Info</span>
Violet <span class="label violet">Violet</span>
Badges Code
1 <span class="badge">1</span>
2 <span class="badge green">2</span>
3 <span class="badge orange">3</span>
4 <span class="badge red">4</span>
5 <span class="badge blue">5</span>
6 <span class="badge pink">6</span>

Auxiliaires

Utilisez les classes suivantes pour ajouter un effet rapide et positionner vos éléments : .align-left, .align-center, .align-right, .rounded, .circle, .shadow, .oval, .square et .polaroid.

Exemple :

  1. <img src="img/3.jpg" width="150" height="150" class="rounded shadow"/>
Créé par Nicolas Thomas, de l'Agence Web MangoLight.
60px
140px
220px