专栏首页sktjbootstrap nav 导航菜单

bootstrap nav 导航菜单

image.png

nav nav-tabs <p>标签式的导航菜单</p> <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>

image.png

胶囊式菜单:nav nav-pills <p>基本的胶囊式导航菜单</p> <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>

image.png

垂直菜单 nav nav-pills nav-stacked <p>垂直的胶囊式导航菜单</p> <ul class="nav nav-pills nav-stacked"> <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>

image.png

自适应菜单:nav nav-pills nav-justified <p>两端对齐的导航元素</p> <ul class="nav nav-pills nav-justified"> <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> <ul class="nav nav-tabs nav-justified"> <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>

image.png

禁用: <li class="disabled"><a href="#">iOS(禁用链接)</a></li>

image.png

下拉 <p>带有下拉菜单的标签</p> <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 class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>

image.png

<p>带有下拉菜单的胶囊</p> <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 class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap 多级菜单 注册登录

    li class=dropdown a class=dropdown-toggle data-toggle=dropdown ul class=dropdo...

    用户5760343
  • bootstrap bootstrap-dropdown.js

    <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a ...

    用户5760343
  • bootstrap 分页 常用样式 1

    pagination <ul class="pagination"> <li><a href="#">«</a></li> <li><a href...

    用户5760343
  • 原 each()、map()

    作者:汪娇娇 日期:2016.9.1 如果说到某个元素的开关事件,第一反应那就是用一个变量做标记,比如flag,为1时开,为0时关,这是很简单的。下面我将以li...

    jojo
  • 筋头云案例

    星辰_大海
  • bootstrap 多级菜单 注册登录

    li class=dropdown a class=dropdown-toggle data-toggle=dropdown ul class=dropdo...

    用户5760343
  • bootstrap bootstrap-dropdown.js

    <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a ...

    用户5760343
  • 选择器:nth-child使用摘要

    IE9+,Firefox,Chrome。 让IE6+支持:nth-child方法是,可以用selectivizr

    Joel
  • jquery循环 each()

    对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

    Devops海洋的渔夫

扫码关注云+社区

领取腾讯云代金券