<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>bootstrap历练实例： 垂直胶囊式的导航菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap历练实例： 垂直胶囊式的导航菜单的更多相关文章

  1. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  2. bootstrap历练实例： 基本胶囊式的导航菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  5. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  6. Bootstrap历练实例：响应式标签页

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：响应式布局

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

随机推荐

  1. jzoj5983. 【北大2019冬令营模拟2019.1.1】多边形 （组合数学）

    这其实是道打表题--你看我代码就知道了-- 咳咳来点严谨证明好了-- 前方高能请注意 首先,正多边形近似于圆,可以看做在圆里内接多边形.圆内接多边形最多只有三个锐角.因为凸多边形的外角和为\(360\ ...

  2. [Xcode 实际操作]九、实用进阶-(3)给代码方法添加宏注释

    目录:[Swift]Xcode实际操作 本文将演示如何在方法列表中,对方法名称进行注释. 这样可以使程序,按功能分块,使方法清晰.易读并且方便定位. 在项目导航区,打开视图控制器的代码文件[ViewC ...

  3. perl 处理特殊字符

    如果大家想使用perl 来处理一些特殊字符,例如"del"这种字符,就需要使用到chr() 函数了 例如大家如果向一个文本中写入以下内容 aaaa0x1270x1bccccc 这时 ...

  4. 01 | VIM基础攻略

    启动 vim 后,vim 处于 normal 模式. Step One: "i" -> insert 模式, ESC -> normal 模式: "x&quo ...

  5. bzoj1145[CTSC2008]图腾

    传送门 虽然是远古时期的ctsc,但是果然还是ctsc啊 前置芝士:树状数组 这个题最开始的思路很好想,由于之前写过一个类似处理的题,所以这个题我一开始就想到了思路. 首先,我们可以尝试讲图腾表示为x ...

  6. 百度网盘不限速！VIP视频免费看！这两款插件被无数人安利！

    今天给给位推荐两款,我一直在使用的浏览器插件,简直爆炸!全网VIP视频随意看,所有网页上的视频,你想要的全部都能下载! 这两款插件堪称日常必备插件,只要你使用浏览器,就一定需要下面这些插件功能:快速下 ...

  7. 当前View的坐标相对其他View的位置坐标

    // 将rect由rect所在视图转换到目标视图view中,返回在目标视图view中的rect - (CGRect)convertRect:(CGRect)rect toView:(UIView *) ...

  8. centos 7 安装pip和pip3

    首先安装epel扩展源: yum -y install epel-release 更新完成之后,就可安装pip: yum -y install python-pip 安装完成之后清除cache: yu ...

  9. game 竞赛图 缩环

    [问题背景] zhx 和他的妹子(们)做游戏. [问题描述] 考虑 N 个人玩一个游戏, 任意两个人之间进行一场游戏 (共 N*(N-)/ 场) , 且每场一定能分出胜负. 现在,你需要在其中找到三个 ...

  10. android开发学习 ------- debug 和 release版本执行结果不同

    在debug上测试成功的,release上测试不成功,就想着怎么将 release 版本进行调试一下.还好 Android Studio 3.0是可以进行调试apk的 可以显示log,自己看自己的逻辑 ...