6.bootstrap 将文本内容关联一个动作(手机端导航适配)&在超小尺寸下显示,屏幕变大后消失
1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list
解决方法:
1.首先要想到,MENU只有两个状态,因此可以用checkbox实现
2.将MENU放在label标签里面,label的for与checkbox的id一致就可以关联在一起了
3.将要显示的list先设置为隐藏,用hidden-xs,当点击checkbox时,就显示出来
附加的:把MENU移到右边的操作,用css可以搞定,通过设置 display: inline-block;
并添加少量的内补(padding),将所有元素放置于同一行。
#toggle-lebel { display: inline-block; position: absolute; right: 15px; top: 13px; font-size: 16px; font-weight: normal; color: #888; } #toggle-lebel:hover { color: #333; }
完整代码:(注意:Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器)
1.html
<div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="navbar-brand"></a> </div> <label id="toggle-lebel" for="toggle-checkbox">MENU</label> <input class="hidden" id="toggle-checkbox" type="checkbox"> <div class="hidden-xs"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">首页</a></li> <li><a href="#">国内</a></li> <li><a href="#">国际</a></li> <li><a href="#">数度</a></li> <li><a href="#">社会</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">登录</a></li> <li><a href="signup.html">注册</a></li> </ul> </div> </div> </div>
2.css
#toggle-checkbox:checked ~div{ display: block !important; } #toggle-lebel { display: inline-block; position: absolute; right: 15px; top: 13px; font-size: 16px; font-weight: normal; color: #888; } #toggle-lebel:hover { color: #333; }
2.情景:MENU在超小尺寸下显示,屏幕变大后消失
两步:
1.在label标签上添加class="visible-xs-inline-block"
2.
注意:通过设置 display: inline-block;
并添加少量的内补(padding),将所有元素放置于同一行。