javascript - 如何使用 Twitter Bootstrap(带有面板、 Accordion 等)创建嵌套可折叠容器的所需布局?

标签 javascript html css twitter-bootstrap panel

<分区>

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

Desired layout

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

当所有内部容器都最小化/折叠时,父外部容器也应该折叠。我也乐于接受有关最小化父容器位置(左侧、顶部或底部)的建议。

我不确定如何创建此布局(使用 Accordion 控件或面板或任何其他人可能有的建议)并且想知道是否有人有合适的建议?

最佳答案

一些建议和想法。我希望这是某种指导!

功能

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

内容类型?

您希望在您的 div 中包含什么样的内容? (标题 A.1 - 标题 C.3)。为了获得更好的用户体验,我建议使用类似于我包含的图片的布局。特别是如果用户想从移动设备上查看它,但不是唯一的。垂直 Angular 文字基本上只是脖子痛。但如果您坚持采用这种方法,我建议您使用图标。

有关可用性和用户体验的布局建议。 Approach suitable for mobile devices

关于javascript - 如何使用 Twitter Bootstrap(带有面板、 Accordion 等)创建嵌套可折叠容器的所需布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18047692/

相关文章:

html - 对齐菜单并在父页面 DIV 中显示 DIV

javascript - jquery/javascript 供用户选择 n 个图像中的 1 个

php - 使用 JavaScript 和 html 进行表单验证

css - 在 jQuery Mobile 中删除 &lt;input&gt; 周围的 "margin"

javascript - 在 Javascript 中,子节点因其父节点而受到影响

html css layout zoom 剧变

css - 为什么 CSS :not pseudo-class doesn't work as expected?

javascript - 如何使用javascript解决连续问题?

javascript - 在 JavaScript 中对音频进行下采样

javascript - 从正则表达式的字面表示法中删除反斜杠