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

JS中typeof与instanceof之间的区别总结

Nov 14 Javascript

js/jquery获取文本框输入焦点的方法

Mar 04 Javascript

JavaScript访问CSS属性的几种方式介绍

Jul 21 Javascript

JS实现至少包含字母、大小写数字、字符的密码等级的两种方法

Feb 03 Javascript

javascript引用类型指针的工作方式

Apr 13 Javascript

javascript实现动态标签云

Oct 16 Javascript

简单实现bootstrap选项卡效果

Feb 08 Javascript

JavaScript中的编码和解码函数

Feb 15 Javascript

vue2实现移动端上传、预览、压缩图片解决拍照旋转问题

Apr 13 Javascript

浅谈PDF.js使用心得

Jun 07 Javascript

基于vue 实现表单中password输入的显示与隐藏功能

Jul 19 Javascript

使用Canvas绘制一个游戏人物属性图

Mar 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分页详细讲解（有实例）

2013/10/30 PHP

php警告Creating default object from empty value 问题的解决方法

2014/04/02 PHP

yii操作cookie实例简介

2014/07/09 PHP

实例介绍PHP中zip_open()函数用法

2019/02/15 PHP

javascript prototype，executing，context，closure

2008/12/24 Javascript

javascript 读取图片文件的大小

2009/06/25 Javascript

Jquery知识点一 Jquery的ready和Dom的onload的区别

2011/01/15 Javascript

web性能优化之javascript性能调优

2012/12/28 Javascript

js如何取消事件冒泡

2013/09/23 Javascript

按下Enter焦点移至下一个控件的实现js代码

2013/12/11 Javascript

javascript制作坦克大战全纪录（2）

2014/11/27 Javascript

原生JavaScript制作微博发布面板效果

2016/03/11 Javascript

如何在Linux上安装Node.js

2016/04/01 Javascript

JS中from 表单序列化提交的代码

2017/01/20 Javascript

jQuery页面弹出框实现文件上传

2017/02/09 Javascript

jquery实现弹窗功能（窗口居中显示）

2017/02/27 Javascript

node.js爬虫爬取拉勾网职位信息

2017/03/14 Javascript

bootstrap suggest下拉框使用详解

2017/04/10 Javascript

[js高手之路]原型式继承与寄生式继承详解

2017/08/28 Javascript

Vue2.0结合webuploader实现文件分片上传功能

2018/03/09 Javascript

关于AngularJS中ng-repeat不更新视图的解决方法

2018/09/30 Javascript

vue iview多张图片大图预览、缩放翻转

2019/07/13 Javascript

如何基于JS截获动态代码

2019/12/25 Javascript

js实现简单音乐播放器

2020/06/30 Javascript

从零学Python之入门（四）运算

2014/05/27 Python

在Python中操作字符串之rstrip()方法的使用

2015/05/19 Python

英国羊皮鞋类领先品牌：Just Sheepskin

2019/12/12 全球购物

用友笔试题目

2016/10/25 面试题

汇科协同Java笔试题

2012/03/31 面试题

求职自荐信范文格式

2013/11/29 职场文书

经典广告词大全

2014/03/14 职场文书

大学学生个人总结

2015/02/15 职场文书

大学生入党自荐书

2015/03/05 职场文书

2015年全民国防教育日活动总结

2015/03/23 职场文书

SpringBoot+Redis实现布隆过滤器的示例代码

2022/03/17 Java/Android

python APScheduler执行定时任务介绍

2022/04/19 Python