Bootstrap

/Tag:Bootstrap

Bootsrap : colonnes de même hauteur, par ligne, et responsive

Un problème récurrent avec bootsrap est d’avoir une présentation en « grille » avec des colonnes de même hauteur.

En effet, par défaut, les colonnes ont leur hauteur déterminée par leur contenu, et aucune solution CSS n’existe pour modifier ce comportement, car les différentes solutions proposées en cherchant sur le net ont d’autres incidences sur la présentation par défaut des colonnes.

La solution est donc de passer par du javascript pour gérer celà.

J’ai développé une petite fonction permettant de faire ça, et qui semble bien fonctionner, je vais donc vous la proposer ici, elle pourra vous faire gagner du temps !

Cette fonction nécessite que chaque colonne ait les classes de taille pour toutes les tailles de fenêtre possible, soit « col-xs-* », « col-sm-* », « col-md-* », « col-lg-* ».

Il faut également ajouter une classe « col-same-height » aux colonnes que l’on veut avoir de même hauteur.

Elle part également du principe que la taille de la grille est de 12 (valeur par défaut de bootstrap), et que les tailles de containers soient également celles par défaut de Bootsrap.
Si vous n’utilisez pas ces valeurs standard, vous pouvez les modifier facilement dans la fonction.

Code :

$(window).load(function() {
    $(window).resize(resizeColSameHeight);
    resizeColSameHeight();
});

/**
 * Redimensionnement hauteur des colonnes bootstrap "col-same-height" ligne par ligne selon la taille de la vue
 */
function resizeColSameHeight() {
    if ($('.col-same-height').length > 0) {
        var width = $('body').width();
        if (width < 768)
            var size = 'xs';
        else if (width < 992)
            var size = 'sm';
        else if (width < 1200) var size = 'md'; else var size = 'lg'; var classnames = $('.col-same-height').first().attr("class").toString().split(' '); for(var i in classnames) { var classname = classnames[i]; if (classname.indexOf('col-' + size + '-') != -1) var nbCols = 12 / classname.replace('col-' + size + '-', ''); } $('.col-same-height').css('height', 'auto'); if (nbCols > 1) {
            var i = 0;
            do {
                elems = $('.col-same-height').slice(i, i+nbCols);
                var maxHeight = 0;
                $(elems).each(function() {
                    if ($(this).height() > maxHeight)
                        maxHeight = $(this).height();
                });
                $(elems).each(function() {
                    $(this).css('height', maxHeight + 'px');
                });
                i += nbCols;
            } while (elems.length > 0);
        }
    }
}
25 août 2015|Categories: Blog|Tags: |0 Commentaires

Art Luxury Experience

art-luxury-experienceVente d’activités touristiques de luxe à Paris.

  • Développement complet
  • Extranet parternaires, gestion des disponibilités et calendriers de réservations, etc.
  • CMS : WordPress, avec Woocommerce, FacetWP, WPML, etc.
  • Intégration responsive avec Bootstrap
  • Administration serveur dédié Linux Debian
  • En collaboration avec l’agence « Pilot’In »

http://www.artluxuryexperience.com

15 avril 2015|Categories: Références|Tags: , , , , , |Commentaires fermés sur Art Luxury Experience

Groupe Châtel

siteon0Groupe de transport et logistique.

  • Développement complet de l’intranet du groupe
  • Développements spécifiques : gestion complexe des droits d’accès et profils, taxonomies, etc.
  • Intégration responsive design
  • CMS : WordPress
  • En collaboration avec l’agence Idmagine

 

17 décembre 2014|Categories: Références|Tags: , , , , , , |Commentaires fermés sur Groupe Châtel

RivieraSwing

rivieraswingSite de gestion de droits de jeu de Golf.

  • Développement spécifiques sous forme de module WordPress : gestion des clients, des golfs, des plannings. Espace client avec gestion des slots de jeu (libération, extra slots, etc.).
  • Refonte du site sous WordPress
  • Reprise et refonte du design de la version précédente
  • Responsive design (avec Twitter Bootstrap)

www.rivieraswing.com

3 juin 2014|Categories: Références|Tags: , , , , , , |Commentaires fermés sur RivieraSwing

AMC2 Ecole de musique Caluire et Cuire

amc2Site institutionnel d’une école de musique.

  • Refonte du site sous WordPress
  • Reprise et refonte du design de la version précédente
  • Responsive design (avec Twitter Bootstrap)

www.musicamc2.fr

28 mai 2014|Categories: Références|Tags: , , , , , |Commentaires fermés sur AMC2 Ecole de musique Caluire et Cuire

Apikod

apikodSite Web d’applications mobiles d’aide à la conduite.

  • Développement et intégration
  • Responsive design (avec Twitter Bootstrap)
  • Multilingue
  • CMS : WordPress
  • Interfaces de synchronisations de données avec les applications mobiles
  • Google Charts API
  • Administration serveur dédié Linux Debian

www.camelys.apikod.com

6 février 2014|Categories: Références|Tags: , , , , , , , , |Commentaires fermés sur Apikod

TVES – Technique Vide Emballage Services

tves_technique_vide_emballage_servicesEntreprise de services spécialisée dans la maintenance, la remise en état et la vente de machine d’emballage et de tranchage pour l’industrie agro-alimentaire et médicale.

  • Développement et intégration
  • Responsive design basé sur le framework Twitter Bootsrap
  • CMS : WordPress

TVES – Technique Vide Emballage Services

4 septembre 2013|Categories: Références|Tags: , , , , |Commentaires fermés sur TVES – Technique Vide Emballage Services