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制作导航条实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
vue引入静态js文件的方法
Jun 20 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 开发工具
2006/12/06 PHP
php 操作符与控制结构
2012/03/07 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
html读出文本文件内容
2007/01/22 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
vue使用laydate时间插件的方法
2018/11/14 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python中的choice()方法使用详解
2015/05/15 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
食堂个人先进事迹
2014/01/22 职场文书
交通事故和解协议书
2014/09/25 职场文书
法务专员岗位职责
2015/02/14 职场文书
结婚老公保证书
2015/02/26 职场文书
恰同学少年观后感
2015/06/08 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android