编程 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 Date自定义函数延迟脚本执行

Mar 10 Javascript

js中如何把字符串转化为对象、数组示例代码

Jul 17 Javascript

jquery带翻页动画的电子杂志代码分享

Aug 21 Javascript

浅谈JavaScript 数据属性和访问器属性

Sep 01 Javascript

javascript 正则表达式去空行方法

Jan 24 Javascript

基于Bootstrap表单验证功能

Nov 17 Javascript

详解如何在React组件“外”使用父组件的Props

Jan 12 Javascript

微信小程序实现日历功能

Nov 27 Javascript

js中位运算的运用实例分析

Dec 11 Javascript

vue element动态渲染、移除表单并添加验证的实现

Jan 16 Javascript

Vue实现购物车详情页面的方法

Aug 20 Javascript

js观察者模式的弹幕案例

Nov 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

Windows下安装Memcached的步骤说明

2010/04/25 PHP

PHP图形操作之Jpgraph学习笔记

2015/12/25 PHP

php上传图片生成缩略图（GD库）

2016/01/06 PHP

JQuery 实现的页面滚动时浮动窗口控件

2009/07/10 Javascript

javascript 实现秒杀,团购倒计时展示的记录分享

2013/07/12 Javascript

js点击出现悬浮窗效果不使用JQuery插件

2014/01/20 Javascript

js实现上传图片预览的方法

2015/02/09 Javascript

javascript结合Canvas 实现简易的圆形时钟

2015/03/11 Javascript

jQuery实现精美的多级下拉菜单特效

2015/03/14 Javascript

JavaScript中数组去除重复的三种方法

2016/04/22 Javascript

JS实现点击事件统计的简单实例

2016/07/10 Javascript

JS实现的加减乘除四则运算计算器示例

2017/08/09 Javascript

jQuery响应滚动条事件功能示例

2017/10/14 jQuery

讲解vue-router之命名路由和命名视图

2018/05/28 Javascript

vue2 设置router-view默认路径的实例

2018/09/20 Javascript

JavaScript函数式编程(Functional Programming)纯函数用法分析

2019/05/22 Javascript

three.js利用gpu选取物体并计算交点位置的方法示例

2019/11/25 Javascript

python实现批量获取指定文件夹下的所有文件的厂商信息

2014/09/28 Python

Python3安装Pymongo详细步骤

2017/05/26 Python

Python 加密的实例详解

2017/10/09 Python

python实现音乐下载器

2018/04/15 Python

Python批量发送post请求的实现代码

2018/05/05 Python

详解Python进阶之切片的误区与高级用法

2018/12/24 Python

pytorch cuda上tensor的定义以及减少cpu的操作详解

2020/06/23 Python

idea2020手动安装python插件的实现方法

2020/07/17 Python

美国汽车交易网站：Edmunds

2016/08/17 全球购物

老板电器官方购物商城：老板油烟机、燃气灶、消毒柜、电烤箱

2018/05/30 全球购物

什么是Smart Navigation？

2016/07/03 面试题

会计职业生涯规划范文

2014/01/04 职场文书

我的中国心演讲稿

2014/09/04 职场文书

2016入党积极分子党课学习心得体会

2015/10/09 职场文书

《卖火柴的小女孩》教学反思

2016/02/19 职场文书

python实现简单石头剪刀布游戏

2021/10/24 Python

Go语言基础函数基本用法及示例详解

2021/11/17 Golang

vue自定义右键菜单之全局实现

2022/04/09 Vue.js

centos7安装mysql5.7经验记录

2022/05/02 Servers