编程 Javascript

Bootstrap导航简单实现代码

Posted in Javascript onMarch 06, 2017

Bootstrap导航的具体实现代码，供大家参考，具体内容如下

<html>
<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>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<style>
div{
 border:1px solid #cccccc;

}
</style>
</head>
<body>
<div>
<!-- 标签式 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >home</a><li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >profile</a><li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
<!-- 胶囊式 -->
<ul class="nav nav-pills">
 <li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
 <li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
<!-- 垂直胶囊式 -->
<ul class="nav nav-pills nav-stacked">
 <li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
 <li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

效果图：

Bootstrap导航简单实现代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap导航简单实现代码

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript实现点击链接弹出"图片另存为"而不是直接打开

Aug 15 Javascript

Javascript 圆角div的实现代码

Oct 15 Javascript

JQuery实现的在新窗口打开链接的方法小结

Apr 22 Javascript

jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even)

May 24 Javascript

让html页面不缓存js的实现方法

Oct 31 Javascript

老司机带你解读jQuery插件开发流程

May 16 Javascript

Augularjs-起步详解

Jul 08 Javascript

前端程序员必须知道的高性能Javascript知识

Aug 24 Javascript

jquery中用函数来设置css样式

Dec 22 Javascript

详解Html a标签中href和onclick用法、区别、优先级别

Jan 16 Javascript

vue 实现移动端键盘搜索事件监听

Nov 06 Javascript

Vuex的API文档说明详解

Feb 05 Javascript

Bootstrap栅格系统简单实现代码

Mar 06 #Javascript

javascript DOM的详解及实例代码

Mar 06 #Javascript

vue + socket.io实现一个简易聊天室示例代码

Mar 06 #Javascript

EasyUI为Numberbox添加blur事件的方法

Mar 05 #Javascript

Web开发中客户端的跳转与服务器端的跳转的区别

Mar 05 #Javascript

js获取元素下的第一级子元素的方法(推荐)

Mar 05 #Javascript

Bootstrap模态框案例解析

Mar 05 #Javascript

You might like

PHP中用hash实现的数组

2011/07/17 PHP

PHP中PDO的错误处理

2011/09/04 PHP

PHP简单实现数字分页功能示例

2016/08/24 PHP

超强多功能php绿色集成环境详解

2017/01/25 PHP

javascript定时变换图片实例代码

2013/03/17 Javascript

html文件中jquery与velocity变量中的$冲突的解决方法

2013/11/01 Javascript

jquery控制显示服务器生成的图片流

2015/08/04 Javascript

js实现类似MSN提示的页面效果代码分享

2015/08/24 Javascript

nodejs6下使用koa2框架实例

2017/05/18 NodeJs

BootStrap selectpicker后台动态绑定数据的方法

2017/07/28 Javascript

JS返回顶部实例代码

2020/08/09 Javascript

你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

2019/04/15 Javascript

在layui中select更改后生效的方法

2019/09/05 Javascript

Vue extend的基本用法(实例详解)

2019/12/09 Javascript

python算法演练_One Rule 算法(详解)

2017/05/17 Python

Pycharm技巧之代码跳转该如何回退

2017/07/16 Python

windows环境下tensorflow安装过程详解

2018/03/30 Python

python中plot实现即时数据动态显示方法

2018/06/22 Python

浅谈Python反射 & 单例模式

2019/03/21 Python

python正则表达式匹配不包含某几个字符的字符串方法

2019/07/23 Python

tensorflow 实现从checkpoint中获取graph信息

2020/02/10 Python

通过实例解析Python RPC实现原理及方法

2020/07/07 Python

游戏商店：Eneba

2020/04/25 全球购物

Java基础知识面试要点

2016/07/29 面试题

培训专员岗位职责

2014/02/26 职场文书

会计岗位职责模板

2014/03/12 职场文书

护士感人事迹

2014/05/01 职场文书

电力培训心得体会

2014/09/02 职场文书

2014年社区民政工作总结

2014/12/02 职场文书

2014年人事行政工作总结

2014/12/03 职场文书

幼儿园开学通知

2015/04/24 职场文书

幼儿园教师读书笔记

2015/06/29 职场文书

2016年党建工作简报

2015/11/26 职场文书

Python中zipfile压缩包模块的使用

2021/05/14 Python

pytorch锁死在dataloader(训练时卡死)

2021/05/28 Python

微软Win11什么功能最惊艳? Windows11新功能特性汇总

2021/11/21 数码科技