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 相关文章推荐
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
在Vue中使用HOC模式的实现
Aug 23 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 用数组降低程序的时间复杂度
2009/12/04 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
节水标语大全
2014/06/11 职场文书
简单租房协议书范本
2014/08/20 职场文书
交通工程专业推荐信
2014/09/06 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS