我想为我的应用程序设计UI，以便它能够响应 [英] I want to design UI for my application so that it should be responsive
问题描述
I want to Design UI For My Application so that It Should be responsive and Also when It is open on computer It Should Display All Menu From Menu Bar
and when It Is open on mobile It Should Hide some of menu from Menu Bar
使用HTML5和Bootstrap这是可能的
如果有任何解决方案请提供它。
我的尝试：
Using HTML5 and Bootstrap Is this possible
If ther is any solution please provide It.
What I have tried:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ResponsiveWeb.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="Width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<environment names="Development">
<link href="css/bootstrap.css" rel="stylesheet" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">MY Web Application</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Services">Services</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - WebApplication1</p>
</footer>
</div>
<environment names="Development">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
<%-- @RenderSection("scripts", required: false)--%>
</form>
</body>
</html>
现在，当我的网站在手机上浏览时，我只想显示
我的网络应用程序
首页
关于
但是当网站在计算机上打开时它就是它将显示
所有菜单即
MY Web Application
首页
关于
联系
服务
now when My Website is browse on mobile then I want to display only
MY Web Application
Home
About
But when Website is open on computer then It will display
all menu i.e
MY Web Application
Home
About
Contact
Services
推荐答案
是的，有可能
Yes, It is possible
如果你对UI不了解，那么你应该先启动它们， CSS [ ^ ]& HTML [ ^ ]
一旦熟悉了UI设计，就跳到下面
Bootstrap 3教程 [ ^ ]
响应式网页设计基础知识&NBSP; |&NBSP;网络基础知识 | Google Developers [ ^ ]
HTML响应式网页设计 [ ^ ]
CSS3媒体查询 - 示例 [ ^ ]
if you dont know anything about UI then you should start these first, CSS[^] & HTML[^]
Once you are familiar with the UI design then jump into the below
Bootstrap 3 Tutorial[^]
Responsive Web Design Basics | Web Fundamentals | Google Developers[^]
HTML Responsive Web Design[^]
CSS3 Media Queries - Examples[^]
这篇关于我想为我的应用程序设计UI，以便它能够响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
