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

Asp.net下使用Jquery Ajax传送和接收DataTable的代码

Sep 12 Javascript

自定义右键属性覆盖浏览器默认右键行为实现代码

Feb 02 Javascript

JS中用户登录系统的解决办法

Apr 15 Javascript

jQuery将所有被选中的checkbox某个属性值连接成字符串的方法

Jan 24 Javascript

html+js实现简单的计算器代码(加减乘除)

Jul 12 Javascript

又一款js时钟!transform实现时钟效果

Aug 15 Javascript

AugularJS从入门到实践(必看篇)

Jul 10 Javascript

JavaScript实现简单的双色球(实例讲解)

Jul 31 Javascript

AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

Oct 25 Javascript

基于vue-cli创建的项目的目录结构及说明介绍

Nov 23 Javascript

Vue中如何实现proxy代理

Apr 20 Javascript

JavaScript Math对象和调试程序的方法分析

May 13 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中的MYSQL常用函数(php下操作数据库必备)

2010/09/12 PHP

php安全配置如何配置使其更安全

2011/12/16 PHP

php中一个有意思的日期逻辑处理

2012/03/25 PHP

PHP的引用详解

2015/02/22 PHP

隐性调用php程序的方法

2015/06/13 PHP

Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例

2019/10/11 PHP

PHP与Web页面的交互示例详解二

2020/08/04 PHP

漂亮的widgets，支持换肤和后期开发新皮肤

2007/04/23 Javascript

一段效率很高的for循环语句使用方法

2007/08/13 Javascript

javascript 多浏览器事件大全

2010/03/23 Javascript

js操作CheckBoxList实现全选/反选(在客服端完成)

2013/02/02 Javascript

JS操作数据库的实例代码

2013/10/17 Javascript

jquery $.fn $.fx是什么意思有什么用

2013/11/04 Javascript

Event altKey,ctrlKey,shiftKey属性解析

2013/12/18 Javascript

实现js保留小数点后N位的代码

2014/11/13 Javascript

轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

2014/12/18 NodeJs

JavaScript 详解预编译原理

2017/01/22 Javascript

ES6扩展运算符的用途实例详解

2017/08/20 Javascript

对layui中表单元素的使用详解

2018/08/15 Javascript

JS中队列和双端队列实现及应用详解

2020/09/29 Javascript

python自动化测试实例解析

2014/09/28 Python

python爬取m3u8连接的视频

2018/02/28 Python

python 在某.py文件中调用其他.py内的函数的方法

2019/06/25 Python

python实现基于朴素贝叶斯的垃圾分类算法

2019/07/09 Python

python调用函数、类和文件操作简单实例总结

2019/11/29 Python

pytorch:torch.mm()和torch.matmul()的使用

2019/12/27 Python

给 TensorFlow 变量进行赋值的方式

2020/02/10 Python

python3排序的实例方法

2020/10/20 Python

北美领先的牛仔品牌：Buffalo David Bitton

2017/05/22 全球购物

WoolOvers澳洲官方网站：英国针织服装公司

2018/05/13 全球购物

《我的伯父鲁迅先生》教学反思

2014/02/12 职场文书

高中运动会入场词

2014/02/14 职场文书

继承公证书样本

2014/04/04 职场文书

个人批评与自我批评总结

2014/10/17 职场文书

学校党支部公开承诺书

2015/04/30 职场文书

如何书写民事调解协议书？

2019/06/25 职场文书