Desktop-artigen Layout Bootstrap mit

Question

ich eine Web-Anwendung zu entwickeln, die mehr oder weniger wie eine Desktop-Anwendung verhalten soll, mit folgenden Merkmalen:

• es alle Browser Raum nehmen muss (100% Breite und Höhe, kein Scrollen), mit den folgenden 4 Hauptelementen:

  • Eine Kopfzeile. Es wird das Hauptmenü enthalten. Es muss nach oben fixiert werden.

  • Eine linke Seitenleiste mit einem Objektbereich.

  • Der Hauptinhaltsbereich, rechts neben der Seitenleiste, wo ein Raster und Daten angezeigt werden. Muss scrollbar sein, wenn der Inhalt groß ist.

  • Eine Fußzeile am unteren Bildschirmrand, nur sichtbar, wenn der Benutzer auf ein Objekt der linken Seitenleiste doppelklickt. Es muss auch zusammenklappbar sein, indem Sie auf einen "X" -Knopf am oberen rechten Rand klicken.

Der schwierige Teil ist, dass, wenn ich auf ein Objekt klicken verdoppeln, die Fußzeile (ca. 150-200px) sichtbar und die Objektdaten zeigen sein muss. Die Seitenleiste und der Hauptinhaltsbereich müssen in der Höhe verkleinert werden, damit die Fußzeile sie nicht überlappt, und sie sind wieder auf voller Höhe, wenn der Benutzer die Fußzeile schließt.

Ist es möglich, ein solches Layout mit dem Bootstrap-Framework zu erstellen? Ich habe damit herumgespielt, aber ich konnte es nicht richtig funktionieren ...

Vielen Dank im Voraus, Prost!

Answer 1

Entschuldigung für das Posten einer solchen generischen Frage, ich war müde, nachdem ich den ganzen Tag damit verbracht hatte, Tests auf Bootply zu machen, ohne eine passende Lösung zu finden, also entschied ich mich hier zu fragen.

Ich habe mich entschieden, von Bootstrap zu Foundation zu wechseln, da es genau das Feature bietet, nach dem ich auf seinem XY-Gitter gesucht habe. Mit diesem Rahmen wird meine Anwendung Layout, da dies so einfach sein:

<div class="grid-y medium-grid-frame"> 
    <div class="cell shrink header medium-cell-block-container"> 

    <!-- NAVIGATION BAR --> 

    </div> 

    <div class="cell medium-auto medium-cell-block-container"> 

    <div class="grid-x grid-padding-x"> 
     <div class="cell medium-4 medium-cell-block-y"> 

     <!-- SIDEBAR --> 

     </div> 

     <div class="cell medium-8 medium-cell-block-y"> 

     <!-- MAIN CONTENT --> 

     </div> 
    </div> 

    </div> 

    <div class="cell shrink footer"> 

    <!-- FOOTER --> 

    </div> 
</div> 

ich das nächste Mal mehr prägnant sein werde, Prost!