Twitter Bootstrap 1

Twitter Bootstrap

Parfois on est obligé de faire du développement web alors que ce n’est pas notre point fort. Surtout qu’on cherche toujours à faire quelque chose de propre et on se lance dans des div, du CSS et d’autres trucs immondes qui impactent sur le temps passé à développer.

Twitter a développé un petit framework CSS/Javascript qui simplifie de manière impressionnante le développement. De base il y a un design certes propre mais impersonnel. Sachez d’avance qu’il est possible de tout personnaliser.

Bootstrap s’adapte automatiquement aux navigateurs qu’ils soient mobiles ou non et peu importe les résolutions. Un outil qui peut parfois avoir l’air d’une bénédiction…

Le point fort et unique que je présenterai, c’est le scaffolding (positionnement). Votre page web devient une série de ligne, chaque ligne étant découpée en 12 colonnes.

Pour ajouter une ligne :

<div class=”row”>

Libre à vous de placer vos éléments comme vous le souhaitez dans les colonnes.

Par exemple, pour placer une div sur 3 colonnes en largeur on fait :

<div class=”span3″>

Elle prendra donc les 3 premières colonnes. Si je mets une autre div, elle prendra les colonnes suivantes.

Pour insérer un décalage, je peux mettre un offset :

<div class=”span3 offset3″>

Dans ce cas, ça laisse 3 colonnes vides et ça utilise les 3 colonnes suivantes.

Et voilà, il n’y a pas plus à savoir 🙂

http://twitter.github.com/bootstrap/scaffolding.html

Vous pouvez tout de même bénéficier de jolis boutons, de formulaires, de listes déroulantes etc…

http://twitter.github.com/bootstrap/index.html

A propos Mathieu Passenaud

Passionné de technologies Web, diplômé d'informatique embarquée et actuellement dans le développement d'applications en Cloud Computing.

Je vous propose également...

JSON dans les scripts Bash avec Ticktick 2

JSON dans les scripts Bash avec Ticktick

Je vais vous présenter l’ami du WGET par excellence. Imaginez le contexte suivant : sur …

Maintenir son site web perso : une plaie ! 3

Maintenir son site web perso : une plaie !

Un blog, un compte Twitter, un compte viadeo, un compte LikeDin, un compte Google+, un …