本章将讲解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. test markdown style

    code // Forward declaration of isBadVersion API. bool isBadVersion(int version); class Solution { pu ...

  2. Codeforces 67A【模拟】

    题意: 给一个字符串代表相邻学生的比较,L代表左边多,R表示右边多,=表示左右相等. 保证每个人拿糖>=1,在分糖最少的情况下,输出每个学生所分得的糖. 思路: 模拟一下,第一个人一开始拿1个, ...

  3. 洛谷CF895C Square Subsets（线性基）

    洛谷传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题意: 给你n个数,每个数<=70,问有多少个集合,满足集合中所有数相乘是个完全平方数(空集除外) 题解: 完全看不出这玩意儿和线性基有什 ...

  4. 转 java ClassLoader

    http://blog.csdn.net/xyang81/article/details/7292380 http://www.ibm.com/developerworks/cn/java/j-lo- ...

  5. JPA-day03 自动建表和注解

  6. E. XOR and Favorite Number （莫队板子题）

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int read() { , ...

  7. iOS开发 - 多线程实现方案之NSOperation篇

    NSOperation简介 1.实现多线程编程步骤: 配合使用NSOperation和NSOperationQueue实现多线程编程,我们不用考虑线程的生命周期.同步.加锁等问题,如下: 先将需要执行 ...

  8. java排序之冒泡排序

    代码: package com.cn.algorithm_arithmetic算法; /** * 本程序记录了经典排序算法之冒泡排序 * @author Administrator * */ publ ...

  9. ubuntu触摸板关闭开启

    sudo rmmod psmouse          #用来禁用触摸板 sudo modprobe psmouse     #用来启用触摸板

  10. 05.Javascript——入门函数

    //定义函数的方法1 function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函数的定义如下: func ...