<!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. lightoj刷题日记

    提高自己的实力, 也为了证明, 开始板刷lightoj,每天题量>=1: 题目的类型会在这边说明,具体见分页博客: SUM=54; 1000 Greetings from LightOJ [简单 ...

  2. IT兄弟连 JavaWeb教程 EL表达式获取对象的属性以及数组的元素

    使用${对象名.属性名} EL表达式语言可以使用点号运算符"."来访问对象的属性,例如表达式${customer.name}表示customer对象的name属性. 使用${对象名 ...

  3. kafka 安装部署

    环境:ubuntu 12.04 64位桌面版 解压kafka -0.10.0.0.tgz -C /root/software/ 进入目录 cd kafka_2.-0.10.0.0/ 创建data 目录 ...

  4. Git - Merge: refusing to merge unrelated histories

    场景 我在本地有个代码仓库local-A,本地仓库local-A已经和一个远程仓库remote-A关联了. 接着我又在GitHub上新建了一个仓库remote-B,我希望将本地仓库local-A的本地 ...

  5. layui 单选框选中事件

    <div class="layui-form-item" pane=""> <label class="layui-form-lab ...

  6. js操作表格

    js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法 表格有几行: var trCnt = table.rows.length ...

  7. Linux之文本处理命令

    Sort 将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. -u     在输出行中去除重复行 -r      改为降序(默认升序) ...

  8. 学习中对input()的一些总结（raw_input()与input()）

  9. [未读]编写可测试的JavaScript代码

  10. Problem D. What a Beautiful Lake dp

    Problem D. What a Beautiful Lake Description Weiming Lake, also named "Un-named Lake", is ...