编程 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 相关文章推荐

在jquery boxy中添加百度地图坐标拾取注意流程

Apr 03 Javascript

一个支持任意尺寸的图片上下左右滑动效果

Aug 24 Javascript

jQuery对象的链式操作用法分析

May 10 Javascript

关于JS变量和作用域详解

Jul 28 Javascript

前端实现文件的断点续传(前端文件提交+后端PHP文件接收)

Nov 04 Javascript

JS中判断null的方法分析

Nov 21 Javascript

详解jQuery中的DOM操作

Dec 23 Javascript

js将字符串中的每一个单词的首字母变为大写其余均为小写

Jan 05 Javascript

canvas仿iwatch时钟效果

Mar 06 Javascript

jQuery使用ajax_动力节点Java学院整理

Jul 05 jQuery

解决layui-table单元格设置为百分比在ie8下不能自适应的问题

Sep 28 Javascript

Vue Element UI自定义描述列表组件

May 18 Vue.js

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 版获取重定向后的地址(代码)

2013/06/26 PHP

PHP $_FILES中error返回值详解

2014/01/30 PHP

php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法

2016/10/12 PHP

Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法

2018/05/28 PHP

JavaScript 页面坐标相关知识整理

2010/01/09 Javascript

jquery实现简单Tab切换菜单效果

2020/07/17 Javascript

Bootstrap轮播插件中图片变形的终极解决方案使用jqthumb.js

2016/07/10 Javascript

Bootstrap select多选下拉框实现代码

2016/12/23 Javascript

使用jQuery操作DOM的方法小结

2017/02/27 Javascript

慕课网题目之js实现抽奖系统功能

2017/09/19 Javascript

你可能不知道的前端算法之文字避让（inMap）

2018/01/12 Javascript

Vue中使用ElementUI使用第三方图标库iconfont的示例

2018/10/11 Javascript

解决百度Echarts图表坐标轴越界的方法

2018/10/17 Javascript

js实现全选反选不选功能代码详解

2019/04/24 Javascript

实现vuex与组件data之间的数据同步更新方式

2019/11/12 Javascript

[02:15]2015国际邀请赛选手档案IG.Ferrari 430

2015/07/30 DOTA

Python中优化NumPy包使用性能的教程

2015/04/23 Python

用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例

2017/12/14 Python

python+PyQT实现系统桌面时钟

2020/06/16 Python

使用Tkinter制作信息提示框

2020/02/18 Python

python 图像插值最近邻、双线性、双三次实例

2020/07/05 Python

AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

2020/08/20 HTML / CSS

YSL圣罗兰美妆英国官网：Yves Saint Laurent Beauty UK

2019/08/03 全球购物

瑞典多品牌连锁店：Johnells

2021/01/13 全球购物

个人简历中自我评价

2014/02/11 职场文书

《登鹳雀楼》教学反思

2014/04/09 职场文书

乡镇综治宣传月活动总结

2014/07/02 职场文书

纪念9.18事变演讲稿

2014/09/14 职场文书

领导党的群众路线教育实践活动个人对照检查材料

2014/09/23 职场文书

整改报告格式

2014/11/06 职场文书

2014年双拥工作总结

2014/11/21 职场文书

放假通知范文

2015/04/14 职场文书

拾金不昧表扬信怎么写

2015/05/04 职场文书

主持人大赛开场白

2015/05/29 职场文书

MySQL root密码的重置方法

2021/04/21 MySQL

Python OpenCV之常用滤波器使用详解

2022/04/07 Python