编程 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 hashtable实现代码

Oct 13 Javascript

javascript forEach通用循环遍历方法

Oct 11 Javascript

JavaScript 在网页上单击鼠标的地方显示层及关闭层

Dec 30 Javascript

jquery的ajax和getJson跨域获取json数据的实现方法

Feb 04 Javascript

jquery+css3打造一款ajax分页插件(自写)

Jun 18 Javascript

JavaScript点击按钮后弹出透明浮动层的方法

May 11 Javascript

jquery插件splitScren实现页面分屏切换模板特效

Jun 16 Javascript

JS未跨域操作iframe里的DOM

Jun 01 Javascript

node.js cookie-parser 中间件介绍

Jun 06 Javascript

jquery设置表单元素为不可用的简单代码

Jul 04 Javascript

React Native仿美团下拉菜单的实例代码

Aug 08 Javascript

使用webpack构建应用的方法步骤

Mar 04 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

第十三节对象串行化 [13]

2006/10/09 PHP

php导入csv文件碰到乱码问题的解决方法

2014/02/10 PHP

PHP同时连接多个mysql数据库示例代码

2014/03/17 PHP

php使用crypt()函数进行加密

2017/06/08 PHP

jquery刷新页面的实现代码（局部及全页面刷新）

2011/07/11 Javascript

jquery对单选框,多选框,文本框等常见操作小结

2014/01/08 Javascript

js 删除数组的几种方法小结

2014/02/21 Javascript

js+css实现文字散开重组动画特效代码分享

2015/08/21 Javascript

JS中Json数据的处理和解析JSON数据的方法详解

2016/06/29 Javascript

详解Angular.js指令中scope类型的几种特殊情况

2017/02/21 Javascript

基于jQuery实现Ajax验证用户名是否可用实例

2018/03/25 jQuery

vue 自定义指令自动获取文本框焦点的方法

2018/08/25 Javascript

[02:16]DOTA2英雄基础教程干扰者

2014/01/15 DOTA

[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日

2021/03/11 DOTA

Python中运行并行任务技巧

2015/02/26 Python

Python的语言类型(详解)

2017/06/24 Python

使用Python的toolz库开始函数式编程的方法

2018/11/15 Python

解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题

2019/01/15 Python

Python实现的爬取小说爬虫功能示例

2019/03/30 Python

python实现代码统计器

2019/09/19 Python

Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】

2019/10/30 Python

Python多重继承之菱形继承的实例详解

2020/02/12 Python

Python使用sqlite3模块内置数据库

2020/05/07 Python

使用Python绘制台风轨迹图的示例代码

2020/09/21 Python

Pandas中DataFrame交换列顺序的方法实现

2020/12/14 Python

python 实现IP子网计算

2021/02/18 Python

css3实现信纸/同学录效果的示例代码

2018/12/11 HTML / CSS

驴妈妈旅游网：中国新型的B2C旅游电子商务网站

2016/08/16 全球购物

澳大利亚吉他在线：Artist Guitars

2017/03/30 全球购物

Parts Express：音频、视频和扬声器的第一来源

2017/04/25 全球购物

Nanushka官网：匈牙利服装品牌

2019/08/14 全球购物

工商管理应届生求职信

2013/10/07 职场文书

感恩教育活动总结

2014/05/05 职场文书

新闻工作者先进事迹

2014/05/26 职场文书

2015年小学数学教师工作总结

2015/05/20 职场文书

海底两万里读书笔记

2015/06/26 职场文书