.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. android 屏幕显示

    一.像素 android 常用单位 px.dp.sp dp和sp只与屏幕的物理尺寸有关 dp和sp的区别: sp会随着系统字体的大小而改变,通常用来设置字体大小.dp不会随系统设置的字体改变 dp和p ...

  2. (2)java安装配置

    java 分为三大类 javasSE,javaEE,javaME. javaSE:一般用于开发桌面软件,是java EE的基础类库 javaEE:用于开发网站 javaME:手机软件程序 javaSE ...

  3. inline select

  4. 【矩阵乘法】图中长度为k的路径的计数

    样例输入 4 2 0 1 1 0 0 0 1 0 0 0 0 1 1 0 0 0 样例输出 6 #include<cstdio> #include<vector> using ...

  5. [OpenJudge8462][序列DP]大盗阿福

    大盗阿福 总时间限制: 1000ms 内存限制: 65536kB [描述] 阿福是一名经验丰富的大盗.趁着月黑风高,阿福打算今晚洗劫一条街上的店铺. 这条街上一共有 N 家店铺,每家店中都有一些现金. ...

  6. 洛谷 P2066 机器分配

     题目背景 Background 无  题目描述 Description 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能 ...

  7. Nginx用为缓存服务器

    Nginx 缓存组成 共享内存 数据定位 存储键和缓存对象的元数据 磁盘空间: 存储数据   nginx做为反向代理时,能够将来自upstream的响应缓存至本地,并在后续的客户端请求同样内容时直接从 ...

  8. XSS-Proxy之技术总结

    今天看了大风的文章,关于Cross Iframe Trick的思路.让我想到了曾经看到的关于XSS Proxy的一些文章. Advanced Cross-Site-Scripting with Rea ...

  9. Flask+uwsgi+Nginx环境搭建

    开源软件准备需要的软件列表:setuptools-33.1.1.zipPython-2.7.13.tgzpip-9.0.1.tar.gznginx-1.10.3.tar.gz软件统一上传到/usr/l ...

  10. Yii添加验证码

    添加带验证码的登陆: 1.先在模型modules下的LoginForm.php定义一个存储验证码的变量:public $verfyCode: 2.然后在rules()方法里定义:array('veri ...