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 :

<div class="video-full-width">
  <iframe src="http://www.youtube.com/embed/pj-T_LxSCng?wmode=transparent" frameborder="0"></iframe>
</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 :
<div class="row">
	<div class="span12">
		<p>mon paragraphe</p>
	</div>
</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 :

<form class="form-horizontal">
	<input type="text" class="span2" placeholder="Nom d'utilisateur"/>
	<input type="text" class="span2" placeholder="Mot de passe"/>
	<div class="input-check"><input type="checkbox" id="remember2" name="remember"/> <label for="remember2">Souvenez-vous de moi</label></div>
	<input type="submit" class="btn" value="Se connecter"/>
</form>
Conditions d'utilisation :
<form class="well span7">
	<div class="row">
		<div class="span2 align-right">
			<label for="firstname">Prénom :</label>
		</div>
		<div class="span4">
			<input type="text" name="firstname" id="firstname" placeholder="Jean"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="lastname">Nom :</label>
		</div>
		<div class="span4">
			<input type="text" name="lastname" id="lastname" placeholder="Dupont"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="email">Adresse e-mail :</label>
		</div>
		<div class="span4">
			<input type="text" disabled="disabled" name="email" id="email" placeholder="jean.dupont@fournisseur.com"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="birthdate">Date de naissance :</label>
		</div>
		<div class="span4">
			<input type="text" name="birthdate" id="birthdate" placeholder="12/25/1978"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="picture">Photo :</label>
		</div>
		<div class="span4">
			<input type="file" name="picture" id="picture" placeholder="jpg"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">Conditions d'utilisation :</div>
		<div class="span4 align-center">
			<textarea disabled="disabled" rows="5" class="terms">Wypas cupcake tart ice cream bear claw gingerbread sugar plum wypas. Oat cake halvah lollipop sweet roll caramels candy canes jelly beans dessert cotton candy. Cake candy apple pie. Lollipop tart gummi bears caramels croissant caramels dragée. Topping faworki lollipop sweet fruitcake sugar plum cheesecake faworki cotton candy. Pudding pie cookie topping chocolate. Muffin chupa chups sweet oat cake chocolate marshmallow sesame snaps marzipan. Croissant chocolate candy danish bonbon dragée biscuit powder tootsie roll. Danish danish chupa chups. Jelly chocolate bar danish chupa chups liquorice topping dragée dragée bear claw. Sweet roll carrot cake wypas candy pie apple pie. Sesame snaps croissant bonbon topping cake sesame snaps lemon drops chocolate cake jujubes.
	Oat cake tootsie roll lollipop gummies danish wypas lollipop macaroon. Caramels donut sweet pie sweet roll jelly beans candy canes lollipop danish. Pie carrot cake pastry danish dragée halvah dragée liquorice. Bear claw tart lemon drops liquorice applicake. Pie oat cake croissant soufflé pie. Tootsie roll pastry chupa chups liquorice. Sweet roll icing soufflé soufflé ice cream marzipan chocolate soufflé. Jelly beans fruitcake bonbon dragée marshmallow. Muffin jujubes applicake faworki biscuit. Cheesecake soufflé ice cream apple pie toffee tiramisu tiramisu. Cake jelly-o marzipan. Cupcake lollipop lemon drops sugar plum chocolate jelly-o lollipop chupa chups liquorice. Wypas pie bear claw jelly beans danish chupa chups muffin chupa chups croissant. Tiramisu marzipan sweet roll marzipan topping candy lollipop danish gingerbread.
	Sweet sweet dragée marshmallow wypas dragée danish tootsie roll topping. Cupcake bonbon sweet dragée tiramisu. Toffee sweet chupa chups icing wafer liquorice wypas gummi bears sweet. Marshmallow chocolate bar chocolate cake faworki cake. Toffee tiramisu tiramisu. Marshmallow pie cupcake tootsie roll. Applicake jelly-o marzipan liquorice chocolate bar bonbon chocolate cake pudding. Oat cake wafer muffin carrot cake tootsie roll cheesecake. Tart dragée caramels cake caramels lollipop powder gingerbread. Cake gummies marshmallow carrot cake. Candy sweet marzipan jelly beans jujubes lollipop jelly beans soufflé. Wafer bear claw gummi bears.
	Icing chocolate cake wypas caramels cupcake icing jelly beans pastry tart. Pastry sesame snaps gummies danish chocolate cake faworki. Chupa chups dessert faworki tiramisu candy canes chupa chups croissant cake toffee. Wafer chupa chups powder marzipan caramels muffin donut. Gummi bears fruitcake liquorice candy. Sweet brownie icing soufflé faworki liquorice. Soufflé carrot cake gummies jelly dragée. Gummi bears sweet jelly beans cotton candy tiramisu dragée. Caramels gummies tootsie roll muffin. Ice cream dragée croissant toffee dragée powder dragée. Candy donut cookie sesame snaps jelly-o brownie muffin caramels. Sweet roll tootsie roll wypas topping toffee apple pie powder halvah.
	Liquorice liquorice gingerbread caramels ice cream powder chocolate bar candy. Cupcake fruitcake halvah ice cream gummi bears tootsie roll cupcake. Cotton candy danish gingerbread donut pastry tootsie roll jujubes. Wypas gummies soufflé croissant cheesecake topping. Chocolate bar carrot cake halvah apple pie carrot cake cookie. Tootsie roll liquorice chocolate cake wypas pie pastry tiramisu toffee. Bear claw macaroon bonbon cake lemon drops. Bear claw jelly-o bear claw. Lemon drops oat cake soufflé. Faworki sesame snaps pastry. Danish sugar plum gingerbread. Wafer sugar plum pastry jelly cotton candy candy canes toffee. Cupcake chocolate bar sweet donut cake wypas. Sweet roll chocolate cake marshmallow bonbon bonbon.</textarea>
			<div class="input-check">
				<input type="radio" name="yesno1" id="yes1" value="yes"/> <label for="yes1">J'accepte les conditions</label>
			</div>
			<div class="input-check">
				<input type="radio" name="yesno1" id="no1" value="no"/> <label class="check" for="no1">Je n'accepte pas les conditions</label>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="span2"></div>
		<div class="span4">
			<input type="submit" class="btn btn-large" value="S'enregistrer"/>
		</div>
	</div>
	</form>
