.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. 【推导】Codeforces Round #402 (Div. 2) A. Pupils Redistribution

    一次交换,会让Group A里面的某个数字的数量-1,另一个数字的数量+1:对Group B恰好相反. 于是答案就是xigma(i=1~5,numA[i]-numB[i]>0)(numA[i]- ...

  2. 【动态规划】【记忆化搜索】1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组

    跟CODEVS 3415没有什么区别,也不用高精度. http://www.cnblogs.com/autsky-jadek/p/4055184.html #include<cstdio> ...

  3. Bootstrap-datetimepicker日期插件简单使用

    写在前面: 日期组件有很多,这里简单的记录下bootstrap的一个日期插件datetimepicker,使用方法比较简单,基本上看一些就会了,但是还是记录下. 这个就不过多的说了,简单粗暴上代码 & ...

  4. Problem R: 求斐波那契数列的前n项值

    #include<stdio.h> int main() { int n; while(scanf("%d",&n)!=EOF){ int x1,x2,i,x; ...

  5. Delphi 7生成XML

    文件格式为: Day 制1課 U12 ASSY01 Wrist 1009 0 2018/05/18 09:35:59 Day 制1課 U12 ASSY02 Wrist 1010 0 2018/05/1 ...

  6. [OpenJudge8471][划分DP]切割回文

    切割回文 总时间限制: 1000ms 内存限制: 65536kB [描述] 阿福最近对回文串产生了非常浓厚的兴趣. 如果一个字符串从左往右看和从右往左看完全相同的话,那么就认为这个串是一个回文串.例如 ...

  7. iOS开发经验——点击屏幕空白处退出键盘

          一种比较简单的点击屏幕空白处退出键盘的方法: 在ViewController中加入如下代码: 1: -(void)touchesBegan:(NSSet *)touches withEve ...

  8. CentOS 6.9系统时间和硬件时间设置（转）

    总结一下hwclock,这个容易晕: 1)/etc/sysconfig/clock 文件,只对 hwclock 命令有效,且只在系统启动和关闭的时候才有用(修改了其中的 UTC=true 到 UTC= ...

  9. Zookeeper的功能以及工作原理（转）

    本文转自https://www.cnblogs.com/felixzh/p/5869212.html Zookeeper的功能以及工作原理   1.ZooKeeper是什么?ZooKeeper是一个分 ...

  10. Nagle算法&&延时确认

    数据流分类 成块数据 交互数据   Rlogin需要远程系统(服务器)回显我们(客户)键入的字符 数据字节和数据字节的回显都需要对方确认 rlogin 每次只发送一个字节到服务器,而Telnet 可以 ...