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

showModelessDialog()使用详解

Sep 07 Javascript

javascript几个易错点记录

Nov 26 Javascript

JS制作手机端自适应缩放显示

Jun 11 Javascript

基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）

Dec 28 Javascript

jQuery实现自动调用和触发某个事件的方法

Nov 18 Javascript

为你的微信小程序体积瘦身详解

May 20 Javascript

vue-cli 引入jQuery，Bootstrap，popper的方法

Sep 03 jQuery

如何为vuex实现带参数的 getter和state.commit

Jan 04 Javascript

Layer UI表格列日期格式化及取消自动填充日期的实现方法

May 10 Javascript

vue-socket.io接收不到数据问题的解决方法

May 13 Javascript

微信小程序开发（二）：页面跳转并传参操作示例

Jun 01 Javascript

vue二选一tab栏切换新做法实现

Jan 19 Vue.js

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实现全角字符转为半角方法汇总

2015/07/09 PHP

PHP中模拟链表和链表的基本操作示例

2016/02/27 PHP

PHP基于mssql扩展远程连接MSSQL的简单实现方法

2016/10/08 PHP

PHP面向对象程序设计（OOP）之方法重写（override）操作示例

2018/12/21 PHP

Cookie 小记

2010/04/01 Javascript

IE6弹出“已终止操作”的解决办法

2010/11/27 Javascript

js常用代码段整理

2011/11/30 Javascript

关于Jquery操作Cookie取值错误的解决方法

2013/08/26 Javascript

js Math 对象的方法

2013/09/01 Javascript

谈谈对offsetleft兼容性的理解

2015/11/11 Javascript

js实现悬浮窗效果(支持拖动)

2017/03/09 Javascript

vue登录注册及token验证实现代码

2017/12/14 Javascript

Vue+webpack项目基础配置教程

2018/02/12 Javascript

Vue+webpack项目配置便于维护的目录结构教程详解

2018/10/14 Javascript

js实现全选反选不选功能代码详解

2019/04/24 Javascript

Vue实现导航栏点击当前标签变色功能

2020/08/19 Javascript

layui 表单标签的校验方法

2019/09/04 Javascript

vue路由拦截器和请求拦截器知识点总结

2019/11/08 Javascript

JS闭包原理及其使用场景解析

2020/12/03 Javascript

[10:24]郎朗助力完美“圣”典，天籁交织奏响序曲

2016/12/18 DOTA

解决Pycharm运行时找不到文件的问题

2018/10/29 Python

pandas求两个表格不相交的集合方法

2018/12/08 Python

python接口自动化测试之接口数据依赖的实现方法

2019/04/26 Python

python腾讯语音合成实现过程解析

2019/08/01 Python

python里的单引号和双引号的有什么作用

2020/06/17 Python

Keras 在fit_generator训练方式中加入图像random_crop操作

2020/07/03 Python

python 生成正态分布数据,并绘图和解析

2020/12/21 Python

纯css3实现的竖形无限级导航

2014/12/10 HTML / CSS

css3翻牌翻数字的示例代码

2020/02/07 HTML / CSS

Herve Leger官网：标志性绷带连衣裙等

2018/12/26 全球购物

务虚会发言材料

2014/12/25 职场文书

2015年扶贫帮困工作总结

2015/05/20 职场文书

合同纠纷调解书

2015/05/20 职场文书

Java并发编程之原子性-Atomic的使用

2022/03/16 Java/Android

MongoDB修改oplog大小的四种方法

2022/04/11 MongoDB

Android在Sqlite3中的应用及多线程使用数据库的建议

2022/04/24 Java/Android