制作响应式导航栏
[英]Make Responsive Navigation Bar
问题描述
I am working on web-development project.
我正在从事网络开发项目。 I can not make my website responsive for mobile devices.我无法让我的网站响应移动设备。
For desktop, the navigation bar looks right, for mobile devices nav-bar does not collapse.对于桌面，导航栏看起来正确，对于移动设备，导航栏不会折叠。
Below snippet is the navigation bar from W3Schools examples-下面的代码片段是来自 W3Schools 示例的导航栏 -
<body>
<div class="nav navbar" body {background-color:#000000;font-weight: bold;font-size: 15px;color: red;} >
<ul class="nav nav-tabs">
<li class="active"><a class="t1" data-toggle="tab" href="#tab_google_search">Search</a>
</li>
.. .. ......
<div class="tab-content">
<div id="tab_google_search" class="tab-pane fade in active">
<iframe id="google_search" src="https://www.google.com/" frameborder="0" scrolling = "yes"></iframe>
</div>
</div>
What are the possible changes to be made to work my website for mobile devices为了使我的网站适用于移动设备，可能需要进行哪些更改
2 个解决方案
解决方案1
0 2020-04-07 01:12:49
You want to make collapsible navigation bar.你想制作可折叠的导航栏。 It is called media query, by which the website nav-bar is sized against screen.它被称为媒体查询，通过它网站导航栏根据屏幕调整大小。
Bootstrap is the best tool for making responsive website. Bootstrap 是制作响应式网站的最佳工具。 For Bootstrap you do not require media query, and this framework is designed for speed-up development process.对于 Bootstrap，您不需要媒体查询，并且该框架旨在加快开发过程。 The below snippet is copied from another answer , only for understanding purpose.下面的片段是从另一个答案复制的，仅用于理解目的。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="navbar navbar-inverse"> <div class="container"> <a href="#" class="navbar-brand">MyWebsite</a> <button class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav navbar-left"> <li><a href="">Home</a> </li> <li><a href="">about</a> </li> <li><a href="">contact</a> </li> <li><a href="">search</a> </li> </ul> </div> </div> </div>
Run the snippet in full-screen, to avoid mobile-view of the website全屏运行代码段，以避免网站的移动视图
解决方案2
0 2020-04-07 05:25:23
Try this:尝试这个：
<,DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">My WebsiteName</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Hello World</h3> </div> </body> </html>
When the screen size reaches equal to the mobile device, this navbar will get converted to a collapsible navbar with three horizontal lines within.当屏幕大小达到与移动设备相等时，此导航栏将转换为可折叠的导航栏，其中包含三个水平线。
Note: I have used Bootstrap v4.0 (latest framework).注意：我使用的是 Bootstrap v4.0（最新框架）。
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.