南寧小程式開發,挑戰百日學習計劃第52天(自適應導航條)

zkelm.com發表於2020-12-23
原文網址 : https://blog.csdn.net/zkelm/article/details/111570911

雖然看了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>

顯示效果如下：
廣西小程式開發定製

自適應狀態下
廣西小程式開發

自適應導航欄的製作，使用的bootstrap前端框架，外加小改

如果您有小程式開發以定製，歡迎諮詢合作，我有4個技術員接單做專案。沒錯了我就是總負責人，前端只是個人愛好，後期我還會學電路+微控制器+stm32 ，一起加油！小程式 app 開發定製：www.nasiot.com

相關文章