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.timer插件实现一个计时器
Apr 25 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
浅谈JavaScript 声明提升
Sep 14 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
mysql5详细安装教程
2007/01/15 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JS实现简单短信验证码界面
2017/08/07 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
python中的函数用法入门教程
2014/09/02 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
css3学习心得分享
2013/08/19 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
七年级历史教学反思
2014/02/05 职场文书
办公室岗位职责
2014/02/12 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers