Question

所以我一直在用mvc 5在asp.net core 2中进行c＃/ razor Web应用程序的工作，并且相处得很好，但是现在我需要创建一个能够进行响应设计的新网站。

我基本上只需要根据用户使用的设备来更改视图及其CSS。我已经在使用bootstrap了，它已经完成了部分工作，但是我只想对视图进行不同的样式设置。

我已经经历了许多负载，但是所有负载都没有出现在asp.net core 2中，并使用BundleConfigs ect。我没有找到适用于我的框架和版本的教程或模板。

从根本上讲，这只是我正在寻找的东西，而只是伪代码：这应该是完整视图的示例。因此显然不是每个按钮都可以。

if(device==mobile){
<a class="btn btn-sm">Link</a>
}
else{
<a class="btn btn-lg">Link</a>
}

我知道这不是stackoverflow的完美问题，因为我只是在寻求帮助，我道歉，但是我只是在寻求小小的帮助或链接的教程之类的东西。

Answer 1

关于Bootstrap的整个观点是，它完全专注于响应式设计，并在某些断点（屏幕宽度； xtra large / xl和large / lg显示屏（例如27英寸的Apple Thunderbolt，例如全屏浏览器）下使用媒体查询），中/ md（13英寸笔记本电脑窗口），小/ sm（ipad）和xtra小/ xs（iphone）。

因此绝对不需要在cshtml中使用if / else构造。您可以使用所有这些响应式类（例如-xl，-lg，-md，-sm和-xs）和Bootstrap（媒体查询）等后缀来配置布局，Bootstrap（媒体查询）根据页面的窗口大小为您完成其余工作显示在。

以您的示例为例，您可以这样做：

<a class="btn btn-sm d-sm-none">Link</a>
<a class="btn btn-lg d-none d-sm-inline-block">Link</a>

第一个锚点显示的窗口宽度小于 sm ，并且页面等于或大于 sm 时被隐藏（d-sm -没有）。第二个锚标记“默认情况下”是隐藏的（d-none），并从 sm 断点及更高点（sm，md，lg，xl）显示。有关更多参考，请检查此Bootstrap page。

因此，如果您的cshtml中没有/ else构造，则无需麻烦。

适用于台式机和移动设备的样式视图差异ASP.NET Core 2 MVC5

1 个答案: