Bootstrap自适应导航栏（带搜索框）

最新推荐文章于 2025-06-20 08:30:05 发布

原创最新推荐文章于 2025-06-20 08:30:05 发布 · 2.4w 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #导航栏 #自适应

前端（bootstrap）专栏收录该内容

20 篇文章

订阅专栏

博客介绍了使用Bootstrap创建的原始导航栏，未进行自定义颜色等操作，还展示了电脑版和手机版样图，体现了其自适应特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Bootstrap创建的导航栏，最为原始的，没有任何的自定义颜色什么的
电脑版样图

手机版样图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Responsive layout：响应式布局-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>蜗壳</title>

	<!-- 引入Bootstrap核心样式文件 -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 添加navbar-fixed-top可以让导航条一直固定在顶部，不会因为滚动条改变而改变，navbar-inverse让导航条黑底展示 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
　　<div class="container">　　<!-- container让导航条居中container-fluid让导航条自适应 -->　　
　　　　<div class="navbar-header">
　　　　　　 <!-- 代表响应式布局：当浏览器宽度小于某个值时导航栏折叠变成三道杠 -->
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
                <span class="sr-only navbar-left">切换导航</span>
                <span class="icon-bar navbar-left"></span>
                <span class="icon-bar navbar-left"></span>
                <span class="icon-bar navbar-left"></span>
            </button>
       <!-- //代表导航栏左侧logo或者图标  -->   
　　　　 　　<!-- <a class="navbar-brand" href="http://www.baidu.com">浏览器博物馆</a> -->
            <span class="navbar-brand">蜗壳</span>
        </div>
　　　　<!-- //导航条内容，为了响应式布局，点击三道杠弹出导航栏 -->
        <div>           
　　　　　　　　<!-- //代表导航栏中的项目 -->
　　　　　　 <ul class="nav navbar-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <li><a href="www.baidu.com"><span class="glyphicon glyphicon-home"></span>二手市场</a></li>
                <li><a href="www.baidu.com"><span class="glyphicon glyphicon-globe"></span>活力圈子</a></li>         
                <li><a href="www.baidu.com"><span class="glyphicon glyphicon-bell"></span>消息列表</a></li>
                <li><a href="www.baidu.com"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
            </ul>
            <!-- 搜索框 -->
            <form class="navbar-form navbar-left" role="search">
		       <div class="form-group">
			        <input type="text" class="form-control" placeholder="Search">
			        <button type="submit" class="btn btn-default">搜索</button>
		       </div>
		       
	       </form>
	       <!-- 登录注册 -->
	       <!-- <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
           </ul> -->
        </div>
    </div>
</nav>

<!-- 引入jQuery核心js文件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>