BootStrap制作导航条实例代码

更新时间：2016年05月06日 13:00:32 作者：七叶林

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。本文给大家介绍BootStrap制作导航条实例代码，感兴趣的朋友一起学习吧

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

bootstrap 导航条摸索了好久，要不就是左边和右边不会水平对齐，要不就是颜色不一样，菜鸟最后终于搞定，直接把代码放这里，以后直接用

代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role = "navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KKK</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页 <span class="sr-only"></span></a></li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">haha<span class="sr-only"></span></a></li>
<li><a href="#">haha<span class="sr-only"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

看一下结果

这里写图片描述

以上所述是小编给大家介绍的BootStrap制作导航条实例代码，希望对大家有所帮助！

您可能感兴趣的文章:

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
这篇文章主要介绍了使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转),其实主要用到的就是 CSS3 的效果：边框圆角、阴影，3D变换，实现代码超级简单，需要的朋友可以参考下
2018-10-10
js中对象和面向对象与Json介绍
今天小编就为大家分享一篇关于js中对象和面向对象与Json介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
关于导入excel时js转换时间的正确方式
这篇文章主要给大家介绍了关于导入excel时js转换时间的正确方式,以及js读取excel中日期格式转换问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-09-09
echarts柱状堆叠图实现示例(图例和x轴都是动态的)
一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,下面这篇文章主要给大家介绍了关于echarts柱状堆叠图(图例和x轴都是动态的)的相关资料,需要的朋友可以参考下
2023-04-04
javascript的var与let,const之间的区别详解
这篇文章主要为大家介绍了 javascript的var与let,const之间的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
小程序页面动态配置实现方法
这篇文章主要介绍了小程序页面动态配置实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
js实现本地持久化存储登录注册
这篇文章主要为大家详细介绍了js实现本地持久化存储登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JS判断字符串字节数并截取长度的方法
这篇文章主要介绍了JS判断字符串字节数并截取长度的方法,涉及JavaScript针对页面元素与字符串的动态操作技巧,需要的朋友可以参考下
2016-03-03
12个非常有创意的JavaScript小游戏
JavaScript 在Web开发过程中已经是必不可少的重要分子，他推动着Web的交互性往越来越高的层次发展，现在的很多Web游戏也基于这类语言开发。
2010-03-03
基于jquery ajax的多文件上传进度条过程解析
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09