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

时间：2024-10-22 08:00:44

使用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="/libs/bootstrap/3.3.7/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="">浏览器博物馆</a> -->
            <span class="navbar-brand">蜗壳</span>
        </div>
<!-- //导航条内容，为了响应式布局，点击三道杠弹出导航栏 -->
        <div>           
<!-- //代表导航栏中的项目 -->
 <ul class="nav navbar-nav collapse navbar-collapse" >
                <li><a href=""><span class="glyphicon glyphicon-home"></span>二手市场</a></li>
                <li><a href=""><span class="glyphicon glyphicon-globe"></span>活力圈子</a></li>         
                <li><a href=""><span class="glyphicon glyphicon-bell"></span>消息列表</a></li>
                <li><a href=""><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="/libs/jquery/2.1.1/"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="/libs/bootstrap/3.3.7/js/"></script>
</body>
</html>

相关文章