编程 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操纵Cookie实现购物车程序

Feb 15 Javascript

学习YUI.Ext 第二天

Mar 10 Javascript

JQuery扩展插件Validate 1 基本使用方法并打包下载

Sep 05 Javascript

Kibo 用于处理键盘事件的Javascript工具库

Oct 28 Javascript

js页面跳转的问题(跳转到父页面、最外层页面、本页面)

Aug 14 Javascript

js中通过split函数分割字符串成数组小例子

Sep 21 Javascript

jquery弹窗插件colorbox绑定动态生成元素的方法

Jun 20 Javascript

JS中处理时间之setUTCMinutes()方法的使用

Jun 12 Javascript

Vue学习笔记进阶篇之多元素及多组件过渡

Jul 19 Javascript

Vue+axios+WebApi+NPOI导出Excel文件实例方法

Jun 05 Javascript

解决在Vue中使用axios用form表单出现的问题

Oct 30 Javascript

微信小程序在text文本实现多种字体样式

Nov 08 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

《猛禽小队》：DC宇宙的又一超级大烂片

2020/04/09 欧美动漫

类的另类用法--数据的封装

2006/10/09 PHP

PHP读取MySQL数据代码

2008/06/05 PHP

PHP集成FCK的函数代码

2008/09/27 PHP

php中模拟POST传递数据的两种方法分享

2011/09/16 PHP

函数中使用require_once问题深入探讨优雅的配置文件定义方法推荐

2014/07/02 PHP

ThinkPHP中order()使用方法详解

2016/04/19 PHP

基于Codeigniter框架实现的student信息系统站点动态发布功能详解

2017/03/23 PHP

PHP实现的简单AES加密解密算法实例

2017/05/29 PHP

用js实现多域名不同文件的调用方法

2007/01/12 Javascript

如何阻止复制剪切和粘贴事件为了表单内容的安全

2013/05/23 Javascript

JS实现QQ图片一闪一闪的效果小例子

2013/07/31 Javascript

js去除空格的12种实用方法

2013/11/08 Javascript

jquery使用jxl插件导出excel示例

2014/04/14 Javascript

jQuery实现渐变下拉菜单的简单方法

2015/03/11 Javascript

JavaScript引用类型和基本类型详解

2016/01/06 Javascript

javascript单页面手势滑屏切换原理详解

2016/03/21 Javascript

解决node.js安装包失败的几种方法

2016/09/02 Javascript

常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)

2016/12/20 Javascript

jQuery+ajax的资源回收处理机制分析

2017/01/07 Javascript

关于vue-router的那些事儿

2018/05/23 Javascript

小程序显示弹窗时禁止下层的内容滚动实现方法

2019/03/20 Javascript

javascript实现5秒倒计时并跳转功能

2019/06/20 Javascript

Layui表格行工具事件与数据回填方法

2019/09/13 Javascript

基于vue-cli3创建libs库的实现方法

2019/12/04 Javascript

vue组件内部引入外部js文件的方法

2020/01/18 Javascript

[03:18]DOTA2放量测试专访820：希望玩家加入国服大家庭

2013/08/25 DOTA

[04:32]玩具屠夫中文语音节选

2020/08/23 DOTA

[03:12]完美世界DOTA2联赛PWL DAY7集锦

2020/11/06 DOTA

Python 常用string函数详解

2016/05/30 Python

Django框架使用mysql视图操作示例

2019/05/15 Python

python yield和Generator函数用法详解

2020/02/10 Python

Python3基本输入与输出操作实例分析

2020/02/14 Python

人力资源部经理的岗位职责

2014/03/04 职场文书

三严三实民主生活会发言稿

2014/10/13 职场文书

redis实现排行榜功能

2021/05/24 Redis