基于HTML5的移动Web应用——Bootstrap 样式案例：制作响应式导航条

最新推荐文章于 2023-09-08 10:16:30 发布

sem00000

最新推荐文章于 2023-09-08 10:16:30 发布

阅读量4.3k

点赞数 4

分类专栏：前端移动WEB开发文章标签： bootstrap html css

本文链接：https://blog.csdn.net/sem00000/article/details/105964787

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

使用响应式导航条布局页面
当浏览器宽度小于768px时，表单里的搜索框和按钮隐藏
点击icon图标是用来隐藏的菜单内容出现

运行效果
在这里插入图片描述

参考代码1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style >
		.navbar-brand {
				padding: 5px 15px;
			}*
		</style>
	</head>
	<body>
		<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="img/logo.png" class="img-responsive" style="height: 40px;"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">入门课</a></li>
        <li><a href="#">岗位课</a></li>
        <li><a href="#">技能库</a></li>
        <li><a href="#">微社区</a></li>
		<li><a href="#">学员 <span class="label label-danger">new</span></a></li>
      </ul>
      
      <form class="navbar-form navbar-right">
        <div class="form-group form-group-sm">
          <input type="text" class="form-control input-group-sm" placeholder="请输入搜索的内容">
        </div>
        <button type="submit" class="btn btn-success btn-sm">搜索</button>
      </form>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>

参考代码2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        @media (max-width: 768px) {
            .myform{
                display: none;

            }
            .myul{
                float: right;
                position: absolute;
                top: 0;
                left: 50%;
                font-size: 14px;
                margin-left: 6px;
              }
            .myul li{
                float: left;

            }
            .myul li a{
                font-size: 1em;
                padding: 10px 6px;
            }
        }
    </style>
</head>
<body>

    <header>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a href="#"><img src="image/logo.png" alt=""/></a>
                    <!--data-target=".navbar-collapse" 点不能忘记-->
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class=" collapse navbar-collapse navbar-left">
                    <ul class="nav navbar-nav">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">入门课</a></li>
                        <li><a href="#">岗位课</a></li>
                        <li><a href="#">技能库</a></li>
                        <li><a href="#">微社区</a></li>
                        <li><a href="#">学员<span style="margin-left:6px;" class="label label-danger">new</span></a></li>
                    </ul>

                </div>

                <form class="navbar-form navbar-right myform">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="请输入要搜索的内容"/>
                        <input class="btn btn-success" type="button" value="搜索"/>
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right myul">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </nav>

    </header>
<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script>
</body>
</html>

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

sem00000

关注

4
点赞
踩
41

收藏

觉得还不错? 一键收藏
2
评论
基于HTML5的移动Web应用——Bootstrap 样式案例：制作响应式导航条

需求说明使用响应式导航条布局页面当浏览器宽度小于768px时，表单里的搜索框和按钮隐藏点击icon图标是用来隐藏的菜单内容出现运行效果参考代码1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <l...
复制链接

扫一扫

专栏目录