如何为我的Bootstrap 3.0主题创建带有自定义标志符号图标的iPhone样式底部导航栏？

Question

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

我使用.nav-pills制作药丸导航，如此处所示=＆gt; http://getbootstrap.com/components/#nav-pills但我父亲想要的是一个iphone底部锚定类型的导航栏，带有“新闻”部分的手套图标，一个用于剪裁技巧部分的血腥毛巾图标等。

有点像下面显示的这个iphone导航栏，但是我的约束是我想将它开发为一个响应中的自举的移动网络应用程序，并显示一个看起来像iphone栏的导航栏（希望这有意义吗？!! ！天啊！）

以下来自this Stack overflow的示例回答使用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

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