编程 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 29 Javascript

Mootools 1.2教程函数

Sep 15 Javascript

js为什么不能正确处理小数运算？

Dec 29 Javascript

如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

Feb 23 Javascript

Vuejs第九篇之组件作用域及props数据传递实例详解

Sep 05 Javascript

web前端开发upload上传头像js示例代码

Oct 22 Javascript

微信小程序page的生命周期和音频播放及监听实例详解

Apr 07 Javascript

Vue动态组件实例解析

Aug 20 Javascript

基于js中style.width与offsetWidth的区别(详解)

Nov 12 Javascript

Vue2.0子同级组件之间数据交互方法

Feb 28 Javascript

Less 安装及基本用法

May 05 Javascript

vue如何截取字符串

May 06 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 中使用随机数的三个步骤

2006/10/09 PHP

dvwa+xampp搭建显示乱码的问题及解决方案

2015/08/23 PHP

YII Framework教程之异常处理详解

2016/03/14 PHP

PHP与以太坊交互详解

2018/08/24 PHP

Yii2框架配置文件(Application属性)与调试技巧实例分析

2019/05/27 PHP

gearman管理工具GearmanManager的安装与php使用方法示例

2020/02/27 PHP

JQuery Tips(2) 关于$()包装集你不知道的

2009/12/14 Javascript

Ext 今日学习总结

2010/09/19 Javascript

将nodejs打包工具整合到鼠标右键的方法

2013/05/11 NodeJs

js 实现 input type="file" 文件上传示例代码

2013/08/07 Javascript

使用apply方法实现javascript中的对象继承

2013/12/16 Javascript

javascript常见数据验证插件大全

2015/08/03 Javascript

JS实现图片预览的两种方式

2017/06/27 Javascript

使用axios实现上传图片进度条功能

2017/12/21 Javascript

微信小程序学习总结（一）项目创建与目录结构分析

2020/06/04 Javascript

深入解读VUE中的异步渲染的实现

2020/06/19 Javascript

在vue中使用el-tab-pane v-show/v-if无效的解决

2020/08/03 Javascript

使用rst2pdf实现将sphinx生成PDF

2016/06/07 Python

Python学习之用pygal画世界地图实例

2017/12/07 Python

Python读写及备份oracle数据库操作示例

2018/05/17 Python

python+POP3实现批量下载邮件附件

2018/06/19 Python

2019 Python最新面试题及答案16道题

2019/04/11 Python

python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法

2019/06/10 Python

python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例

2019/08/27 Python

在python3中实现查找数组中最接近与某值的元素操作

2020/02/29 Python

详解Python中namedtuple的使用

2020/04/27 Python

德国EGOIST网店：销售畅销的设计师品牌

2017/04/18 全球购物

澳大利亚第一的设计师礼服租赁网站：GlamCorner

2017/08/13 全球购物

印度手工编织服装和家居用品商店：Fabindi

2019/10/07 全球购物

BIFFI美国站：意大利BIFFI BOUTIQUES豪华多品牌时装零售公司

2020/02/11 全球购物

英国最大的在线照明商店：Litecraft

2020/08/31 全球购物

个人股份合作协议书

2014/10/24 职场文书

焦点访谈观后感

2015/06/11 职场文书

2019求职信：应届生求职信范文

2019/04/24 职场文书

入团申请书格式

2019/06/20 职场文书

Python爬虫基础初探selenium

2021/05/31 Python