时间戳

首页 > 解决方案 > 用于动态布局的 C# (MVC) 和 Bootstrap

c# - 用于动态布局的 C# (MVC) 和 Bootstrap

问题描述

我使用 C# (MVC) 来生成网站。我们使用 Bootstrap 来定位元素。

如果我想让页面有一个切换来垂直或水平显示菜单，我最好的设计方法是什么？

如果我没有使用 Bootstrap 或 C#，我可能会生成一个 XML 文件，其中包含要显示的数据。XML 将被标记，而不考虑它会如何显示。

所以它可能看起来像这样：

<page>
    <footer>This most likely will render at bottom of page</footer>
    <menu>
        <ol>
            <li><a href="/">Home</a></li>
            <li><a href="/Foo">Foo</a></li>
            <li><a href="/Bar">Bar</a></li>
        </ol>
    </menu>
    <content>Some page content here</content>
    <header>This most likely will render at top of page</header>
</page>

...然后可能使用 XSLT（连同 CSS）来转换该页面，以便视觉元素将根据我选择的主题/布局（顶部、侧面、底部、任何地方的菜单）定位。

在使用 C# 和 razor 文件时，是否有标准方法允许使用 Bootstrap 进行动态布局？我的 razor 文件中的 @IF 语句呈现不同的行/列布局是我的最佳/唯一选择吗？

也许有一个标准标记，以便您可以轻松地在具有不同布局的不同主题之间切换？虽然我没有看到这个记录如果是这样。

我花了最后一个小时在谷歌上搜索这个没有太多运气。

标签： c#bootstrap-4markup

解决方案

检查 Jquery 菜单。您可以使用 css 将垂直切换为水平。请参阅这篇文章 -如何使 jQuery UI 导航菜单水平？

如果您想专门使用 Bootstrap，请检查 Bootstrap Navbar。我相信您也可以使用 CSS 在此处切换。

在我看来，为了改变布局，我们应该总是使用 css。优点是，如果布局/视口发生变化，页面不会重新加载，我们不需要维护单独的代码库。这就是我们使用响应式网页设计的原因，它利用 css 来根据设备的大小（4K、台式机、平板电脑、移动设备等）更新外观。

推荐阅读