如何使用自定义Gylph图标为我的Bootstrap 3.0主题创建iPhone样式底部导航栏？

Question

为我父亲设计一个自定义网站主题,他曾经是瓜达拉哈拉业余拳击手的角落人(在那里他遇到了我的墨西哥妈妈!).

我使用.nav-pills这里显示的药丸导航=> http://getbootstrap.com/components/#nav-pills但我父亲想要的是一个带有"新闻"部分手套图标的iphone底部锚定类型导航栏,一条血淋淋的毛巾cutman提示部分的图标等

所以有点像下面显示的这个iphone导航栏,但是我的约束是我想将它作为一个移动的web应用程序开发,它是响应式并显示一个看起来像iphone栏的导航栏(希望这有道理？!!! OMG! )

以下示例来自此Stack溢出答案使用JQuery Mobile.我不能在我的bootstrap主题中使用jquery mobile,因为它太过分了(对吧？)!

所以2个问题

1)有没有人有样品可以制作这种类型的导航栏/菜单？在静态生成的网站中使用Bootstrap 3.0 FYI,使用HTML5和Javascript以及CSS和具有响应最终目标的引导框架.

2)我在哪里可以获得设计的glpyh图标,就像标准的bootstrap glpyhs(愿意为每个图标支付高达50美元)的手套以及底部菜单栏中的血淋淋的毛巾图标一样？

至于我的努力,我尝试使用Pills导航栏作为启动器的各种东西,但似乎无法让背景图像工作,以及看起来像iphone底栏的栏!还在网上搜索字形制作者,没有运气,所有垃圾邮件库存网站.

非常感谢!!!!

Answer 1

Bootply上的这个例子可以帮助你开始..

http://bootply.com/106743

底部导航栏使用xsBootstrap网格列来防止在较小屏幕(iPhone)上进行垂直堆叠.您可以使用包含的glyphicons图标,或者查看FontAwesome以获取更多图标.