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

jQuery实现长文字部分显示代码

May 13 Javascript

javascript动态添加、修改、删除对象的属性与方法详解

Jan 27 Javascript

JS实现带鼠标效果的头像及文章列表代码

Sep 27 Javascript

基于Jquery实现仿百度百科右侧导航代码附源码下载

Nov 27 Javascript

Bootstrap教程JS插件弹出框学习笔记分享

May 17 Javascript

AngularJS入门教程之AngularJS 模板

Aug 18 Javascript

微信小程序五星评分(包括半颗星评分)实例代码

Dec 14 Javascript

js canvas实现适用于移动端的百分比仪表盘dashboard

Jul 18 Javascript

浅谈webpack下的AOP式无侵入注入

Nov 12 Javascript

element-ui的回调函数Events的用法详解

Oct 16 Javascript

微信小程序自定义多列选择器使用详解

Jun 21 Javascript

Nuxt v-bind绑定img src不显示的解决

Dec 05 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实现UTF-8文件BOM自动检测与移除实例

2014/11/05 PHP

PHP时间和日期函数详解

2015/05/08 PHP

thinkphp autoload 命名空间自定义 namespace

2015/07/17 PHP

php生成高清缩略图实例详解

2015/12/07 PHP

Apache PHP MySql安装配置图文教程

2016/08/27 PHP

php实现微信企业付款到个人零钱功能

2018/10/09 PHP

Yii2处理密码加密及验证的方法

2019/05/12 PHP

解析JavaScript中的标签语句

2013/06/19 Javascript

javascript中checkbox使用方法简单实例演示

2015/11/17 Javascript

Bootstrap table分页问题汇总

2016/05/30 Javascript

浅谈js图片前端预览之filereader和window.URL.createObjectURL

2016/06/30 Javascript

购物车前端开发（jQuery和bootstrap3）

2016/08/27 Javascript

setTimeout函数的神奇使用

2017/02/26 Javascript

Node.js+jade抓取博客所有文章生成静态html文件的实例

2017/09/19 Javascript

详解Vue.js项目API、Router配置拆分实践

2018/03/16 Javascript

简单了解vue中的v-if和v-show的区别

2019/10/08 Javascript

JavaScript setInterval()与setTimeout()计时器

2019/12/27 Javascript

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

2021/02/23 Vue.js

vue3.0 项目搭建和使用流程

2021/03/04 Vue.js

[00:14]PWL：老朋友Mushi拍VLOG与中国玩家问好

2020/11/04 DOTA

python计数排序和基数排序算法实例

2014/04/25 Python

Python中用memcached来减少数据库查询次数的教程

2015/04/07 Python

Python中关于字符串对象的一些基础知识

2015/04/08 Python

Python中的多重装饰器

2015/04/11 Python

梯度下降法介绍及利用Python实现的方法示例

2017/07/12 Python

Python递归函数二分查找算法实现解析

2019/08/12 Python

完美解决Django2.0中models下的ForeignKey()问题

2020/05/19 Python

python 利用toapi库自动生成api

2020/10/19 Python

python 实现超级玛丽游戏

2020/11/25 Python

学生就业推荐信

2013/11/13 职场文书

通信研究生自荐信

2014/02/01 职场文书

标准大学生职业生涯规划书写作指南

2014/09/18 职场文书

小学班主任事迹材料

2014/12/17 职场文书

小学国庆节活动总结

2015/03/23 职场文书

《确定位置》教学反思

2016/02/18 职场文书

图解上海144收音机

2021/04/22 无线电