Conditions d'utilisation: 
<form class="well span5">
	<div class="row">
		<label for="firstname">Prénom :</label>
		<input class="input-large" type="text" name="firstname" id="firstname" placeholder="Jean"/>
	</div>
	<div class="row">
		<label for="lastname">Nom :</label>
		<input class="input-large" type="text" name="lastname" id="lastname" placeholder="Dupont"/>
	</div>
	<div class="row">
		<label for="email">Adresse e-mail :</label>
		<input class="input-large" type="text" name="email" id="email" placeholder="jean.dupont@fournisseur.com"/>
	</div>
	<div class="row">
		<label for="birthdate">Date de naissance :</label>
		<select name="birthdate_month">
			<option value="1">Janvier</option>
			<option value="2" selected="selected">Février</option>
			<option value="3">Mars</option>
			<option value="4">Avril</option>
			<option value="5">Mai</option>
			<option value="6">Juin</option>
			<option value="7">Juillet</option>
			<option value="8">Août</option>
			<option value="9">Septembre</option>
			<option value="10">Octobre</option>
			<option value="11">Novembre</option>
			<option value="12">Décembre</option>
		</select>
		<select name="birthdate_day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
		</select>
		<select name="birthdate_year">
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001">2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			<option value="1996">1996</option>
			<option value="1995">1995</option>
			<option value="1994">1994</option>
			<option value="1993">1993</option>
			<option value="1992">1992</option>
			<option value="1991">1991</option>
			<option value="1990">1990</option>
			<option value="1989">1989</option>
			<option value="1988">1988</option>
			<option value="1987">1987</option>
			<option value="1986">1986</option>
			<option value="1985">1985</option>
			<option value="1984">1984</option>
			<option value="1983">1983</option>
			<option value="1982">1982</option>
			<option value="1981">1981</option>
			<option value="1980">1980</option>
			<option value="1979">1979</option>
			<option value="1978">1978</option>
			<option value="1977">1977</option>
			<option value="1976">1976</option>
			<option value="1975">1975</option>
			<option value="1974">1974</option>
			<option value="1973">1973</option>
			<option value="1972">1972</option>
			<option value="1971">1971</option>
			<option value="1970">1970</option>
			<option value="1969">1969</option>
			<option value="1968">1968</option>
			<option value="1967">1967</option>
			<option value="1966">1966</option>
			<option value="1965">1965</option>
			<option value="1964">1964</option>
			<option value="1963">1963</option>
			<option value="1962">1962</option>
			<option value="1961">1961</option>
			<option value="1960">1960</option>
			<option value="1959">1959</option>
			<option value="1958">1958</option>
			<option value="1957">1957</option>
			<option value="1956">1956</option>
			<option value="1955">1955</option>
			<option value="1954">1954</option>
			<option value="1953">1953</option>
			<option value="1952">1952</option>
			<option value="1951">1951</option>
			<option value="1950">1950</option>
			<option value="1949">1949</option>
			<option value="1948">1948</option>
			<option value="1947">1947</option>
			<option value="1946">1946</option>
			<option value="1945">1945</option>
			<option value="1944">1944</option>
			<option value="1943">1943</option>
			<option value="1942">1942</option>
			<option value="1941">1941</option>
			<option value="1940">1940</option>
			<option value="1939">1939</option>
			<option value="1938">1938</option>
			<option value="1937">1937</option>
			<option value="1936">1936</option>
			<option value="1935">1935</option>
			<option value="1934">1934</option>
			<option value="1933">1933</option>
			<option value="1932">1932</option>
			<option value="1931">1931</option>
			<option value="1930">1930</option>
			<option value="1929">1929</option>
			<option value="1928">1928</option>
			<option value="1927">1927</option>
			<option value="1926">1926</option>
			<option value="1925">1925</option>
			<option value="1924">1924</option>
			<option value="1923">1923</option>
			<option value="1922">1922</option>
			<option value="1921">1921</option>
			<option value="1920">1920</option>
			<option value="1919">1919</option>
			<option value="1918">1918</option>
			<option value="1917">1917</option>
			<option value="1916">1916</option>
			<option value="1915">1915</option>
			<option value="1914">1914</option>
			<option value="1913">1913</option>
			<option value="1912">1912</option>
			<option value="1911">1911</option>
			<option value="1910">1910</option>
			<option value="1909">1909</option>
			<option value="1908">1908</option>
			<option value="1907">1907</option>
			<option value="1906">1906</option>
			<option value="1905">1905</option>
			<option value="1904">1904</option>
			<option value="1903">1903</option>
			<option value="1902">1902</option>
			<option value="1901">1901</option>
			<option value="1900">1900</option>
		</select>
	</div>
	<div class="row">
		Conditions d'utilisation:
		<textarea disabled="disabled" rows="5" class="terms">Wypas cupcake tart ice cream bear claw gingerbread sugar plum wypas. Oat cake halvah lollipop sweet roll caramels candy canes jelly beans dessert cotton candy. Cake candy apple pie. Lollipop tart gummi bears caramels croissant caramels dragée. Topping faworki lollipop sweet fruitcake sugar plum cheesecake faworki cotton candy. Pudding pie cookie topping chocolate. Muffin chupa chups sweet oat cake chocolate marshmallow sesame snaps marzipan. Croissant chocolate candy danish bonbon dragée biscuit powder tootsie roll. Danish danish chupa chups. Jelly chocolate bar danish chupa chups liquorice topping dragée dragée bear claw. Sweet roll carrot cake wypas candy pie apple pie. Sesame snaps croissant bonbon topping cake sesame snaps lemon drops chocolate cake jujubes.
