1. 标签页

  .nav添加.nav-tabs设计标签页,.nav-tabs 依赖 .nav 基类。

1.1 示例代码

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">个人设置</a></li>
<li><a href="#">消息中心</a></li>
</ul>

1.2 示例效果

2. 胶囊式标签页

  .nav添加.nav-pills设计胶囊式标签页

2.1 示例代码

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">个人设置</a></li>
<li><a href="#">消息中心</a></li>
</ul>

2.2 示例效果

3. 胶囊式标签页垂直排列

  在<ul class="nav nav-pills">添加.nav-stacked设计胶囊式标签页垂直排列。

3.1 示例代码

<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">个人设置</a></li>
<li><a href="#">消息中心</a></li>
</ul>

3.2 示例效果

Bootstrap3系列:导航的更多相关文章

  1. 【开源】OSharp框架解说系列(1):总体设计及系列导航

    系列文章导航 [开源]OSharp框架解说系列(1):总体设计 [开源]OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构 [开源]OSharp框架解说系列(2.2):EasyU ...

  2. linq入门系列导航

    写在前面 为什么突然想起来学学linq呢?还是源于在跟一个同事聊天的时候,说到他们正在弄得一个项目,在里面用到了linq to sql.突然想到距上次使用linq to sql是三年前的事情了.下班回 ...

  3. C#编程基础->XML系列导航

    缘由 最近开发的小程序过程中需要涉及到XML相关操作,突然发现自己对于这知识点了解的太少,急需学习加强.刚好项目的时间也不是很紧急,自己就总结XML相关知识点.一个方面自己学习,一个方面也希望可以帮到 ...

  4. 【转】Oracle系列导航目录

    .Net程序员学用Oracle系列(1):导航目录 .Net程序员学用Oracle系列(2):准备测试环境 .Net程序员学用Oracle系列(3):数据库编程规范 .Net程序员学用Oracle系列 ...

  5. MVC5 + EF6 + Bootstrap3系列教程

    本系列教程以ASP.NET MVC5为核心框架,使用Entity Framewok6访问数据,并使用Bootstrap3作为前端UI框架.帮助大家开发出一套高效.美观.稳定.实用的软件系统. MVC5 ...

  6. MvvmLight学习篇—— Mvvm Light Toolkit for wpf/silverlight系列(导航)

    系列一:看的迷迷糊糊的 一.Mvvm Light Toolkit for wpf/silverlight系列之准备工作 二.Mvvm Light Toolkit for wpf/silverlight ...

  7. Bootstrap3系列:输入框组

    1. 基本实例 通过在文本输入框 <input> 前面.后面或是两边加上文字或按钮,实现对表单控件的扩展. .input-group包含.input-group-addon给 .form- ...

  8. Bootstrap3系列:按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  9. Bootstrap3系列:按钮组

    1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...

随机推荐

  1. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  2. 【大型网站技术实践】初级篇:借助Nginx搭建反向代理服务器

    一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...

  3. PHP数据类型之间的强制转换

    1.实型数据强制转换为整型数据 $float1=2.7; $int1=(int)$float1; echo var_dump($int1),"<br>"; 输出: in ...

  4. ASP.NET Core 1.0 开发记录

    官方资料: https://github.com/dotnet/core https://docs.microsoft.com/en-us/aspnet/core https://docs.micro ...

  5. [笔记]HAproxy reload config file with uninterrupt session

    HAProxy is a high performance load balancer. It is very light-weight, and free, making it a great op ...

  6. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  7. android Notification介绍

    如果要添加一个Notification,可以按照以下几个步骤 1:获取NotificationManager: NotificationManager m_NotificationManager=(N ...

  8. Hadoop2 自己动手编译Hadoop的eclipse插件

    前言:       毕业两年了,之前的工作一直没有接触过大数据的东西,对hadoop等比较陌生,所以最近开始学习了.对于我这样第一次学的人,过程还是充满了很多疑惑和不解的,不过我采取的策略是还是先让环 ...

  9. C++的性能C#的产能?! - .Net Native 系列四:性能测试方法(PerfView)

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  10. ASP.NET Web API 控制器执行过程(一)

    ASP.NET Web API 控制器执行过程(一) 前言 前面两篇讲解了控制器的创建过程,只是从框架源码的角度去简单的了解,在控制器创建过后所执行的过程也是尤为重要的,本篇就来简单的说明一下控制器在 ...