导航格式1:

  <ul class="nav nav-tabs">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>

效果1:

导航格式2:

  <ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>

效果2:

选项卡格式3:

  <ul class="nav nav-pills ">
<li class="active"><a href="#">中国</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">英国</a></li>
<li><a href="#">加拿大</a></li>
</ul>

效果3:

在ul 的 class 中加入 nav-stacked 效果如下:

BootStrap2学习日记15----选项卡的更多相关文章

  1. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

  2. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  3. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  4. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  5. BootStrap2学习日记22---点击展开

    先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...

  6. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

  7. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  8. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  9. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

随机推荐

  1. rhel及相关linux系统版本知识

    Rhel 此处Rhel非等同redhat哦,RedHat是红帽公司在1994年左右开发维护的linux桌面版本,在2004年左右红帽公司放弃redhat开始进军linux服务器版本开发,具体见下截图 ...

  2. 配置IIS Express 7.5以允许外部访问

    默认配置文件位于:[我的文档]\IISExpress\config\applicationhost.config修改站点地址如:<binding protocol="http" ...

  3. js实现异步循环

    @(编程) 问题 实现异步循环时,你可能会遇到问题. 让我们试着写一个异步方法,每秒打印一次循环的索引值. for(var i = 0; i < 5; i++) { setTimeout(fun ...

  4. iis 支持html执行php输出

    iis 支持html执行php输出 2012-07-25 10:50:23|  分类: PHP|举报|字号 订阅     在HTML中有个简单的的PHP随机数需要输出,例如: <td backg ...

  5. 表格对象QTableWidget相关常见方法

    QWidget bool close (self)QRect geometry (self)hide (self)int height (self)setStatusTip (self, QStrin ...

  6. HDU2819Swap(二分图最大匹配)

    题目链接  http://acm.hdu.edu.cn/showproblem.php?pid=2819 题目大意很明确,交换图的某些行或者是某些列(可以都换),使得这个N*N的图对角线上全部都是1. ...

  7. VNC 抓取远程桌面

    VNC (Virtual Network Computing)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNI ...

  8. 深入Delphi -- Windows 消息机制

    http://www.txsz.net/xs/delphi/3/Windows%20%E6%B6%88%E6%81%AF%E6%9C%BA%E5%88%B6.htm Windows 消息机制 by m ...

  9. [转]window10系统安装oracle11g时遇到INS-13001环境不满足最低要求

    window10系统安装oracle11g时遇到INS-13001环境不满足最低要求 机器安装了window10系统,之前有次安装oracle11g是成功了.但是机器后来固态硬盘坏了,又坏了个后,还是 ...

  10. registerClassAlias()函数和getClassByAlias()函数

    flash.net 包中包含包级函数,可用于打开新的浏览器窗口,向服务器发送 URL 请求以及处理类别名. registerClassAlias()函数 public function registe ...