Twitter Bootstrap

A LIRE AUSSI

  • Les TPE-PME boudent encore le Web
  • Add-ons | Et Google Docs se LEGO-fie
  • 2G, 3G, 4G Qu’est-ce qui fait la différence???
  • billetteries
  • le monde derrière notre ordinateur
Par -

Salut tout le monde :) .

Je suis Scica (pour ceux qui ne reconnaissent pas mes écritures), développeur spécialisé dans les applications Web.

Bon, moi j’avais un problème ou bien je perdais beaucoup de temps à écrire des templates, trouver un plugin JavaScript pour gérer les animations de mes applications Web, … . Pour éviter les répétitions j’avais décidé de développer un framework pour gérer tout ça mais, puisqu’il ne faut pas réinventer la roue, j’ai commencé par faire des recherches sur le net et je suis tombé sur Bootstrap.

Euh du calme les « Zendistes » ce n’est pas la même chose que votre bootstrap :) , celui-ci est une boîte à outils HTML, CSS et JavaScript permettant de créer rapidement et efficacement des applications Web. Il est publié sous licence Apache 2.0.

Le développement de Bootstrap a débuté il y a quelques années, car un problème majeur se posait chez Twitter. Chacun utilisait la librairie qu’il maîtrisait le mieux, ainsi les librairies utilisées n’étaient jamais les mêmes ! Imaginez maintenant devoir maintenir une telle application avec autant de librairies différentes. Comprenez que plus la complexité de l’application augmente plus ça devient invivable. vous allez tout simplement exploser :D . C’est ainsi que Mark Otto et Jaconb Thornton ont décidé de se lancer dans le développement d’une librairie commune. Quelques mois plus tard, avec l’aide d’autres développeurs du monde entier, le framework est très vite devenu complet et a atteint, voire même dépassé, les besoins nécessaires ! C’est donc aujourd’hui un projet considérable.

Voici la liste des fonctionnalités et caractéristiques de cet outil :

  • HTML5 et CSS3,
  • Système de grid (940px ou fluid),
  • Largeur fixe ou fluide du design,
  • CSS responsive,
  • Typographie assez complète,
  • Tables, listes, codes, …,
  • Style pour les formulaires,
  • Validation des formulaires,
  • Champs, boutons, icônes, …,
  • Pagination, boutons spéciaux, …,
  • Barre d’onglets, menu, …,
  • Fil d’Ariane,
  • Alertbox, progress bar.

Le framework Bootstrap intègre aussi 13 plugins jQuery :

  • Modals : pour la création de fenêtres pour vos formulaires ou autre,
  • Tooltips : pour afficher des bulles d’infos lors du passage de la souris,
  • Collapse,
  • Dropdowns : utile pour la création des menus,
  • Popovers : c’est comme le tooltips mais comporte un titre et un contenu,
  • Carousel,
  • Scrollspy,
  • Alert messages : utile pour l’affichage de message d’erreur, d’informations, …,
  • Typeahead : auto complétion lors de la saisie dans un champ,
  • Togglable tabs : permet de créer des onglets,
  • Buttons,
  • Transitions,
  • Et Affix qu’ils viennent d’ajouter à sa dernière version 2.1.0

Utilisation

Pour utiliser Bootstrap il suffit simplement de le télécharger et de l’extraire dans votre dossier principal de votre projet Web.

Oups ce n’est pas tout, j’ai failli oublier, il faut aussi télécharger le framework jQuery dont Bootstrap dépend sinon il ne pourra pas exécuter les scripts JavaScript.

Ensuite vous importez les fichiers CSS et JavaScript dans votre fichier HTML.

Quoi ? Vous ne savez pas comment importer un fichier CSS et JS. Ok d’accord je vous montre comment faire :

< !– import d’un fichier CSS –>

<link href=’css/bootstrap.css’ rel=’stylesheet’>

< !– import d’un fichier JS –>

<script src=’js/jquery.js’></script>

Maintenant vous pouvez vous référer de la documentation pour faire de beaux designs pour vos applications Web.

Vous trouverez quelques exemples basiques sur cette page.

Exemples de sites développés avec Bootstrap

Sources :

Github 

Site du zéro

Scicasoft

Scicasoft

Je suis Cheikh Sidya CAMARA, ingénieur de conception en informatique, amoureux du langage Ruby et de son Framework Ruby On Rails.
Scicasoft
  • http://www.facebook.com/binta.coudy Binta Coudy Dé

    Nice article! Super bien écrit! Je l’ai lu très rapidement et très facilement. Merci!

    • Cheikh Sidya CAMARA

      Je vous en prie. Merci à toi aussi d’avoir lu.
      We are here for you :-)