Bootstrap - Mise en page réactive et mise en page fluide

Question

Je voudrais construire une seule page web avec la même mise en page que : http://instatrip.it
Utilisation du bootstrap.
Dans la page du tutoriel bootstrap http://twitter.github.io/bootstrap/scaffolding.html#layouts
Il existe une démo de la mise en page réactive et de la mise en page fluide.
Quelles sont les différences entre les deux approches ?
Pour obtenir la même disposition qu'instatrip, quelle disposition dois-je utiliser ?
Gracias.

Answer 1

La mise en page fluide s'adapte aux différentes tailles de fenêtres des navigateurs : toutes les valeurs utilisées sont calculées proportionnellement à la taille de la fenêtre d'affichage. Ainsi, lors du redimensionnement, toutes les colonnes sont redimensionnées, mais la mise en page générale reste la même.

La mise en page réactive est également capable de s'adapter à différentes tailles, mais lors du redimensionnement, le nombre de colonnes change en fonction de l'espace disponible. On peut imaginer, par exemple, que votre site Web soit redimensionné en une seule colonne sur un smartphone.

Pour obtenir la même mise en page qu'instatrip, vous devrez au moins combiner la mise en page fixe avec la mise en page fluide. Mais il existe de nombreuses façons de le faire, je pense que vous devriez essayer de comprendre quel est le but exact de chaque type de mise en page, et trouver une solution spécifique pour vos besoins. Voici quelques lectures :

http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

EDIT : Voici un exemple simple de mise en page fixe + fluide. Trouvé sur aquí . Je poste le code ci-dessous au cas où le lien serait mort.

HTML :

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>

CSS :

html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}

Javascript :

$(document).ready(function() {

    //GET BROWSER WINDOW HEIGHT
    var currHeight = $(window).height();
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
    $('#sidebar, #content').css('height', currHeight);

    //ON RESIZE OF WINDOW
    $(window).resize(function() {

        //GET NEW HEIGHT
        var currHeight = $(window).height();    
        //RESIZE BOTH ELEMENTS TO NEW HEIGHT
        $('#sidebar, #content').css('height', currHeight);

    });

});

Answer 2

Fluid Layout est une grille construite avec des pourcentages, rien n'est pris comme grille fixe, la mise en page est fluide.

La mise en page réactive est la combinaison de la mise en page fluide et des requêtes multimédias, où des éléments css spécifiques aux médias sont définis pour certaines résolutions de navigateur.

Donc, si vous utilisez la mise en page fluide, vous pouvez aussi bien utiliser la mise en page réactive pour mieux contrôler votre mise en page.