Vous êtes ici : Accueil / Développement / PHP 5 / Bootstrap - framework Responsive Design

Bootstrap - framework Responsive Design

Par Pierre-Yves Landuré Dernière modification 19/03/2014 10:59

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:

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

https://jqueryui.com/

É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

http://www.jquerygoup.tk/

Ajoute une flèche en bas à droite de la fenêtre de navigation permettant aux internautes de revenir au sommet de la page.

qTip2

http://qtip2.com/

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

http://modernizr.com/

Facilite l'écriture de code Javascript et CSS se dégradant dans les navigateurs anciens.

CSS3 PIE

http://css3pie.com/

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; }

Remerciements