大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap navbar – 从移动设备中删除固定标头,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
例如,您可以将nav类更改为;
移动设备:< nav class =“navbar navbar-default”role =“navigation”>
桌面:< nav class =“navbar navbar-default navbar-fixed-top”role =“navigation”>
??
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand navbar-brand-centered">Brand</div> </div> <div class="collapse navbar-collapse" id="navbar-brand-centered"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
HTML:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS:
@media (min-width:992pX) { body {padding-top:HEIGHTOFNAVBAR} .navbar-static-top {position:fixed;top:0;right:0;left:0;} }
如果您想要在移动设备上实际避免固定导航,您可以使用javascript嗅探设备是否触摸.
/* --------------- SUPPORTS TOUCH OR NOT for IOS,Android,and Windows Mobile --------------- */ /*! Detects touch support and adds appropriate classes to html and returns a JS object | Copyright (C) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au / Licensed under the MIT license | https://coderwall.com/p/egbgdw */ var supports = (function() { var d = document.documentElement,c = "ontouchstart" in window || navigator.msmaxTouchPoints; if (C) { d.className += " touch"; return { touch: true } } else { d.className += " no-touch"; return { touch: false } } })();
然后你可以使用HTML(相同):
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS
.no-touch body {padding-top:HEIGHTOFNAVBAR} .no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}
以上是大佬教程为你收集整理的twitter-bootstrap – Bootstrap navbar – 从移动设备中删除固定标头全部内容,希望文章能够帮你解决twitter-bootstrap – Bootstrap navbar – 从移动设备中删除固定标头所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。