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

正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度

Sep 27 Javascript

javascript 运算数的求值顺序

Aug 23 Javascript

JQuery 使用attr方法实现下拉列表选中

Oct 13 Javascript

JavaScript图片轮播代码分享

Jul 31 Javascript

值得分享的轻量级Bootstrap Table表格插件

May 30 Javascript

利用纯JS实现像素逐渐显示的方法示例

Aug 14 Javascript

vue中实现移动端的scroll滚动方法

Mar 03 Javascript

vue中关闭eslint的方法分析

Aug 04 Javascript

解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

Aug 30 Javascript

vue通过video.js解决m3u8视频播放格式的方法

Jul 30 Javascript

vue设置全局访问接口API地址操作

Aug 14 Javascript

JS实现公告上线滚动效果

Jan 10 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/10/09 PHP

php录入页面中动态从数据库中提取数据的实现

2006/10/09 PHP

PHP数据的提交与过滤基本操作实例详解

2016/11/11 PHP

thinkPHP分页功能实例详解

2017/05/05 PHP

javascript下操作css的float属性的特殊写法

2007/08/22 Javascript

JS 文件大小判断的实现代码

2010/04/07 Javascript

分享10篇优秀的jQuery幻灯片制作教程及应用案例

2011/04/16 Javascript

js URL参数的拼接方法比较

2012/02/15 Javascript

文字垂直滚动之javascript代码

2015/07/29 Javascript

NodeJS连接MongoDB数据库时报错的快速解决方法

2016/05/13 NodeJs

Bootstrap实现基于carousel.js框架的轮播图效果

2017/05/02 Javascript

Javascript 实现匿名递归的实例代码

2017/05/25 Javascript

VUE 3D轮播图封装实现方法

2018/07/03 Javascript

微信小程序简单的canvas裁剪图片功能详解

2019/07/12 Javascript

vue使用高德地图根据坐标定位点的实现代码

2019/08/22 Javascript

原生JS实现相邻月份日历

2020/10/13 Javascript

[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk

2017/04/03 DOTA

Python操作使用MySQL数据库的实例代码

2017/05/25 Python

python 数据的清理行为实例详解

2017/07/12 Python

Python网络爬虫与信息提取(实例讲解)

2017/08/29 Python

python 读取鼠标点击坐标的实例

2018/12/29 Python

使用matplotlib动态刷新指定曲线实例

2020/04/23 Python

python输出数学符号实例

2020/05/11 Python

html5图片上传预览示例分享

2014/04/14 HTML / CSS

yy结婚证婚词

2014/01/10 职场文书

自荐信格式简述

2014/01/25 职场文书

大学班长的职责

2014/01/27 职场文书

品质标语大全

2014/06/21 职场文书

文明班级申报材料

2014/12/24 职场文书

实习科室评语

2015/01/04 职场文书

期中考试复习计划

2015/01/19 职场文书

三傻大闹宝莱坞观后感

2015/06/03 职场文书

班主任工作总结范文

2015/08/13 职场文书

阿里云Nginx配置https实现域名访问项目(图文教程)

2021/03/31 Servers

SQL语句多表联合查询的方法示例

2022/04/18 MySQL

Java异常体系非正常停止和分类

2022/06/14 Java/Android