jQuery mobile中的底部导航栏看起来像iPhone导航栏，可能吗？

我使用jQuery mobile创建了我的网站，我想构建相同的底部工具栏，如下图所示。 有人能指出我正确的方向吗？

jQuery mobile提供的默认导航栏没有提供相同的外观。

以下是jQuery移动导航栏： http ： //jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html

Answer 1

那么你可以使用的图标： http ： //glyphish.com/

快速版： http ： //jsfiddle.net/vh4Ca/62/

HTML

 
 
 
 
 
Favorite
 
Recent
 
Contacts
 
Keypad
 
Voicemail
 
 
 
 
  

CSS

 .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-glyphish-example .ui-btn .ui-icon { width: 45px!important; height: 35px!important; margin-left: -24px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; } #favorite .ui-icon { background-image: url(http://glyphish.com/images/demo.png); background-position: -345px -112px; background-repeat: no-repeat; } #recent .ui-icon { background-image: url(http://glyphish.com/images/demo.png); background-position: -9px -61px; background-repeat: no-repeat; } #contacts .ui-icon { background-image: url(http://glyphish.com/images/demo.png); background-position: -9px -540px; background-repeat: no-repeat; } #keypad .ui-icon { background-image: url(http://glyphish.com/images/demo.png); background-position: -9px -783px; background-repeat: no-repeat; } #voicemail .ui-icon { background-image: url(http://glyphish.com/images/demo.png); background-position: -394px -733px; background-repeat: no-repeat; }