Oat cake tootsie roll lollipop gummies danish wypas lollipop macaroon. Caramels donut sweet pie sweet roll jelly beans candy canes lollipop danish. Pie carrot cake pastry danish dragée halvah dragée liquorice. Bear claw tart lemon drops liquorice applicake. Pie oat cake croissant soufflé pie. Tootsie roll pastry chupa chups liquorice. Sweet roll icing soufflé soufflé ice cream marzipan chocolate soufflé. Jelly beans fruitcake bonbon dragée marshmallow. Muffin jujubes applicake faworki biscuit. Cheesecake soufflé ice cream apple pie toffee tiramisu tiramisu. Cake jelly-o marzipan. Cupcake lollipop lemon drops sugar plum chocolate jelly-o lollipop chupa chups liquorice. Wypas pie bear claw jelly beans danish chupa chups muffin chupa chups croissant. Tiramisu marzipan sweet roll marzipan topping candy lollipop danish gingerbread.
Sweet sweet dragée marshmallow wypas dragée danish tootsie roll topping. Cupcake bonbon sweet dragée tiramisu. Toffee sweet chupa chups icing wafer liquorice wypas gummi bears sweet. Marshmallow chocolate bar chocolate cake faworki cake. Toffee tiramisu tiramisu. Marshmallow pie cupcake tootsie roll. Applicake jelly-o marzipan liquorice chocolate bar bonbon chocolate cake pudding. Oat cake wafer muffin carrot cake tootsie roll cheesecake. Tart dragée caramels cake caramels lollipop powder gingerbread. Cake gummies marshmallow carrot cake. Candy sweet marzipan jelly beans jujubes lollipop jelly beans soufflé. Wafer bear claw gummi bears.
Icing chocolate cake wypas caramels cupcake icing jelly beans pastry tart. Pastry sesame snaps gummies danish chocolate cake faworki. Chupa chups dessert faworki tiramisu candy canes chupa chups croissant cake toffee. Wafer chupa chups powder marzipan caramels muffin donut. Gummi bears fruitcake liquorice candy. Sweet brownie icing soufflé faworki liquorice. Soufflé carrot cake gummies jelly dragée. Gummi bears sweet jelly beans cotton candy tiramisu dragée. Caramels gummies tootsie roll muffin. Ice cream dragée croissant toffee dragée powder dragée. Candy donut cookie sesame snaps jelly-o brownie muffin caramels. Sweet roll tootsie roll wypas topping toffee apple pie powder halvah.
Liquorice liquorice gingerbread caramels ice cream powder chocolate bar candy. Cupcake fruitcake halvah ice cream gummi bears tootsie roll cupcake. Cotton candy danish gingerbread donut pastry tootsie roll jujubes. Wypas gummies soufflé croissant cheesecake topping. Chocolate bar carrot cake halvah apple pie carrot cake cookie. Tootsie roll liquorice chocolate cake wypas pie pastry tiramisu toffee. Bear claw macaroon bonbon cake lemon drops. Bear claw jelly-o bear claw. Lemon drops oat cake soufflé. Faworki sesame snaps pastry. Danish sugar plum gingerbread. Wafer sugar plum pastry jelly cotton candy candy canes toffee. Cupcake chocolate bar sweet donut cake wypas. Sweet roll chocolate cake marshmallow bonbon bonbon.</textarea>
		<div class="align-center">
			<div class="input-check">
				<input type="radio" name="yesno2" id="yes2" value="yes"/> <label for="yes2">J'accepte les conditions d'utilisation</label>
			</div>
			<div class="input-check">
				<input type="radio" name="yesno2" id="no2" value="no"/> <label class="check" for="no2">Je n'accepte pas les conditions d'utilisation</label>
			</div>
		</div>
	</div>
	<div class="row">
		<input type="submit" class="btn btn-large btn-blue" value="S'enregistrer"/>
	</div>
