.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. AMQ学习笔记 - 04. 消息选择器

    概述 消息选择器使用类似于SQL语法,为Consumer指定基于Message属性的筛选条件. 消息选择器 发送的时候,给消息添加一些属性:在接收的时候,根据属性进行过滤. API javax.jms ...

  2. 初识.NET Core

    dotnet new console dotnet new web dotnet new webapi dotnet run dotnet build -r win-x64 dotnet publis ...

  3. 日期 function

    SELECT SYSDATE, ADD_MONTHS(SYSDATE,), ADD_MONTHS(SYSDATE,), LAST_DAY(SYSDATE), MONTHS_BETWEEN(SYSDAT ...

  4. [BZOJ5465][APIO2018]选圆圈(KD-Tree)

    题意:给你n个圆,每次选择半径最大的,将它和与它相交的圆全部删去,输出每个圆是在哪次被删的. KD树模板题.用一个矩形框住这个圆,就可以直接剪枝了.为了防止被卡可以将点旋转一个角度,为了保险还可以多转 ...

  5. Redis Exception: Exceeded timeout of 00:00:03

    Redis Exception: Exceeded timeout of 00:00:03 居然是 重启了网管, 把网络禁用重启就好了. 服 最终更新: 原来是架构湿      设置为每分钟只能读取6 ...

  6. javascript快速入门10--运算符,语句

    一元运算符 一元运算符只有一个参数,即要操作的对象或值.它们是 ECMAScript 中最简单的运算符. delete 运算符删除对以前定义的对象属性或方法的引用.例如: var obj = new ...

  7. solr6.6 导入 文本（txt/json/xml/csv）文件

    参照:solr6.6 导入 pdf文件 重点就是三个配置文件 1.建立的data-config.xml 内容如下: <dataConfig> <dataSource name=&qu ...

  8. Java笔记9：Spring简单Demo

      1 下载spring-framework-3.0.5.RELEASE-with-docs.zip和spring-framework-3.0.5.RELEASE-dependencies.zip,放 ...

  9. Yii2.0源码分析之——控制器文件分析（Controller.php）创建动作、执行动作

    在Yii中,当请求一个Url的时候,首先在application中获取request信息,然后由request通过urlManager解析出route,再在Module中根据route来创建contr ...

  10. PHP+MYSQL的搭建

    如今准备研究下微信的开发,所以要研究下PHP了,但对这个平台还是非常陌生的,所以网上找了些资料并測试,现贴出来给大家參考. 第一步:我们先下载[PHPStudy 2013]或者最新版本号: 下载地址: ...