制作響應式導航欄
[英]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.