<!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. ThinkPHP3.2.3学习笔记5---模板(一)

    一.模板简介 此文中的学习笔记部分资料是来自于thinkphp官方文档,http://document.thinkphp.cn/manual_3_2.html#template 本章的内容主要讲述了如 ...

  2. [Xcode 实际操作]二、视图与手势-(8)UIView视图的纹理填充

    目录:[Swift]Xcode实际操作 本文将演示将导入的图片作为纹理,平铺整个屏幕. 往项目中导入一张图片. 点击底部左下角的图标->[Import]->选择需要导入的图片->[O ...

  3. Aufree/trip-to-iOS

    https://github.com/Aufree/trip-to-iOS?utm_source=next.36kr.com  

  4. 要单独拿出来讲的a标签

    a标签的属性 href属性赐予a标签力量:href属性指定要通过a标签借助浏览器请求的资源,可以是图片.视屏.网站.音频等.不加herf属性的a标签就是一个没有任何特殊样式和功能的文本容器. targ ...

  5. PJzhang:最基本的正则表达式实例

    猫宁!!! 参考链接: https://www.cnblogs.com/fozero/p/7868687.html http://tool.oschina.net/regex/# http://too ...

  6. 【IDEA】关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ，启动服务，访问不到解决方案

    问题描述: 新建的 maven 的 Module 项目,webapp 文件夹也是在创建完项目后手动添加的,出现了 webapp 文件夹不能被识别的情况. 解决方案: 第一步:  选中项目按 F4 键, ...

  7. 远程kafka通信实例，各种bug解决----虚拟机+本地电脑

    为了实现远程kafka通信,我可谓是呕心沥血.期间各种bug各种调,太煎熬了 (T.T) 介绍: 我用一台虚拟机作为远程消息的发送方,用本地电脑主机作为消息的接收方 虚拟机:安装java,kafka, ...

  8. nutz 使用beetl

    src目录或src同级的其他目录(比如conf)下创建 beetl.properties文件,文件内容如下 (maven项目)在resources目录下创建 RESOURCE_LOADER=org.b ...

  9. python快排

    代码: def partition(data,left,right): tmp = data[left] while left<right: while left < right and ...

  10. Caffe实战五（Caffe可视化方法：编译matlab接口）

    接上一篇文章,这里给出配置caffe后编译matlab接口的方法.(参考:<深度学习 21天实战Caffe 第16天 Caffe可视化方法>) 1.将Matlab目录更新至Caffe的Ma ...