Bootstrap - framework Responsive Design
Bootstrap est un framework HTML5 / CSS3 / Javascript accélerant la création de sites au design dit Responsive. Libéré par Twitter, il est, à l'heure où sont écrites ces lignes, l'une des références du domaine. Cette page liste des ressources utiles pour la mise en place de sites utilisant cet outil.
Obtenir Bootstrap
Bootstrap nécessite:
- la bibliothèque JQuery.
Bootstrap peut être obtenu depuis le site getbootstrap.com.
Ressources utiles
Éléments de design
FontAwesome
http://fortawesome.github.io/Font-Awesome/
Des glyphicons supplémentaires en plus de celles fournies par BootStrap.
Yamm!3
http://geedmo.github.io/yamm3/
MegaMenu en CSS pur pour Bootstrap.
Bootstrap-select
http://silviomoreto.github.io/bootstrap-select/
Applique l'ergonomie Bootstrap aux champs select.
Bootstrap Confirmation
http://ethaizone.github.io/Bootstrap-Confirmation/
Affiche un dialogue de confirmation dans un tooltip Bootstrap.
JQRangeSlider
http://ghusse.github.io/jQRangeSlider/index.html
Slider de sélection d'interval. Fonctionne pour les dates et les entiers.
Bootstrap Switch
http://www.bootstrap-switch.org/
Applique un style iOS like aux cases à cocher.
Extensions JQuery
JQuery UI
Éléments d'interface améliorés à l'aide de JQuery.
jQuery UI Bootstrap
https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/
Thème Bootstrap pour jQuery UI.
Javascripts Grids
https://github.com/Sam152/Javascript-Grids
Cette extension permet d'égaliser la hauteur des cellules (col-*) dans une ligne (row) de la grille Bootstrap. Elle est vitale pour la mise en place de listes de produits ou d'articles ayant des hauteurs de contenu variable.
ScrollToFixed
https://github.com/bigspotteddog/ScrollToFixed
La fonctionnalité "affix" fournie avec Bootstrap fonctionne de manière aléatoire pour les éléments de contenu. Cet bibliothèque permet de conserver certains éléments à l'écran (navigation par exemple) quelque soit la position du défilement.
GoUP
Ajoute une flèche en bas à droite de la fenêtre de navigation permettant aux internautes de revenir au sommet de la page.
qTip2
Des tooltips élégants et configurables finement.
jQuery Form Plugin
http://malsup.com/jquery/form/
Apporte la soumission Ajax aux formulaires.
Bibliothèques Javascript
Modernizr
Facilite l'écriture de code Javascript et CSS se dégradant dans les navigateurs anciens.
CSS3 PIE
Active certaines fonctionnalités CSS3 (coins arrondis et dégradés notamment) dans les vieilles versions d'Internet Explorer.
Snippets Biapy
Modifier l'espacement des colonnes de la grille
https://github.com/biapy/howto.biapy.com/blob/master/bootstrap/bootstrap3-custom-grid-spacing.css
Permet de réduire l'espacement de la grille Bootstrap. Ajoutez simplement une des classes "spacing-0", "spacing-5" ou "spacing-10" à l'élément dont vous souhaitez rapprocher les colonnes ('container', 'row' ou 'col-*'):
<div class="row spacing-5">
Utiliser Masonry dans les menus déroulants (dropdown) et les onglets (tab)
Masonry, ou tout autre code javascript nécessitant d'utiliser une taille d'élément valide, ne fonctionne pas correctement dans les menus déroulant ou les onglets Bootstrap. La faute à l'utilisation de "display: none;" pour masquer les onglets non actifs.
Pour corrigez ce problème, utilisez ces règles CSS. Elle permettent d'avoir un rendu correct des éléments masqués:
.dropdown-menu { display: block; top: -999em; }
.open > .dropdown-menu { top: 100%; }
.tab-content > .tab-pane { display: block; position: absolute; left: -999em; }
.tab-content > .active { position: relative; left: 0; }