如何使用 Twitter Bootstrap（带有面板、手风琴等）创建嵌套可折叠容器的所需布局？ [关闭]

Question

我想创建如下图所示的布局。我目前正在使用 Twitter Bootstrap 的布局和控件来创建 Web 应用程序。

下面有多个外部容器，每个外部容器中都有容器。我希望所有容器都是可折叠的，即我想最小化每个容器，包括外部容器。所有容器都应在加载时显示在屏幕上。

当所有内部容器最小化/折叠时，父级外部容器也应该折叠。我也愿意接受有关最小化父容器位置（左侧、顶部或底部）的建议。

我不确定如何创建此布局（使用手风琴控件或面板或任何其他人可能有的建议）并且想知道是否有人有合适的建议？

Answer 1

一些建议和想法。我希望它有点指导！

功能

你也许可以使用内置的 js 来管理这个，但不太确定。但是，我相信可折叠性是用 js 执行的，但它调节 css 代码，例如display and visibility。我也相信这些可折叠的脚本是由文档末尾的 js 触发的，它只根据屏幕分辨率来触发。所以我不确定有多少脚本可以实际用于这种类型的可折叠性主动选择。如果我是你，我会考虑自己编写代码。

内容类型？

您希望 div 中包含什么样的内容？ （标题 A.1 - 标题 C.3）。为了获得更好的用户体验，我建议使用类似于我包含的图片的布局。特别是如果用户想从移动设备上查看它，但不是唯一的。垂直角度的文字基本上只是颈部疼痛。但如果你坚持这种方法，我建议使用 Icons。

关于可用性和用户体验的布局建议。