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

一个加载js文件的小脚本

Jun 28 Javascript

JavaScript DOM 学习第七章表单的扩展

Feb 19 Javascript

js 使FORM表单的所有元素不可编辑的示例代码

Oct 17 Javascript

JavaScript中的闭包介绍

Mar 15 Javascript

JavaScript中解析JSON数据的三种方法

Jul 03 Javascript

JS实现黑色大气的二级导航菜单效果

Sep 18 Javascript

基于jQuery实现响应式圆形图片轮播特效

Nov 25 Javascript

15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

May 25 Javascript

微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

Nov 27 Javascript

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

Mar 28 Javascript

JavaScript 引用类型实例详解【数组、对象、严格模式等】

May 13 Javascript

UEditor 自定义图片视频尺寸校验功能的实现代码

Oct 20 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中防止SQL注入攻击和XSS攻击的两个简单方法

2010/04/15 PHP

php学习笔记数组遍历实现代码

2011/06/09 PHP

解决CodeIgniter伪静态失效

2014/06/09 PHP

PHP使用POP3读取邮箱接收邮件的示例代码

2020/07/08 PHP

JS实现黑客帝国文字下落效果

2015/09/01 Javascript

JavaScript使用DeviceOne开发实战（二）生成调试安装包

2015/12/01 Javascript

深入理解vue.js双向绑定的实现原理

2016/12/05 Javascript

js实现点击每个li节点，都弹出其文本值及修改

2016/12/15 Javascript

详解如何较好的使用js

2016/12/16 Javascript

VUE前端cookie简单操作

2017/10/17 Javascript

vue 挂载路由到头部导航的方法

2017/11/13 Javascript

JS选取DOM元素常见操作方法实例分析

2018/12/10 Javascript

JavaScript显式数据类型转换详解

2019/03/18 Javascript

前端js中的事件循环eventloop机制详解

2019/05/15 Javascript

基于vue项目设置resolves.alias: '@'路径并适配webstorm

2020/12/02 Vue.js

Python调用系统底层API播放wav文件的方法

2017/08/11 Python

Python字典数据对象拆分的简单实现方法

2017/12/05 Python

python实现百度语音识别api

2018/04/10 Python

Win10下python3.5和python2.7环境变量配置教程

2018/09/18 Python

使用python批量化音乐文件格式转换的实例

2019/01/09 Python

python实现烟花小程序

2019/01/30 Python

浅谈python中get pass用法

2019/03/19 Python

Python函数装饰器常见使用方法实例详解

2019/03/30 Python

python argparser的具体使用

2019/11/10 Python

pytorch 指定gpu训练与多gpu并行训练示例

2019/12/31 Python

python 基于DDT实现数据驱动测试

2021/02/18 Python

英国在线汽车和面包车零件商店：Car Parts 4 Less

2018/08/15 全球购物

eBay加拿大站：eBay.ca

2019/06/20 全球购物

美国孩之宝玩具官网：Hasbro Pulse

2019/06/24 全球购物

新西兰最大的天然保健及护肤品网站：HealthPost（直邮中国）

2021/02/13 全球购物

比较基础的php面试题及答案-填空题

2014/04/26 面试题

班组长岗位职责

2014/03/03 职场文书

活动总结书

2014/05/08 职场文书

环保志愿者活动方案

2014/08/14 职场文书

2014年“向国旗敬礼”网上签名寄语活动方案

2014/09/27 职场文书

法制教育主题班会

2015/08/13 职场文书