Bootstrap Twitter

déc
2012
16

 

Utilisation d'un framwork afin d'optimiser et de gagner du temps sur la création de votre maquette Web.

 

 

N'étant pas un grand adepte des franworks, mais Bootstrap va bien plus loin qu'offrir du code CSS déjà bien organisé et structuré.

 

Bootstrap offre aussi des plugins jQuery de qualité pour enrichir vos pages, hum cela devient intéressant...

 

J'utlise actuellement  Bootstrap pour la version 2013 de mon site professionnel http://psd-html.fr

 

Installation du Bootstrap

 

Télécharger le dossier Bootstrap Twitter sur le site officiel , puis placer le dossier à la racine de votre projet.

 

 

2 types de fichier CSS (en responsive ou non) + le js' bootstrap.js'

 

Une fois ces fichier placer sur votre maquette il ne reste plus qu'a utliser les class et Pseudo-class du CSS twitter, voici des exemples.

 

La première classe à connaître est row qui représente une ligne de 12 blocs

 

 

   <div class="row">
     <div class="span4">4 colonnes</div>
     <div class="span8">8 colonnes</div>
   </div>

 

On peut aussi ajouter des espaces entre les blocs (span) avec la class offset

<div class="row">
    <div class="span3">3 colonnes</div>
    <div class="span6">6 colonnes</div>
    <div class="span3">3 colonnes</div>
  </div>
  <div class="row">
    <div class="span3">3 colonnes</div>
    <div class="span3 offset6">3 colonnes</div>
  </div>

 

Utlisation d'une grille élastique en remplacant la class .row par .row-fluid.

 

Pour le reste je vous laisse découvrir les exemples sur le site officiel du bootstrap Twitter, n'hésitez pas à laisser vos commentaires.

 

Les tutoriels et exemples pour le CSS mais aussi les exemples pour les plugins jquery

 

 

Auteur: Djb

Je suis depuis de nombreuses années passionné par l'outil de la communication et de l'informatique quoi de plus logique de me retrouver sur le Net.

Vous pouvez aussi  me suivre sur http://psd-html.fr

1 commentaire

avatar

Djb a dit le lundi 31 déc 2012 # 1

yes, mon site pro est sous le bootstrap http://psd-html.fr


laisser une trace de votre passage

Quelle est la dernière lettre du mot lyhcq ? :