本章将讲解bootstrap提供的用于定义导航元素的一些选项，它使用相同的标签和基类.nav。Bootsrtap也提供了一个用于共享标记和状态的帮助器类。改变修饰的class,可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单

1、以一个带有class.nav类无序列表开始。

2、添加class.nav-tabs类。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>bootstrap历练实例：标签式的导航菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap历练实例：标签式的导航菜单的更多相关文章

  1. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. bootstrap历练实例： 垂直胶囊式的导航菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. bootstrap历练实例： 基本胶囊式的导航菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  6. Bootstrap历练实例：标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：导航内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  9. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. HDU2819【二分匹配与矩阵的秩】

    题意: 给出一个矩阵问能否实现对角线全部是1,能的话输出路径,不能的话输出-1 思路: 首先根据矩阵的性质,这一定是一个满秩矩阵,所以只根据行或列交换就一定能实现. 所以行和列构成二分图,然后跑一发匈 ...

  2. 安装MySQL出现1045错误

    安装MySQL出现1045错误 一.运行环境 MySQL mysql-5.1.26-rc-win32 操作系统:Windows 7 X64 二.问题描述 安装MySQL过程中会涉及对root密码的设置 ...

  3. bzoj3453: tyvj 1858 XLkxc（拉格朗日插值）

    传送门 \(f(n)=\sum_{i=1}^ni^k\),这是自然数幂次和,是一个以\(n\)为自变量的\(k+1\)次多项式 \(g(n)=\sum_{i=1}^nf(i)\),因为这东西差分之后是 ...

  4. JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）

    需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...

  5. Android Activity生命周期（转）

    转自 http://blog.csdn.net/android_tutor/article/details/5772285

  6. iOS 利用模态视图实现带黑色蒙版的底部弹窗

    本demo仅适用于iOS8及以上系统. 本文将使用autolayout+storyboard来实现弹窗 第一步.storyboard创建界面 1.打开storyboard 拖一个UIViewcontr ...

  7. vs 对网站和项目使用IIS Express 的64位版

  8. Jquery | 基础 | 项目实践

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Map集合的四种常用遍历方式整理

    1.Map集合简介:map集合是一个key—value型的数据结构,存储的数据具有查询速度快速的特点,但由于是无序的,所以没有顺序可言.在遍历时没有办法像简单的list或数组一样. 2.代码: pac ...

  10. 在开发中经常会有多级跳转 viewcontroller的问题，然后有时不一定要一级一级的返回,可能直接返回到某个根视图控制器或某个指定的控制器.

    其中采用navigationController pushViewController 的方法,比如我从主页面跳转到了4级页面,又从4级页面跳转到了2级页面,然后从2级页面跳转到了4级页面然后在重4级 ...