本章将讲解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. Unity3D研究院之IOS Android支持中文与本地文件的读取写

       前几天有个朋友问我为什么在IOS平台中可以正常的读写文件可是在Android平台中就无法正常的读写.当时因为在上班所以我没时间来帮他解决,晚上回家后我就拿起安卓手机真机调试很快就定位问题所在,原 ...

  2. IT兄弟连 JavaWeb教程 EL表达式中的运算

    EL语言支持算符运算符.关系运算符和逻辑运算符等,以完成常见的数据处理操作.所有的运算符说明见表7.2. 表2  El表达式中的运算符

  3. Mysql用户root密码找回

    1.本试例的环境如下: 2.mysql数据库的版本如下,此数据库运行多实例: mysql Ver 15.1 Distrib 10.2.24-MariaDB, for Linux (x86_64) us ...

  4. SpringBlade 2.0-RC3 发布，全新的微服务开发平台

    经过了十天的艰苦奋斗,SpringBlade 2.0-RC3发布了,此版本增加了很多有用的功能,距离正式版本更近一步! SpringBlade简介: SpringBlade 2.0 是一个基于 Spr ...

  5. A - Cake （+极角+凸包）

    #include<stdio.h> #include<string.h> #include<algorithm> #include<math.h> us ...

  6. [已读]JavaScript DOM编程艺术

    看到过很多人将它作为推荐入门书籍,当时我刚看完ppk和javascript精粹,于是看到这本就觉得很一般了.怎么说,它适合基础.

  7. 重新安装Magento2 Module

    如何重新安装Magento2的Module? 分类 2 类: Module是通过 composer 安装的:在命令行输入:php bin/magento module:uninstall Module ...

  8. _CrtDumpMemoryLeaks()的作用 检测内存泄漏

    _CrtDumpMemoryLeaks()的作用 2007-03-22 10:11 CrtDumpMemoryLeaks()就是显示当前的内存泄漏.      注意是“当前”,    也就是说当它执行 ...

  9. Sql 行转换为列 以及列转换为行的心得

    这是 创建数据库的脚本文件 CREATE TABLE [dbo].[stu]( [学号] [nvarchar](255) NOT NULL, [姓名] [nvarchar](255) NULL, [性 ...

  10. Android adb命令，linux中各种命令

    常用的ADB命令 1. 显示系统中全部Android平台: android list targets 2. 显示系统中全部AVD(模拟器): android list avd 3. 创建AVD(模拟器 ...