bootstrap 响应式导航栏 折叠导航栏
1,建立相应的折叠按钮
[pcsh lang="css" tab_size="4" message="" hl_lines="" provider="manual"]
<!-- 折叠按钮 data-toggle:动作 data-target 要切换对象 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#info-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 折叠按钮 -->
[/pcsh]
2,把要折叠起来的元素设定如下class和id
[pcsh lang="xml" tab_size="4" message="" hl_lines="" provider="manual"]
<div class="collapse navbar-collapse" id="info-navbar">
<ul class="nav navbar-nav">
<li><a href="javascript:uploaditems();">提交物品信息</a></li>
</ul>
</div>
[/pcsh]
完成代码:
[pcsh lang="xml" tab_size="4" message="" hl_lines="" provider="manual"]
<div class="container">
<div class="navbar-header">
<!-- 折叠按钮 data-toggle:动作 data-target 要切换对象 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#info-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 折叠按钮 -->
<a class="navbar-brand" href="#">DashBoard</a>
</div>
<div class="collapse navbar-collapse" id="info-navbar">
<ul class="nav navbar-nav">
<li><a href="javascript:uploaditems();">提交物品信息</a></li>
</ul>
</div>
</div>
[/pcsh]
最后更新于 2017-03-17 15:58:08 并被添加「」标签,已有 540 位童鞋阅读过。
此处评论已关闭