导航格式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. 如何调试最新的asp.net mvc源码

    vs2013调试 一.源码当前为5.2.0.0,按下面改为5.0.0.1 二./web.config 版本为5.0.0.0 改为5.0.0.1 三.vs2013 x86 本机工具命令提示 sn.exe ...

  2. 第二百一十一天 how can i 坚持

    参与感.做项目要有激情. 睡觉.

  3. 游戏被App Store下架 如何快速上线?

    游戏被App Store下架 如何快速上线? 发布者: sea_bug | 发布时间: 2014-12-20 14:17| 评论数: 0 近日,有媒体报道出国内某家CP的产品被苹果从App Store ...

  4. 使用aspose.word两句代码将word转换为pdf

    //Load Document Document document = new Document(@"C:\Users\Administrator\Desktop\人事---新员工转正总结( ...

  5. php中定义类

    <?php class Person{ //定义了一个Person类 public $name; //定义属性name public $age; //定义属性age function __con ...

  6. 最小生成树之Prime法

    关于最小生成树的概念,在前一篇文章中已经讲到,就不在赘述了.下面介绍Prime算法:         其基本思想为:从一个顶点出发,选择由该顶点出发的最小权值边,并将该边的另一个顶点包含进来,然后找出 ...

  7. oracle 学习笔记--用户管理

    oracle 用户管理 创建用户(需要具有dba权限的用户) create user 用户名 identified by 密码 defaule tablespace users     //默认表空间 ...

  8. C:常量、变量 、 表达式 、运算符、 枚举

    常量 变量 表达式 运算符 枚举 1.布尔类型只有真和假 2运算符 >,<,<=,>=,==,!=.判断两个数是否相等要使用双等号‘==’.逻辑运算符的表达式结果非真即假,&a ...

  9. vs2008 release下调试状态设置[转]

    这是一个老生常谈的话题,但还是有时候会漏洞一些设置.总结一些,总共需要三个地方设置, 分别是1)c\c++-> General->Debug Information Format. 2) ...

  10. 标准Dispose实现 (转)

      需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个类型都代表一种资源,而资源又分为两类: 托管资源:由CLR管理分配和释放的资源,即由CLR里new出来的对象: 非托管资源 ...