Question

我刚刚开始学习引导程序4。

告诉我如何实现页面组成的这3个块的外观和行为。

<div>
    <div>Menu block</div>
    <div>Tools block</div>
    <div>Content block</div>
</div>

在这种情况下，对DIV施加了以下要求：

在大屏幕上，块具有固定的大小和位置（如图1所示）

菜单固定在页面顶部，工具栏占据固定宽度（每12列中的2列），并且具有自己的滚动条，如果内容不适合屏幕，则内容面板为类似于工具栏，仅较宽（12个中的8个）

在减小大小（例如，对电话而言）时，所有3个块都变成另一个块，菜单转换为下拉列表，单击时工具栏展开，内容面板折叠（如图2所示））

单击工具栏上的按钮时，工具栏将最小化，内容面板也将最大化（理论上，我正在处理该按钮，可能只需更改面板的类就足够了）

告诉我如何使用引导程序4 完成此操作。在这里，主要的事情是开始，然后继续进行就很容易了：）

P.S。

通过菜单，我可以按顺序进行所有操作-我按如下操作

        <nav className = "navbar navbar-expand-sm navbar-light bg-light">
            <div className = "navbar-brand"></div>

            <button className = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbar" aria-controls = "navbar" aria-expanded = "false" aria-label = "Toggle navigation">
                <span className = "navbar-toggler-icon"></span>
            </button>

            <div className = "collapse navbar-collapse" id = "navbar">
                <ul className = "navbar-nav mr-auto">
                    {this.state.m_menuComponents}
                </ul>
            </div>
        </nav>

但是我在使用其他DIV时遇到问题

引导程序：站点动态标记

0 个答案: