个人中心
gpt4 book ai didi

html - Bootstrap 响应式导航

转载 作者：行者123 更新时间：2023-11-28 03:41:00 24 4
gpt4 key购买 nike

我想使用 Twitter bootstrap 实现类似这样的 html 布局

我希望它在桌面和移动两种模式下都能响应，如下例所示

桌面模式

desktop

移动模式

MOBILE

这是我到目前为止尝试过的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div id="navbar-main">
        <!-- Fixed navbar -->
        <div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="/image/G2Xgp.png">
                    </a>
                </div>
                <div class="navbar-collapse collapse navbar-right">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href='#'>FR</a></li>
                        <li><a href='#'>EN</a></li>
                        <li><a href='#'>KR</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
                <ul class="nav navbar-nav navbar-right">
                    <ul class="nav navbar-nav navbar-right" role="menu">
                        <li><a href='#'>HOME</a></li>
                        <li><a href='#'>ABOUT US</a></li>
                        <li><a href='#'>TEST</a></li>
                        <li><a href='#'>TEST</a></li>
                        <li><a href='#'>TEST</a></li>
                        <li><a href='#'>TEST</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
</header>
</body>
</html>

感谢任何帮助

最佳答案

试试这个...!可能这会帮助你..!我在 head 中添加了一些自定义的 css，看看...!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .navbar{
	  background: #540d1f;
    padding: 25px 0;
  }
  .container-fluid{
  	background:#bcaa60 !important;
  }
  .navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
    .navbar-brand{
    position: relative;
    top: -45px;
}
@media only screen and (max-width: 767px) {
    .navbar-brand{
    position: relative;
    top: -45px;
    left:30%;
}
}
    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="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>
       <a class="navbar-brand" href="#">
                        <img width="90px" src="/image/G2Xgp.png">
                    </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

enter image description here

关于html - Bootstrap 响应式导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44215259/

24 4 0
文章推荐： javascript - 如何在Windows上上传扩展名为 '.pem'的文件
文章推荐： c++ - 无法将数据输出到文本文件中
文章推荐： c++ - C++中重写虚方法
文章推荐： html - 在 Objective C 中将 RTF 文件转换为 HTML
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com