创建一个标签式的导航菜单的步骤是:

  • 在ul标签上加上class  nav
  • 再ul标签上加上 class .nav-tabs。

在li标签上加上 active表示激活该项

<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">SVN</a></li>

<li><a href="#">iOS</a></li>

<li><a href="#">VB.Net</a></li>

<li><a href="#">Java</a></li>

<li><a href="#">PHP</a></li>

</ul>

创建一个胶囊式标签只需要把 nav-tabs改成：nav-pills.

<ul class="nav nav-pills">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">SVN</a></li>

<li><a href="#">iOS</a></li>

<li><a href="#">VB.Net</a></li>

<li><a href="#">Java</a></li>

<li><a href="#">PHP</a></li>

</ul>

第九篇.bootstrap导航的更多相关文章

  1. 第九篇 Integration Services：控制流任务错误

    本篇文章是Integration Services系列的第九篇,详细内容请参考原文. 简介在前面三篇文章,我们创建了一个新的SSIS包,学习了脚本任务和优先约束,并检查包的MaxConcurrentE ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. 【译】第九篇 Integration Services：控制流任务错误

    本篇文章是Integration Services系列的第九篇,详细内容请参考原文. 简介在前面三篇文章,我们创建了一个新的SSIS包,学习了脚本任务和优先约束,并检查包的MaxConcurrentE ...

  4. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  5. Spring Cloud第九篇 | 分布式服务跟踪Sleuth

    ​ ​本文是Spring Cloud专栏的第九篇文章,了解前八篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...

  6. 第二篇.Bootstrap起步

    第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...

  7. 解剖SQLSERVER 第九篇 OrcaMDF现在能通过系统DMVs显示元数据（译）

    解剖SQLSERVER 第九篇  OrcaMDF现在能通过系统DMVs显示元数据(译) http://improve.dk/orcamdf-now-exposes-metadata-through-s ...

  8. 第九篇 SQL Server代理了解作业和安全

    本篇文章是SQL Server代理系列的第九篇,详细内容请参考原文 在这一系列的上一篇,学习了如何在SQL Server代理作业步骤启动外部程序.你可以使用过时的ActiveX系统,运行批处理命令脚本 ...

  9. 第九篇 ：微信公众平台开发实战Java版之如何实现自定义分享内容

    第一部分:微信JS-SDK介绍 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

随机推荐

  1. .net 网站开发学习资源

    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...

  2. android应用内存使用情况

    单个应用程序最大内存限制,超过这个值会产生OOM(内存溢出) 命令:adb shell ->dalvik.vm.heapgrowthlimit 应用启动后分配的初始内存 命令:adb shell ...

  3. Ubuntu下安装Koala

    1.下载koala ,官方网址 目前官方链接的到百度云上的包好像有问题,不能安装,这里分享下 https://yunpan.cn/ckAF4L3TR4kKG (提取码:179a) 2.执行 $ sud ...

  4. C++ int与string的转化

    int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释.缺省情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上前缀,告诉编译器按照不同进制去解释.8进制 ...

  5. iOS runloop初步学习

    参考: http://www.aichengxu.com/view/43297111. 定义:其实它内部就是do-while循环,在这个循环内部不断地处理各种任务(比如Source.Timer.Obs ...

  6. JavaScript中关于地址的获取

    //取当前页面名称(不带后缀名) function pageName(){ var a = location.href; var b = a.split("/"); var c = ...

  7. Table样式

    .tb_org th { background-color: #; color: #ffffff; } .tb_org { border-right: 1px solid silver; border ...

  8. gdb 常用内容

    gdb exegdb exe coregdb -p info m TAB ^関数の先頭 info b ^list the breakpoint set args -a test ^引数設定 show ...

  9. nginx的ngx_http_request_t结构体

    struct ngx_http_request_s { uint32_t signature; /* "HTTP" */ //请求对应的客户端连接 ngx_connection_t ...

  10. HTML 格式化等处理方法

    1.处理特殊字符串,清除空格,换行等 function DeleteHtml($str) { $str = trim ( $str ); // 清除字符串两边的空格 $str = preg_repla ...