编程 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查看对象功能代码

Apr 25 Javascript

JavaScript栏目列表隐藏/显示简单实现

Apr 03 Javascript

JavaScript 中的日期和时间及表示标准介绍

Aug 21 Javascript

JavaScript获取当前页面上的指定对象示例代码

Feb 28 Javascript

jquery 实现返回顶部功能

Nov 17 Javascript

jQuery实现按钮的点击全选/反选单选框/复选框文本框表单验证

Jun 25 Javascript

微信小程序免费SSL证书https、TLS版本问题的解决办法

Dec 14 Javascript

原生javascript上传图片带进度条【实例分享】

Apr 06 Javascript

微信小程序商品详情页规格属性选择示例代码

Oct 30 Javascript

详解如何用babel转换es6的class语法

Apr 03 Javascript

VsCode与Node.js知识点详解

Sep 05 Javascript

Vue Element校验validate的实例

Sep 21 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 可阅读随机字符串代码

2010/05/26 PHP

php自动识别文件编码并转换为UTF-8的方法

2014/06/12 PHP

FileUpload上传图片(图片不变形)

2010/08/05 Javascript

Javascript让DEDECMS告别手写Tag

2014/09/01 Javascript

jQuery绑定事件on()与弹窗的简要概述

2016/04/27 Javascript

js小数计算小数点后显示多位小数的实现方法

2016/05/30 Javascript

深入理解jQuery之事件移除

2016/06/02 Javascript

基于JavaScript实现右键菜单和拖拽功能

2016/11/28 Javascript

Bootstrap CSS组件之按钮组(btn-group)

2016/12/17 Javascript

微信小程序出现47001 data format error原因解决办法

2017/03/10 Javascript

使用原生js写ajax实例(推荐)

2017/05/31 Javascript

JS实现websocket长轮询实时消息提示的效果

2017/10/10 Javascript

vue axios 简单封装以及思考

2018/10/09 Javascript

vue19 组建 Vue.extend component、组件模版、动态组件的实例代码

2019/04/04 Javascript

详解Vue.js中引入图片路径的几种方式

2019/06/17 Javascript

JS实现滚动条触底加载更多

2019/09/19 Javascript

vue中使用[provide/inject]实现页面reload的方法

2019/09/30 Javascript

JS document文档的简单操作完整示例

2020/01/13 Javascript

js瀑布流布局的实现

2020/06/28 Javascript

解决vuex数据页面刷新后初始化操作

2020/07/26 Javascript

[15:35]教你分分钟做大人：天怒法师

2014/10/30 DOTA

python解析html开发库pyquery使用方法

2014/02/07 Python

Python函数式编程指南（一）：函数式编程概述

2015/06/24 Python

约瑟夫问题的Python和C++求解方法

2015/08/20 Python

python 读写txt文件 json文件的实现方法

2016/10/22 Python

详解Python 函数如何重载？

2019/04/23 Python

python 字符串常用方法汇总详解

2019/09/16 Python

tensorflow 固定部分参数训练,只训练部分参数的实例

2020/01/20 Python

最新远光软件笔试题面试题内容

2013/11/08 面试题

实习自我鉴定范文

2013/10/30 职场文书

车辆安全检查制度

2014/01/12 职场文书

关于青春的演讲稿800字

2014/08/22 职场文书

餐厅营销的秘密：为什么老顾客会流水？

2019/08/08 职场文书

apache基于端口创建虚拟主机的示例

2021/04/22 Servers

mysql事务隔离级别详情

2021/10/24 MySQL

uni-app 微信小程序授权登录的实现步骤

2022/02/18 Javascript