Introduction à Bootstrap
1. Que signifie Bootstrap ?
Un Website est baptisé "Responsive", s'il est compatible avec les appareils avec différentes tailles d'écran tels que les ordinateurs, les tablettes (Tablet), les téléphones mobiles (Mobile).
Avant 2013, un website voulait être compatible avec les ordinateurs et les téléphones mobiles, les programmeurs devaient écrire deux projets différents. Le premier projet était une application web pour les utilisateurs d'ordinateurs ou de tablettes. Le second projet était une application web pour les utilisateurs d'appareils avec de petits écrans comme les téléphones portables. Cela a effectivement causé des difficultés dans la maintenance et la mise à niveau du website parce que vous deviez le faire pour les deux projets. En outre, les deux ont dû être déployés sur deux domaines différents, par exemple :
- http://somewebsite.com
- http://mobile.somewesite.com
L'année 2013 est considérée comme l'année du web design "Responsive" parce que les utilisateurs sont de plus en plus friands de petits appareils portables tels que les tablettes et les smartphones. Le comportement de la majorité des utilisateurs a changé. Ils passent progressivement à lire leurs nouvelles à travers les appareils mobiles.
Bootstrap
Bootstrap est une structure (framework) gratuite, source ouverte, basée sur HTML, CSS & Javascript. Elle est créée pour construire les interfaces de site web compatibles avec tous les équipements avec différentes tailles d'écran.
Le Bootstrap comprend des outils basiques disponibles tels que : typography, forms, buttons, tables, navigation, modals, image carousels et d'autres. Il comprend esgalement plusieurs Component, Javascript pour soutenir la conception de votre Reponsive plus facilement, plus compatiblement et plus rapidement.
En ce moment, le Bootstrap est un des framework les plus utilisés dans le monde afin de créer des Responsive Websites. Le Bootstrap a créé un standard séparé et il est préféré par des programmeurs. À la base, le Bootstrap a trois avantages :
- Facile à utiliser : Parce que Bootstrap est construit sur la base de HTML, CSS & Javascript.
- Responsive : Le Bootstrap a construit des "Responsive Css" compatible avec différents dispositifs donc vous devez simplement apprendre comment les utiliser. Cette fonction permet des utilisateurs d'économiser du temps lorsqu'ils créent des Websites facilement exploitables.
- Compatibles avec des navigateurs : Il est compatible avec tous les navigateurs (Chrome, Firefox, Internet Explorer, Safari, Opera). Pourtant, avec IE, Bootstrap 4 ne soutient que les versions de IE10 ou plus avancées.
L'histoire de Bootstrap :
Bootstrap, initialement appelé Twitter Blueprint, a été développé par Mark Otto et Jacob Thornton sur Twitter comme un framework pour maintenir la cohérence entre les outils internes. Avant Bootstrap, diverses bibliothèques étaient utilisées pour le développement de l'interface, ce qui entraînait des incohérences et le cout de maintenance élevé.
Après quelques mois de développement par un petit groupe, de nombreux développeurs de Twitter ont commencé à contribuer au projet comme une part de la semaine de Hack, une semaine de style hackathon pour l'équipe de développement de Twitter. Il a été renommé de Twitter Blueprint à Bootstrap et publié en tant qu'un projet open source le 19 août 2011. Il a été maintenu par Mark Otto, Jacob Thornton et un petit groupe de développeurs principaux, ainsi qu'une grande communauté de développeurs. contributeurs
Bootstrap Versions:
Version | Date de publication | Contenu principal |
1.0 | 19/08/2011 | La première version de Bootstrap, ne soutient pas Mobile. |
2.0 | 31/01/2012 | Ajoutez 12 colonnes Grid-Layout au système. Ajoutez certains nouveaux composants (component). Et changez quelques composants disponibes. Ne soutient pas encore Mobile. |
3.0 | 19/08/2013 | Les composants sont reconçus par un style à la conception plat (flat design). Et il soutient des dispositifs Mobile pour la première fois. |
4.0 | 19/01/2018 | Bootstrap 4 aété presque complètement reécrit à partir de Bootstrap 3, et est considéré être plus facile à utiliser que les versions antérieures. |
Tutoriels de programmation Bootstrap
- Le Tutoriel de Bootstrap Jumbotron
- Le Tutoriel de Bootstrap Dropdown
- Le Tutoriel de Bootstrap Alert
- Le Tutoriel de Bootstrap Button
- Le Tutoriel de Bootstrap Button Group
- Le Tutoriel de Bootstrap Popover (Tooltip)
- Le Tutoriel de Bootstrap Spinner
- Introduction à Bootstrap
- Le Tutoriel de Bootstrap Grid System
- Le Tutoriel de Bootstrap Card
- Le Tutoriel de Bootstrap Container
- Le Tutoriel de Bootstrap Nav, Tab, Pill
- Le Tutoriel de Bootstrap NavBar
- Le Tutoriel de Bootstrap Table
- Le Tutoriel de Bootstrap Modal
- Le Tutoriel de Bootstrap Form
- Le Tutoriel de Bootstrap Pagination
- Le Tutoriel de Bootstrap Badge
- Le Tutoriel de Bootstrap Input Group
- Le Tutoriel de Bootstrap List Group
- Le Tutoriel de Bootstrap ProgressBar
- Le Tutoriel de Bootstrap Collapse et Accordion
- Le Tutoriel de Bootstrap Scrollspy
- Le Tutoriel de Bootstrap Breadcrumb
- Le Tutoriel de Bootstrap Carousel
- Le Tutoriel de Bootstrap Spacing Utility
- Le Tutoriel de Bootstrap Border Utility
- Le Tutoriel de Bootstrap Color Utility
- Le Tutoriel de Bootstrap Text Utility
- Le Tutoriel de Bootstrap Sizing Utility
- Le Tutoriel de Bootstrap Position Utility
- Le Tutoriel de Bootstrap Flex Utility
- Le Tutoriel de Bootstrap Display Utility
- Le Tutoriel de Bootstrap Visibility Utility
- Le Tutoriel de Bootstrap Embed Utility
Show More