利用Bootstrap制作汉堡按钮(header部分)

页面展示:本次网页header部分的页面效果。
技术要求:Bootstrap布局容器、Bootstrap导航栏
制作汉堡按钮的固定写法:
利用Bootstrap制作汉堡按钮(header部分)_第1张图片
同时需要安装Bootstrap下载安装,下载地址:https://www.bootcss.com/
利用Bootstrap制作汉堡按钮(header部分)_第2张图片
利用Bootstrap制作汉堡按钮(header部分)_第3张图片
解压之后会有css、js、fonts,但是js中没有jQuery文件。
利用Bootstrap制作汉堡按钮(header部分)_第4张图片
这时复制此地址在网页打开:https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js,看到了版本信息后,在页面右击另存为之后会弹出一个对话框文件名为jquery.min.js保存即可。
利用Bootstrap制作汉堡按钮(header部分)_第5张图片
利用Bootstrap制作汉堡按钮(header部分)_第6张图片
在写网页是把需要的css和js导入即可。
下面是代码展示:

<!DOCTYPE html>
<html>
<head>
<title>header</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
<style>
    img{
        width: 50px;
        height: 40px;
        margin-top: 2px;
    }
    .active-default{
        background: red;
    }
    .navbar-brand{
        margin-top: 0px;
    }
    .navbar ul li:hover{
        
        background-color: red;
    }
    #box{
        width: 100%;
        height: 10px;
        background-color: seagreen;
    }
    .navbar-right{
        position: relative;
        margin-right: 20px;
    }
</style>
</head>
<body>
    <div id="box"></div>
    <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</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/45678.jpg" alt="" ></a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">主页</a></li>
              <li><a href="#about">餐厅</a></li>
              <li><a href="#contact">健康</a></li>
              <li><a href="#contact">话题</a></li>
              <li><a href="#contact">联系我们</a></li>
            </ul>
          </div>
        </div>
        <div class="navbar-right"><font color="red">¥0.00</font></div>
      </nav>
      
    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

最初效果:
在这里插入图片描述浏览器放大到一定大小显示
利用Bootstrap制作汉堡按钮(header部分)_第7张图片
觉得看完了对您有帮助,请点个赞呗!

你可能感兴趣的:(html)