Bootstrap之网站导航栏制作

今天药忘吃喽~ 2022-09-23 08:27 238阅读 0赞

网站导航栏制作通过bootstrap变得十分简单。只需要引入相关的样式文件和js文件即可。

第一步引入相关文件：

<link rel="stylesheet"
    	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    
    
    
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

第二步就是编写html代码：

<div class="navbar navbar-default">
    		<a class="navbar-brand" href="#">  <img id="logo" height="102px" width="137px" src="image/logo2.png">
    		</a>
    		<div class="container-fluid">
    			
    
    			<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">切换菜单</span> <span class="icon-bar"></span> <span
    						class="icon-bar"></span> <span class="icon-bar"></span>
    				</button>
    
    			</div>
    		</div>
    </div>
    
    	
    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    	 
    		
    		<ul class="nav navbar-nav">
    			<li><a href="NavServlet?action=index">首页</a></li>
    			<li><a href="#">活动与新闻</a></li>
    			<li><a href="#">成员风采</a></li>
    			<li><a href="NavServlet?action=softwaredownload">软件下载</a></li>
    			<li><a href="NavServlet?action=feedback">意见反馈</a></li>
    			<li><a href="#">知识库</a></li>
    			<li><a href="NavServlet?action=aboutus">关于我们</a></li>
    		</ul>
    
    	
    	</div>

其中第一个大的div是响应式布局（意思就是在小屏幕上切换出的菜单栏），第二个大div是在电脑上或者高分辨率上显示的菜单。

如果只适配电脑端，可以把前面的那个最大的div删除。