Question

我与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＃和剃须刀文件时，是否存在使用Bootstrap进行动态布局的标准方法？最好/唯一的选择是在我的剃刀文件中使用@IF语句来呈现不同的行/列布局吗？

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

我花了最后一个小时在Google上搜索，但运气不佳。

Answer 1

我建议您查看various web sites，它们提供了这种功能（有些是免费的，有些是免费的）。去年，我在一个项目上使用了TBH，而TBH则需要HTML / CSS / js专家花6个月的时间从头开始创建所有包含的功能（成本不到50美元）。

Answer 2

检查Jquery菜单。您可以使用CSS将“垂直”切换为“水平”。请参阅此帖子-How to make jQuery UI nav menu horizontal?

如果要专门使用Bootstrap，请选中Bootstrap Navbar。我相信您也可以使用CSS在此处进行切换。

我认为，要更改布局，我们应该始终使用CSS。好处是，如果布局/视口更改，则不会重新加载页面，并且我们不需要维护单独的代码库。这就是为什么我们使用自适应网页设计的原因，该网页利用CSS根据设备（4K，台式机，平板电脑，移动设备等）的尺寸来更新外观

Answer 3

我认为我最终要做的是针对每种布局创建一个共享视图：

〜/ Views / Shared / _Layout.cshtml
〜/ Views / Shared / _leftMenuLayout.cshtml
等

...，然后我将创建文件“ Views / _ViewStart”，并在此文件中根据所需布局设置要使用的默认共享布局。即：

Layout = "~/Views/Shared/_leftMenuLayout.cshtml";

C＃（MVC）和Bootstrap用于动态布局

3 个答案: