桌面，就像使用引导

Question

我开发应该表现或多或少像一个桌面应用程序，具有以下功能的Web应用程序布局：

• 它必须把所有的浏览器空间（宽度为100％和高度，不滚动），具有以下4个主要元素：

  • 标题。它将包含主菜单。它必须固定在顶部。

  • 带有对象窗格的左边栏。

  • 主要内容区域，侧边栏的右侧，它将显示网格和数据。内容很大时必须可以滚动。

  • 固定在屏幕底部的页脚，只有当用户双击左边栏的对象时才可见。它也必须通过点击右上边框上的'X'按钮来折叠。

棘手的部分是，当我双击一个对象，页脚（约150-200px）必须是可见的，并显示对象数据。侧边栏和主要内容区域的高度必须缩小，以便页脚不会与它们重叠，并且在用户关闭页脚时它们会回到完整高度。

是否可以使用Bootstrap框架来做这样的布局？我一直在玩它，但我不能正常工作...

在此先感谢，欢呼！

Answer 1

对不起，发布这样一个通用的问题，我花了整整一天在没有找到适当的解决方案做测试bootply后，我累了，所以我决定问这里。

我决定从Bootstrap转移到基金会，因为它提供了我在其XY网格上寻找的确切功能。使用此框架，我的应用程序布局将如此简单：

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

下次我会更简洁，欢呼！