英文:
How to have seperate navbar for mobile and pc?
问题
我正在创建一个作品集，我想在移动视图和电脑视图中分开导航栏。我想让移动视图不固定（也就是说，如果我向下滚动，它会消失），但我希望PC版本固定在页面顶部。我似乎无法弄清楚如何做到这一点。感谢您的帮助 :）。以下是我的HTML和CSS文件：
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.shalaj {
font-family: 'Open Sans', sans-serif;
font-size: 150%;
}
.nav-item {
font-family: 'Open Sans', sans-serif;
font-size: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
.main {
margin-top: 30px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="js/bootstrap.min.js" charset="utf-8"></script>
<title>Exmaplea</title>
<link rel="icon" href="images/icon.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="index.html">Example</a>
<div class="navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="work.html">WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">RESUME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<div class="jumbotron">
<h1 class="display-4">Hi, I'm Name!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<br>
<br>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</body>
</html>
希望这可以帮助您实现您的导航栏需求。如果您需要进一步的帮助，请随时提问。
英文:
I'm creating a portfolio and I wanted to have a seperate the navbar that appears in the mobile view and in the pc view. I want it in such a way that the mobile view is not fixed (meaning if I scrolldown it disappears), but i want the pc version to be fixed on the top of the page. I can't seem to figure out how to do this. Thanks for the help :). Below are my HTML and CSS files:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.shalaj {
font-family: 'Open Sans', sans-serif;
font-size: 150%;
}
.nav-item {
font-family: 'Open Sans', sans-serif;
font-size: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
.main {
margin-top: 30px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="js/bootstrap.min.js" charset="utf-8"></script>
<title>Exmaplea</title>
<link rel="icon" href="images/icon.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="index.html">Example</a>
<div class="navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="work.html">WORK</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">RESUME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<div class="jumbotron">
<h1 class="display-4">Hi, I'm Name!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<br>
<br>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
这是一个有点复杂的问题，具体取决于你想要多全面解决它。但基本上，你需要查看CSS 媒体查询。它们允许你根据客户端设备的属性指定条件 CSS。
最常见的用例是根据视口（窗口或屏幕）的宽度来指定不同的 CSS：
@media (max-width: 800px) {
//使导航栏不固定的 CSS
body {
background-color: red;
}
}
在上面的示例中，只有当显示你的网站的窗口窄于800px时，background-color属性才会被应用于 body。
当你使用这种媒体查询时，你还应告诉浏览器不要尝试聪明，因为大多数浏览器会尝试自动优化适合移动设备的“桌面”站点。通过以下行，你可以告诉它“不要做任何事情，我已经处理好了”：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
附注： 在你的帖子中，你正在询问根据客户端是移动设备还是桌面设备提供不同的 HTML 或 CSS 文件。出于许多原因，我们尽量避免这样做：
- 这将需要基于用户代理（基本上是一个标识浏览器的字符串）来做决策，这是不可靠的且可能会变化的。
- 它将需要大量的代码重复，因为你的大部分代码在两种类型的设备上都是相同的。
- 它不允许你创建一个“响应式”网站，即适应设备所需变化的网站（移动设备和桌面设备都可以改变窗口大小，具有不同的输入能力...）。
英文:
This is somewhat of a complicated problem depending on how thorough you want to be here. But basically, you need to look at CSS Media Queries. They allow you to specify conditional CSS to be used based on the properties of the client's device.
The most common use case it to specify a width of viewport (window or screen) under which the CSS should be different:
@media (max-width: 800px) {
//css to make the nav bar not fixed
body {
background-color: red;
}
}
in the above example, the background-color property will only be applied to the body if the window displaying your website is narrower than 800px.
When you use this kind of media-query, you should also tell the browser not to try and be smart, because most browsers try to automatically optimise "desktop" sites to look good on mobile. With the following line, you can tell it "don't do anything, I've got this covered":
<meta name="viewport" content="width=device-width, initial-scale=1.0">
PS: In your post, you're asking about serving a different HTML or CSS file based on whether the client is browsing on mobile or desktop. This is a route we try and avoid for many reasons:
- it would require basing this decision on the user agent (basically a string identifying the browser) and this is not reliable and subject to changes
- it would necessitate a lot of code duplication as most of your code would be identical on both types of devices
- it does not allow you to make a website "responsive", i.e., that adapts to the changes required by the device (both mobile and desktop can change the size of the window, have different input capabilities...)
答案2
得分: -1
Create separate navbar with bootstrap classes:
- 对于移动设备，可以使用以下 div：
<div class="visible-xs hidden-sm hidden-md hidden-lg"></div>
- 对于 PC，可以使用以下 div：
<div class="hidden-xs visible-sm visible-md visible-lg"></div>
这可能是一个重复的问题：链接
英文:
Create separate navbar with bootstrap classes:
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg
Ex:
-
For mobile devices, following div can be used:
<div class="visible-xs hidden-sm hidden-md hidden-lg">
-
For PC, following div can be used:
<div class="hidden-xs visible-sm visible-md visible-lg">
This is the probably duplicate question : https://stackoverflow.com/questions/24270816/how-can-i-add-a-different-menu-to-the-mobile-version-of-my-bootstrap-theme-in-wo
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论