.nav——指定列表元素为导航组件。

.nav-tabs——指定导航组件的样式为标签页；

.nav-pills——指定导航组件的样式为胶囊式标签页；

.nav-stacked——指定标签页的样式为垂直堆叠排列；

.nav-justified——指定标签页的样式为两端对齐；

.disabled——设置导航栏组件的菜单项为禁用样式；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>组件_导航</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->

    <script src="jquery-1.11.1.min.js"></script>

    <script src="bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <p>

        <ul class="nav nav-tabs" role="tablist">

            <li role="presentation" class="active"><a href="#">首页</a></li>

            <li role="presentation"><a href="#">新闻资讯</a></li>

            <li role="presentation"><a href="#">关于我们</a></li>

        </ul>

    </p>

    <p>

        <ul class="nav nav-pills nav-justified" role="tablist">

            <li role="presentation" class="active"><a href="#">首页</a></li>

            <li role="presentation" class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                    新闻资讯

                    <span class="caret"></span>

                </a>

                <ul class="dropdown-menu" role="menu">

                    <li role="presentation"><a href="#" role="menuitem" tabindex="-1">集团要闻</a></li>

                    <li role="presentation"><a href="#" role="menuitem" tabindex="-1">行业动态</a></li>

                </ul>

            </li>

            <li role="presentation" class="disabled"><a href="#">关于我们</a></li>

        </ul>

    </p>

    <p>

        <ul class="nav nav-pills nav-stacked" role="tablist">

            <li role="presentation" class="active"><a href="#">首页</a></li>

            <li role="presentation"><a href="#">新闻资讯</a></li>

            <li role="presentation"><a href="#">关于我们</a></li>

        </ul>

    </p>

    <script>

        $(".nav a").click(function(e){

            e.preventDefault();

            $(this).tab("show");

        })

    </script>

</div>

</body>

</html>

Bootstrap组件之导航的更多相关文章

  1. bootstrap 组件之"导航条"

    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...

  2. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  3. Bootstrap 输入框和导航组件

    一．输入框组件 //在左侧添加文字 <div class="input-group"> <span class="input-group-addon&q ...

  4. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  5. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  6. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  7. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  8. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

  9. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

随机推荐

  1. 随机数问题--已知有个Random7()的函数，返回1到7随机自然数，让利用这个Random7()构造Random10()随机1~10.

    Math.random()随机生成(0,1)之间的float数,Random7随机生成[1,7]之间的整数,利用Random7构造Random10的步骤: 1.生成数a:a是两次Random7的结果, ...

  2. 洛谷——P1586 四方定理

    P1586 四方定理 题目描述 四方定理是众所周知的:任意一个正整数nn,可以分解为不超过四个整数的平方和.例如:25=1^{2}+2^{2}+2^{2}+4^{2}25=12+22+22+42,当然 ...

  3. 学习LSM(Linux security module)之一:解读yama

    最近打算写一个基于LSM的安全模块,发现国内现有的资料极少.因此打算自己琢磨一下.大致的学习路线如下: 由易至难使用并阅读两到三个安全模块->参照阅读模块自己实现一个安全模块->在自己实现 ...

  4. Linux命令之find（一）

    find [-H] [-L] [-P] [-Olevel] [-D help| tree| search| stat| rates| opt| exec] [路径] [表达式] find是查找文件的命 ...

  5. Java异常处理机制及两种异常的区别

    java异常处理机制主要依赖于try,catch,finally,throw,throws五个关键字.   try 关键字后紧跟一个花括号括起来的代码块,简称try块.同理:下面的也被称为相应的块. ...

  6. 求小于10000的素数的个数 Exercise06_10

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:求小于10000的素数的个数 * */ public class Exercise06_10 { public static ...

  7. 权限管理-RBAC

    (一)RBAC 通过用户与角色关联,角色与操作的关联实现用户与操作的关联 (二)权限细分 (三)数据库设计 (四)程序设计 (五)权限与应用程序 (1)应用URL实现程序权限控制 (2)应用code实 ...

  8. Getting terminal width in C?

    转:http://stackoverflow.com/questions/1022957/getting-terminal-width-in-c 方法一: #include <sys/ioctl ...

  9. Oracle数据库冷备份与恢复（救命稻草）

    说明,只要是同样系统,同样数据库版本,是可以做冷备恢复.冷备份数据必须是数据库不在open状态下.以oracle11gR2为例. 一.冷备份与冷恢复 具体步骤如下. 1. 复制旧的数据库文件 (1) ...

  10. [转]SVN安装问题The Apache Portable Runtime (APR) library cannot be found

    http://blog.csdn.net/ckwer2008/article/details/47972601 Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure ...