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

jquery validate poshytip 自定义样式

Nov 26 Javascript

js 获取计算后的样式写法及注意事项

Feb 25 Javascript

javascript:void(0)点击登录没反应怎么解决

Nov 13 Javascript

利用bootstrapValidator验证UEditor

Sep 14 Javascript

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Nov 09 Javascript

angularjs实现首页轮播图效果

Apr 14 Javascript

Three.js利用性能插件stats实现性能监听的方法

Sep 25 Javascript

浅谈用Webpack路径压缩图片上传尺寸获取的问题

Feb 22 Javascript

Vue中v-show添加表达式的问题(判断是否显示)

Mar 26 Javascript

js针对图片加载失败的处理方法分析

Aug 24 Javascript

vue中数字相加为字串转化为数值的例子

Nov 07 Javascript

Vue按时间段查询数据组件使用详解

Aug 21 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

第七节--类的静态成员

2006/11/16 PHP

使用bcompiler对PHP文件进行加密的代码

2010/08/29 PHP

通过5个php实例细致说明传值与传引用的区别

2012/08/08 PHP

详解php中 === 的使用

2016/10/24 PHP

Yii2下点击验证码的切换实例代码

2017/03/14 PHP

PHP实现微信小程序用户授权的工具类示例

2019/03/05 PHP

Laravel等框架模型关联的可用性浅析

2019/12/15 PHP

JavaScript使用prototype定义对象类型

2007/02/07 Javascript

取键盘键位ASCII码的网页

2007/07/30 Javascript

Javascript setInterval的两种调用方法(实例讲解)

2013/11/29 Javascript

JavaScript设计模式之单件模式介绍

2014/12/28 Javascript

NodeJS学习笔记之Http模块

2015/01/13 NodeJs

jQuery实现右下角可缩放大小的层完整实例

2016/06/20 Javascript

详解Angular 中 ngOnInit 和 constructor 使用场景

2017/06/22 Javascript

vue.js中引入vuex储存接口数据及调用的详细流程

2017/12/14 Javascript

微信小程序实现收货地址左滑删除

2020/11/18 Javascript

小程序跳转到的H5页面再跳转回跳小程序的方法

2020/03/06 Javascript

巧用Python装饰器免去调用父类构造函数的麻烦

2012/05/18 Python

Python实现处理管道的方法

2015/06/04 Python

Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)

2017/08/23 Python

python 生成器协程运算实例

2017/09/04 Python

python编辑用户登入界面的实现代码

2018/07/16 Python

python遍历文件夹找出文件夹后缀为py的文件方法

2018/10/21 Python

windows下兼容Python2和Python3的解决方法

2018/12/05 Python

python实现简单多人聊天室

2018/12/11 Python

python自动化测试之DDT数据驱动的实现代码

2019/07/23 Python

python3.7调试的实例方法

2020/07/21 Python

荷兰男士时尚网上商店：Suitable

2017/12/25 全球购物

法国一家多品牌成衣精品中/高档商店：Graduate Store

2019/08/28 全球购物

WSDL的操作类型主要有几种

2013/07/19 面试题

快递业务员岗位职责

2014/01/06 职场文书

军训自我鉴定200字

2014/02/13 职场文书

市级文明单位申报材料

2014/05/07 职场文书

大学新生入学教育方案

2014/05/16 职场文书

Python常遇到的错误和异常

2021/11/02 Python

python周期任务调度工具Schedule使用详解

2021/11/23 Python