编程 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冒泡事件的快速解决方法

Dec 16 Javascript

node.js中的fs.writeFileSync方法使用说明

Dec 14 Javascript

简介JavaScript中toUpperCase()方法的使用

Jun 06 Javascript

jQuery的Scrollify插件实现滑动到页面下一节点

Jul 05 Javascript

javascript学习总结之js使用技巧

Sep 02 Javascript

JS实现可关闭的对联广告效果代码

Sep 14 Javascript

ES6的新特性概览

Mar 10 Javascript

Javascript json object 与string 相互转换的简单实现

Sep 27 Javascript

angular2倒计时组件使用详解

Jan 12 Javascript

详解JS获取HTML DOM元素的8种方法

Jun 17 Javascript

详解jQuery中的prop()使用方法

Jan 05 jQuery

JS中==、===你分清楚了吗

Mar 04 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 伪造本地文件包含漏洞的代码

2011/11/03 PHP

php调用dll的实例操作动画与代码分享

2012/08/14 PHP

PHP+Mysql树型结构（无限分类）数据库设计的2种方式实例

2014/07/15 PHP

JQuery 绑定事件时传递参数的实现方法

2009/10/13 Javascript

jquery trim() 功能源代码

2011/02/14 Javascript

Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

2016/06/12 Javascript

jQuery回到顶部的代码

2016/07/09 Javascript

jquery之别踩白块游戏的简单实现

2016/07/25 Javascript

老生常谈JavaScript 正则表达式语法

2016/08/20 Javascript

jQuery实现弹出带遮罩层的居中浮动窗口效果

2016/09/12 Javascript

JS闭包与延迟求值用法示例

2016/12/22 Javascript

性能优化之代码优化页面加载速度

2017/03/01 Javascript

完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

2017/04/25 Javascript

JS实现静态页面搜索并高亮显示功能完整示例

2017/09/19 Javascript

Vue表情输入组件微信face表情组件

2019/02/11 Javascript

vue+element-ui JYAdmin后台管理系统模板解析

2020/07/28 Javascript

解决vue请求接口第一次成功,第二次失败问题

2020/09/08 Javascript

vue打开其他项目页面并传入数据详解

2020/11/25 Vue.js

[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26

2018/08/30 DOTA

Python闭包执行时值的传递方式实例分析

2018/06/04 Python

Python-接口开发入门解析

2019/08/01 Python

python求一个字符串的所有排列的实现方法

2020/02/04 Python

python可视化text()函数使用详解

2020/02/11 Python

python实现密码强度校验

2020/03/18 Python

pytorch cuda上tensor的定义以及减少cpu的操作详解

2020/06/23 Python

固特异美国在线轮胎店：Goodyear Tire

2019/02/23 全球购物

基于Python 函数和方法的区别说明

2021/03/24 Python

优秀毕业生推荐信

2013/11/02 职场文书

房地产员工找工作的自我评价

2013/11/15 职场文书

项目合作意向书范本

2014/04/01 职场文书

暑期学习心得体会

2014/09/02 职场文书

同学聚会邀请函

2015/01/30 职场文书

司法廉洁教育心得体会

2016/01/20 职场文书

导游词之无锡华莱坞

2019/12/02 职场文书

实习员工转正的评语汇总，以备不时之需

2019/12/17 职场文书

go select编译期的优化处理逻辑使用场景分析

2021/06/28 Golang