南宁小程序开发,挑战百日学习计划第52天(自适应导航条)

最新推荐文章于 2022-04-30 12:04:24 发布

zkelm.com

最新推荐文章于 2022-04-30 12:04:24 发布

阅读量334

点赞数 1

分类专栏：南宁小程序开发小程序定制小程序文章标签：专业小程序开发定制小程序开发定制企业系统开发定制

本文链接：https://blog.csdn.net/zkelm/article/details/111570911

版权

小程序同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

小程序定制

15 篇文章 1 订阅

订阅专栏

虽然看了Bootstrap的好几个实战教程，但是没操作过一遍，确实还是有点感觉不适应，实战之中还是会出现一些乱七八糟的小问题，学Bootstrap 还是要做一些实例来对它语法的适应.

广西南宁小程序开发定制：www.nasiot.com

今晚弄了一个简单的bootstrap 导航条，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap响应式</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
			<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
			<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
			<style type="text/css">
				img.navbar-brand{
					
					padding:0px;
				}
				.navbar-form .form-group .form-control{
					width:250px;
				}
			</style>
	</head>
	<body >
		<div class="container">
		
		<nav class="navbar navbar-default " role="navigation">
		    <div class="container-fluid"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse"
		                data-target="#example-navbar-collapse">
		            <span class="sr-only"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		        </button>
		        <img class="navbar-brand" src="http://www.qq390.com/zb_users/upload/2020/09/202009231600851619575553.jpg"/>
		    </div>
		    <div class="collapse navbar-collapse" id="example-navbar-collapse">
		        <ul class="nav navbar-nav">
		            <li class="active"><a href="#">小程序开发</a></li>
		            <li><a href="#">企业oa开发</a></li>
		            <li class="dropdown">
		                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
		                    物联网 <b class="caret"></b>
		                </a>
		                <ul class="dropdown-menu">
		                    <li><a href="#">单片机</a></li>
		                    <li><a href="#">STM32</a></li>
		                    <li><a href="#">C语言</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#">基础电路</a></li>
		                    
		                </ul>
		            </li>
					<form class="navbar-form navbar-left hidden-sm hidden-xs" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="请输入关键字">
							</div>
							
					</form>
					
		        </ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-user"> Admin</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"> 登出</a></li>
				</ul>
		    </div>
			
		    </div>
		</nav>
	
		
		</div>
	</body>
</html>