本章将讲解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. JSP技术概念

  2. time库的使用

    首先只需要 import time (典型的,标准的python库的使用方法) 主要包括三类函数 ——时间获取:time() , ctime() , gmtime() ——时间格式化: strftim ...

  3. Git - Merge: refusing to merge unrelated histories

    场景 我在本地有个代码仓库local-A,本地仓库local-A已经和一个远程仓库remote-A关联了. 接着我又在GitHub上新建了一个仓库remote-B,我希望将本地仓库local-A的本地 ...

  4. Python-4-设置字符串的格式字符串

    字符串是不可变的,所有元素赋值和切片赋值都是非法的   1.替换字段名 可以按顺序和名称匹配 >>> "{foo} {} {bar} {}".format(1, ...

  5. 执行脚本 提示 command not found

    问题现象: 初学shell,写了个脚本, 1.从windows 写好 脚本,然后部署到 linux 上. 2.chmod +x之后执行提示command not found,系统环境redhat9,用 ...

  6. 转 如何快速清理 chrom 缓存

    谷歌浏览器(Chrome)如何手动清除缓存 听语音 | 浏览:13267 | 更新:2014-05-15 01:00 | 标签:谷歌 chrome 浏览器的缓存可以帮助我们更好地使用一些程序,但时间长 ...

  7. 关于yii2自带验证码功能不显示问题

    1,验证码不显示: 首先保证你的controler 里面的captcha方法是可访问的,被分配的权限的,这个在rule里面设置. 第二,保证你的PHP GD插件已经被启用, 第三如果这样还是不显示,那 ...

  8. ACM学习大纲（转）

    1 推荐题库 •http://ace.delos.com/usaco/ 美国的OI 题库,如果是刚入门的新手,可以尝试先把它刷通,能够学到几乎全部的基础算法极其优化,全部的题解及标程还有题目翻译可以b ...

  9. zTree树插件动态加载

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...

  10. Java环境安装与Eclipse安装

    1.jdk下载安装 2.Eclipse下载安装 遇到的问题: 出现问题原因可能有两个:1)没有配置环境变量 2)jdk和eclipse安装的版本不一致,都是64位或者都是32位. 本人出现错误的原因: ...