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

javascript两种function的定义介绍及区别说明

May 02 Javascript

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

Jul 13 Javascript

node.js正则表达式获取网页中所有链接的代码实例

Jun 03 Javascript

JavaScript中5种调用函数的方法

Mar 12 Javascript

jQuery实现浮动层随浏览器滚动条滚动的方法

Sep 22 Javascript

微信小程序增、删、改、查操作实例详解

Jan 13 Javascript

微信小程序商城项目之购物数量加减（3）

Apr 17 Javascript

微信小程序获取循环元素id以及wx.login登录操作

Aug 17 Javascript

Vue自定义指令使用方法详解

Aug 21 Javascript

JS温故而知新之变量提升和时间死区

Jan 27 Javascript

微信小程序自定义组件传值页面和组件相互传数据操作示例

May 05 Javascript

如何基于filter实现网站整体变灰功能

Apr 17 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

为什么《星际争霸》是测试人工智能的理想战场

2019/12/03 星际争霸

PHP 文件上传功能实现代码

2009/06/24 PHP

ThinkPHP与PHPExcel冲突解决方法

2011/08/08 PHP

浅析php变量作用域的一些问题

2013/08/08 PHP

php实现获取文件mime类型的方法

2015/02/11 PHP

javascript定时保存表单数据的代码

2011/03/17 Javascript

Jquery实现网页跳转或用命令打开指定网页的解决方法

2013/07/09 Javascript

js简单实现用户注册信息的校验代码

2013/11/15 Javascript

jQuery中:checked选择器用法实例

2015/01/04 Javascript

理解JavaScript的变量的入门教程

2015/07/07 Javascript

jQuery复制节点用法示例(clone方法)

2016/09/08 Javascript

原生JS实现首页进度加载动画

2016/09/14 Javascript

JS实现京东首页之页面顶部、Logo和搜索框功能

2017/01/12 Javascript

基于axios封装fetch方法及调用实例

2018/02/05 Javascript

JavaScript设计模式之工厂模式简单实例教程

2018/07/03 Javascript

Angularjs实现数组随机排序的方法

2018/10/02 Javascript

微信小程序实现左右列表联动

2020/05/19 Javascript

Vue指令之 v-cloak、v-text、v-html实例详解

2019/08/08 Javascript

nuxt 自定义 auth 中间件实现令牌的持久化操作

2020/11/05 Javascript

[03:16]DOTA2完美大师赛主赛事首日集锦

2017/11/23 DOTA

python远程登录代码

2008/04/29 Python

python实现随机密码字典生成器示例

2014/04/09 Python

在Python的web框架中编写创建日志的程序的教程

2015/04/30 Python

python实现二维码扫码自动登录淘宝

2016/12/27 Python

python中copy()与deepcopy()的区别小结

2018/08/03 Python

使用EduBlock轻松学习Python编程

2018/10/08 Python

Python嵌入C/C++进行开发详解

2020/06/09 Python

python编写实现抽奖器

2020/09/10 Python

CSS3截取字符串实例代码【推荐】

2018/06/07 HTML / CSS

HTML5实现预览本地图片

2016/02/17 HTML / CSS

Hotels.com拉丁美洲：从豪华酒店到经济型酒店的预定优惠和折扣

2019/12/09 全球购物

怎样声明子类

2013/07/02 面试题

文秘专业应届生求职信

2014/05/26 职场文书

房地产经营管理专业自荐信

2014/09/02 职场文书

2014年医务科工作总结

2014/12/18 职场文书

道歉信范文

2015/05/12 职场文书