</form>
Description: 
<form class="well span5">
	<div class="row">
		<label for="birthdate">Chiens :</label>
		<select multiple="multiple" name="nb_dogs">
			<option>Maloo</option>
			<option>Kita</option>
			<option>Valio</option>
			<option>Cikiba</option>
			<option>Reefoo</option>
			<option>Palok</option>
		</select>
	</div>
	<div class="row">
		Description:
		<textarea rows="4" placeholder="Ceci est ma description."></textarea>
		<div class="align-center">
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog1" value="d1"/> <label for="dog1">Chien 1</label>
			</div>
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog2" value="d2"/> <label class="check" for="dog2">Chien 2</label>
			</div>
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog3" value="d3"/> <label class="check" for="dog3">Chien 3</label>
			</div>
		</div>
	</div>
	<div class="row">
		<input type="submit" class="btn btn-large btn-green" value="Adopter"/>
	</div>
</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 :

Grand bouton Grand bouton

Bouton par défaut Bouton par défaut

Petit bouton Petit bouton

Mini bouton Mini bouton

Forme de boutons

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

Exemple :

Grand bouton oval

Bouton par défaut carré

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 :

<img src="img/3.jpg" width="150" height="150" class="rounded shadow"/>
<img src="img/1.jpg" class="circle"/>
Mon chien mignon dans le jardin
<figure class="polaroid">
	<img src="img/2.jpg"/>
	<figcaption>Mon chien mignon dans le jardin</figcaption>
</figure>
<div class="align-right">
    <img src="img/1.jpg" class="shadow"/>
</div>
Créé par Nicolas Thomas, de l'Agence Web MangoLight.