本章将讲解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. Linux系统查看网站访问日志

    日志地址 /www/wwwlogs/网站名称-access_log 下载到本地,改成txt文件 打开WPS,创建表格,导入数据,选择文件,然后点击下一步,直到选择文件类型时,选择分隔符号,下一步,把勾 ...

  2. unity调android ios 浏览器 uniwebview2.1使用

    uniwebview2.1使用 插件下载地址: http://download.csdn.net/detail/onafioo/9576200 示例 public class BrowserMgr { ...

  3. 正向渲染路径细节 Forward Rendering Path Details

    http://www.ceeger.com/Components/RenderTech-ForwardRendering.html This page describes details of For ...

  4. [Xcode 实际操作]一、博主领进门-(9)Xcode左侧的项目导航区界面介绍

    目录:[Swift]Xcode实际操作 本文将演示Xcode的左侧操作界面. 项目的目录结构: 应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面定义了如程序 ...

  5. LeetCode.905-按奇偶排序数组(Sort Array By Parity)

    这是悦乐书的第347次更新,第371篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第212题(顺位题号是905).给定一个非负整数数组A,返回一个由A的所有偶数元素组成的 ...

  6. Python爬虫|爬取喜马拉雅音频

    "GOOD Python爬虫|爬取喜马拉雅音频 喜马拉雅是知名的专业的音频分享平台,用户规模突破4.8亿,汇集了有声小说,有声读物,儿童睡前故事,相声小品等数亿条音频,成为国内发展最快.规模 ...

  7. Linq 知识总结

    一.说明: LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相 ...

  8. 解决web项目无法部署到eclipse配置的本地tomcat

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  9. 利用HttpClient4访问网页

    一.HttpClient介绍 虽然在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能,但是它没有提供足够的灵活性和其他应用程序需要的功能.HttpClient 是 Apac ...

  10. springmvc整合elasticsearch

    网上大多时关于springboot整合的,也有spring的,但是 坑太多,都没法愉快的玩耍 这篇让我整合成功 https://www.cnblogs.com/sunny1009/articles/7 ...