.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. (2)创建发布Maven

    一.创建maven项目 (1)命令行 mvn archetype:generate (2)选择模板默认是7 (3)输入组织号.项目名称及版本号.包名 回车确认 创建成功 二.转成idea项目 进入跟目 ...

  2. The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - M Lucky 7

    Lucky 7 Time Limit: 1 Second      Memory Limit: 65536 KB BaoBao has just found a positive integer se ...

  3. pthread条件变量

    pthread条件变量等待条件有两种方式:无条件等待pthread_cond_wait()和计时等待pthread_cond_timedwait(),其中计时等待方式如果在给定时刻前条件没有满足,则返 ...

  4. 【博弈论】【SG函数】【枚举】bzoj1874 [BeiJing2009 WinterCamp]取石子游戏

    枚举第一步可能达到的状态,判断是否是必败态即可. #include<cstdio> #include<set> #include<cstring> using na ...

  5. Exercise03_10

    import java.util.Scanner; public class SubtractionQuiz { public static void main(String[] args){ int ...

  6. C语言实现括号配对问题

    代码如下: #include<stdio.h> #include<string.h> #include<stdlib.h> // 写一个判断的括号是否匹配的函数 i ...

  7. Android Studio 下使用git -- 个人，本地版本控制

    第一步:下载安装git 下载地址 : https://git-scm.com/downloads 第二步:Android Studio 下配置git路径. 配置之后,Test弹出如下成功的提示即可. ...

  8. hadoop InputSplit

    /** * <code>InputSplit</code> represents the data to be processed by an * individual {@l ...

  9. delphi 获取USB口拔出和插入的状态

    unit USBDeviceNotify;//USB Device arrival or removeinterface uses  Windows, Messages, SysUtils, Clas ...

  10. LiDAR Textbook & Automated Road Network Extraction

    Original article published here, Posted on March 18, 2009 by lidar A positive feedback loop is begin ...