制作响应式导航栏
[英]Make Responsive Navigation Bar
问题描述
我正在从事网络开发项目。 我无法让我的网站响应移动设备。
对于桌面，导航栏看起来正确，对于移动设备，导航栏不会折叠。
下面的代码片段是来自 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>
为了使我的网站适用于移动设备，可能需要进行哪些更改
2 个解决方案
解决方案1
0 2020-04-07 01:12:49
你想制作可折叠的导航栏。 它被称为媒体查询，通过它网站导航栏根据屏幕调整大小。
Bootstrap 是制作响应式网站的最佳工具。 对于 Bootstrap，您不需要媒体查询，并且该框架旨在加快开发过程。 下面的片段是从另一个答案复制的，仅用于理解目的。
<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>
全屏运行代码段，以避免网站的移动视图
解决方案2
0 2020-04-07 05:25:23
尝试这个：
<,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>
当屏幕大小达到与移动设备相等时，此导航栏将转换为可折叠的导航栏，其中包含三个水平线。
注意：我使用的是 Bootstrap v4.0（最新框架）。
希望这可以帮助。
如何制作响应式导航栏？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.