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 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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的字符串用法小结
2010/06/08 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python读写csv文件方法详细总结
2019/07/05 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
加拿大留学自荐信
2014/01/28 职场文书
高考寄语大全
2014/04/08 职场文书
我的中国心演讲稿
2014/09/04 职场文书
导游词范文
2015/02/13 职场文书
学校安全管理制度
2015/08/06 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Python序列化与反序列化相关知识总结
2021/06/08 Python
Ajax实现异步加载数据
2021/11/17 Javascript