导航格式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. android get uuid获取uuid

    https://github.com/Paldom/UniqueDeviceID protected void getDeviceUUID(){ try { Context context = cor ...

  2. jquery获取显示器,屏幕的宽度,和高度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  3. Shell 脚本基本操作练习

    这里主要是熟悉了shell的基本操作,包括变量赋值引用修改.函数的使用.信号的获取及一些判断方法等,具体详见代码: #!/bin/sh str="Hello World !" ec ...

  4. 网站在域名前面添加logo小图标

    如何给界面添加logo?就像百度的首页出现的图标. 1.准备一个ICO格式的小图标. 2.将制作好的ICO文件放到tomcat下的“D:\apache-tomcat-6.0.16\webapps\RO ...

  5. android adb服务启动不了解决办法

    当然还有可能是其它的原因,下面是一些解决办法的汇总 因为在对应的文件夹下找不到adb的问题,将android-sdk/platform-tools和android-sdk/tools都加到环境变量中去 ...

  6. AUPE学习第八章------进程控制

    每个进程都有一个非负整形表示的唯一进程ID. init进程是一号进程,是第一个用户态的进程.它负责内核启动以后启动一个unix系统, 它读取的配置文件一般在/etc/rc*./etc/inittab. ...

  7. OC:属性的内部实现原理、dealloc内释放实例变量、便利构造器方法的实现原理、collection的内存管理

    代码: // // main.m #import <Foundation/Foundation.h> #import "Person.h" #import " ...

  8. OC:基础学习

    OC面向对象的编程语言思想 类与对象.继承与实例化.属性点语法.内存管理.字符串.可见度. 类是一组具有相同特征和行为的事物的抽象 OC的与C相比所具有的新的特点: 定义新的类.类的实例和方法.方法的 ...

  9. chrome内核浏览器缓存资源找回方法

    曾几何时,用chrome浏览器看了某个图片,网页,视频等,当时没保存,后来再怎么找都找不到了,chrome还把缓存加密了,不能像ie那样找回,这世上有买后悔药的吗?还真有! 搜索chromeCache ...

  10. Jquery基础:append、prepend、after、before、appendTo的区别

    append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容. after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容. appendTo() 仍然是在被选元 ...