使用bootstrap的桌面状布局-英雄云拓展知识分享

匿名投稿 239 2024-01-22

我正在开发一个或多或少地像桌面利用程序一样，具有以下功能：

它必须占用所有阅读器空间（100％宽度和高度，不转动），并具有以下4个主要元素：
- 标头。它将包括主菜单。它必须固定到顶部。
- 带有物体窗格的左边侧边栏。
- 主要内容区域，侧边栏，它将显示网格和数据。当内容很大时，必须转动。
- 只有在用户双击左边栏的对象时，只有一个固定在屏幕底部的页脚。还必须经过单击右上边框上的“ X”按钮来折叠。

辣手的部份是，当我双击对象时，页脚（约150⑵00px）必须可见并显示对象数据。侧边栏和主要内容区域都必须缩小高度，以使页脚不会堆叠，并且当用户关闭页脚时，它们又回到了全高。

是不是可使用Bootstrap Framework进行这样的布局？我一直在玩它，但我没法正确工作...

预先感谢，喝彩！

看答案

很抱歉发布了这样一个通用的问题，我整天都在靴子上进行测试而没有找到适当的解决方案，所以我很累，所以我决定在这里询问。

我决定从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⑷ medium-cell-block-y">
<!-- SIDEBAR -->
</div>
<div class="cell medium⑻ medium-cell-block-y">
<!-- MAIN CONTENT -->
</div>
</div>
</div>
<div class="cell shrink footer">
<!-- FOOTER -->
</div>
</div>

下次我会更简洁，喝彩！

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpapaas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。