编程 Javascript

BootStrap制作导航条实例代码

Posted in Javascript onMay 06, 2016

什么是 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制作导航条实例代码

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

BootStrap制作导航条实例代码

- Author -

七叶林

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 入门基础学习

Mar 10 Javascript

js导出table到excel同时兼容FF和IE示例

Sep 03 Javascript

jQuery 属性选择器element[herf*='value']使用示例

Oct 20 Javascript

javascript基础语法——全面理解变量和标识符

Jun 02 Javascript

JavaScript中的ajax功能的概念和示例详解

Oct 17 Javascript

自定义require函数让浏览器按需加载Js文件

Nov 24 Javascript

jquery基于layui实现二级联动下拉选择(省份城市选择)

Jun 20 jQuery

js canvas实现写字动画效果

Nov 30 Javascript

vue基础之data存储数据及v-for循环用法示例

Mar 08 Javascript

微信小程序wepy框架学习和使用心得详解

May 24 Javascript

vue3.0实现点击切换验证码(组件)及校验

Nov 18 Vue.js

如何用JavaScipt测网速

May 09 Javascript

jQuery实现下拉框功能实例代码

May 06 #Javascript

jQuery 实现评论等级好评差评特效

May 06 #Javascript

Node.js插件安装图文教程

May 06 #Javascript

node.js插件nodeclipse安装图文教程

Oct 19 #Javascript

javascript实现平滑无缝滚动

Aug 09 #Javascript

基于jquery实现即时检查格式是否正确的表单

May 06 #Javascript

jquery 全选、全不选、反选效果的实现代码【推荐】

May 05 #Javascript

You might like

php常用的安全过滤函数集锦

2014/10/09 PHP

Thinkphp多文件上传实现方法

2014/10/31 PHP

php备份数据库类分享

2015/04/14 PHP

解决php用mysql方式连接数据库出现Deprecated报错问题

2019/12/25 PHP

新浪刚打开页面出来的全屏广告代码

2007/04/02 Javascript

js的闭包的一个示例说明

2008/11/18 Javascript

使用Java实现简单的server/client回显功能的方法介绍

2013/05/03 Javascript

js jquery ajax的几种用法总结(及优缺点介绍)

2014/01/28 Javascript

jQuery中even选择器的定义和用法

2014/12/23 Javascript

JavaScript监听文本框回车事件并过滤文本框空格的方法

2015/04/16 Javascript

JavaScript中的Math.sin()方法使用详解

2015/06/15 Javascript

对于jQuery性能的一些优化建议

2015/08/13 Javascript

JavaScript实现输入框(密码框)出现提示语

2016/01/12 Javascript

JS动态添加选项案例分析

2016/10/17 Javascript

JS Select下拉框(支持输入模糊查询)

2017/02/04 Javascript

详解Javascript几种跨域方式总结

2017/02/27 Javascript

jQuery remove()过滤被删除的元素（推荐）

2017/07/18 jQuery

微信小程序tabbar底部导航

2018/11/05 Javascript

微信小程序实现星级评价效果

2018/12/28 Javascript

原生js实现的移动端可拖动进度条插件功能详解

2019/08/15 Javascript

Python全局变量用法实例分析

2016/07/19 Python

发布你的Python模块详解

2016/09/15 Python

python如何为被装饰的函数保留元数据

2018/03/21 Python

python微信公众号之关键词自动回复

2018/06/15 Python

在Python中将函数作为另一个函数的参数传入并调用的方法

2019/01/22 Python

Tensorflow: 从checkpoint文件中读取tensor方式

2020/02/10 Python

python用tkinter实现一个简易能进行随机点名的界面

2020/09/27 Python

Europcar西班牙：全球汽车租赁领域的领导者

2018/09/17 全球购物

俄罗斯品牌服装和鞋子的在线商店：KUPIVIP

2019/10/27 全球购物

耐克亚太地区：Nike APAC

2019/12/07 全球购物

购房公证委托书（2014版）

2014/09/12 职场文书

毕业生就业推荐表自我评价

2015/03/02 职场文书

文艺有韵味的诗句（生命类、亲情类...）

2019/07/11 职场文书

Nginx tp3.2.3 404问题解决方案

2021/03/31 Servers

python小程序之飘落的银杏

2021/04/17 Python

关于HTML编码导致的乱码问题

2021/09/04 HTML / CSS