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导航简单实现代码

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

Javascript 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
全站最详细的Vuex教程
Apr 13 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 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中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
YII路径的用法总结
2014/07/09 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python中的Numpy入门教程
2014/04/26 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
用Python shell简化开发
2018/08/08 Python
用python做游戏的细节详解
2019/06/25 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
Internet主要有哪些网络群组成
2015/12/24 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
Java程序员综合测试题
2014/04/25 面试题
周年庆典邀请函范文
2014/01/23 职场文书
大学生作弊检讨书
2014/09/11 职场文书
感谢信怎么写
2015/01/21 职场文书
绿色环保倡议书
2015/04/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
环保建议书作文400字
2015/09/14 职场文书