导航格式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. HTTP Status 500 - Servlet.init() for servlet htmlWebConfig threw exception

    HTTP Status 500 - Servlet.init() for servlet htmlWebConfig threw exception

  2. F5 会话保持

    1.什么是会话保持?在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中,一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成.由于这几次交互过程是密切相关的,服务器 ...

  3. 【Python实战02】共享Python代码到PyPI社区

    之前学习了Python的列表,以及编写了一个函数来进行列表的输出,这次我们就继续来学习如何把我们已经编写好的代码共享到PyPI社区,这里以上篇文章中编写的print_lol函数为例. 函数转换为模块 ...

  4. Android读取assets目录下的资源

    1.获取资源的输入流 资源文件 sample.txt 位于 $PROJECT_HOME/assets/ 目录下,可以在 Activity 中通过 Context.getAssets().open(“s ...

  5. 《高性能MySQL》

    <高性能MySQL>(第3版)讲解MySQL如何工作,为什么如此工作? MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优.系统配置管理和安全设置.监控分析,以及复制.扩展和 ...

  6. windows win7 win10 多系统启动菜单 多系统引导设置

    win键+R 输入msconfig 根据显示的程序设置(除非你看不懂文字)

  7. linux环境新增用户和所属组

    1.查看用户和组信息命令: 1.1 cat /etc/passwd /etc/passwd 存储有关本地用户的信息. 1)username        UID到名称的一种映射,用户名 2)passw ...

  8. C#完成超酷的图像效果 (附demo)

    如果您觉得C#制作的艺术字比较好玩, 但是还觉得没看够,不过瘾,那么我今天就让您一饱眼福, 看看C#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, ...

  9. C++的优秀特性3:构造函数和析构函数

    (转载请注明原创于潘多拉盒子) 构造函数和析构函数是C++中再熟悉不过的概念了,几乎每个了解一点C++的人都知道这两个概念是什么意思.一个对象的全部生命期中构造函数和析构函数执行的时机如下: 1. 为 ...

  10. uva140 - Bandwidth

    Bandwidth Given a graph (V,E) where V is a set of nodes and E is a set of arcs in VxV, and an orderi ...