bootstrap组件化练习之导航栏nav

最新推荐文章于 2023-07-24 13:56:47 发布

weixin_40752032

最新推荐文章于 2023-07-24 13:56:47 发布

阅读量871

点赞数

分类专栏：前端文章标签： bootstrap nav 导航栏自适应

本文链接：https://blog.csdn.net/weixin_40752032/article/details/99444358

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

博主主要从事php后端开发，前端页面设计一直是个头疼的问题，下定决心研究下bootstrap，好给自己的页面上增添点样式，不至于太丑。
bootstrap——使用的bootstrap3.0版本，目前还是个菜鸡！
只是把每日所学贴出来，好回顾。
一、前期准备工作
引入bootstrap，jquery||bootstrap采用的jquery所以必须引入。

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>

因为我要做自适应的网站，所以媒体查询必不可少。

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

二、网站导航栏制作
使用bootstrap就是直接用它的class，以及组件
导航栏制作——完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
	.navbar-brand{
		padding:0;
	}
	.navbar-brand img{
		max-width: 100%;
		max-height: 100%;
	}
    </style>
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
		  <a href="/" class="navbar-brand"><img src="image/logo.png" alt="" class="img-responsive"></a>
	  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	  </button>
	</div>
	  <div class="collapse navbar-collapse" id="navbar-collapse">
		  <ul class="nav navbar-nav navbar-right">
				<li class="active"><a href="">首页</a></li>
				<li><a href="">APP开发</a></li>
				<li><a href="">游戏开发</a></li>
				<li><a href="">区块链</a></li>
				<li><a href="">商城</a></li>
				<li><a href="">模式系统</a></li>
				<li><a href="">管理系统</a></li>
				<li><a href="">案例</a></li>
				<li><a href="">关于我们</a></li>
			</ul>
	  </div>
	</div>	
	</nav>
</body>
</html>

pc端效果图

移动端效果图
在这里插入图片描述

weixin_40752032

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap组件化练习之导航栏nav

博主主要从事php后端开发，前端页面设计一直是个头疼的问题，下定决心研究下bootstrap，好给自己的页面上增添点样式，不至于太丑。bootstrap——使用的bootstrap3.0版本，目前还是个菜鸡！只是把每日所学贴出来，好回顾。一、前期准备工作引入bootstrap，jquery||bootstrap采用的jquery所以必须引入。 <link rel="styleshe...
复制链接

扫一扫