twitter-bootstrap 如何为我的 Bootstrap 3.0 主题创建带有自定义 Gylph 图标的 iPhone 样式底部导航栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21199760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I Create iPhone Style Bottom Navbar With Custom Gylph icons for my Bootstrap 3.0 Theme?
提问by Barb C. Goldstein
Designing a custom website theme for my dad who used to be a cornerman for amateur boxers in Guadalajara (where he met my mexican mom!).
为我父亲设计一个自定义网站主题，他曾经是瓜达拉哈拉业余拳击手的角斗士（他在那里遇到了我的墨西哥妈妈！）。
I made the the Pills navigation using .nav-pillslike shown here => http://getbootstrap.com/components/#nav-pillsbut my dad want's an iphone bottom anchored type navbar with icons of gloves for the "news" section, a bloody towel icon for the cutman tips section etc.
我使用.nav-pills此处显示的方法制作了 Pills 导航=> http://getbootstrap.com/components/#nav-pills但我爸爸想要的是一个 iphone 底部锚定型导航栏，带有用于“新闻”部分的手套图标，一条血淋淋的毛巾Cutman 提示部分的图标等。
So kind of like this iphone nav bar shown below, but my constraints are i want to develop it as a mobile web app in bootstrap that is responsive and shows a navbar that looks like iphone bar (hope this makes sense?!!! OMG!)
有点像下面显示的这个 iphone 导航栏，但我的限制是我想在引导程序中将它开发为一个移动网络应用程序，它具有响应性并显示一个看起来像 iphone 栏的导航栏（希望这有意义？！天哪！ )
Following example from this Stack overflowanswer uses JQuery Mobile. I can't use jquery mobile in my bootstrap theme as it's overkill (right?)!
以下来自此堆栈溢出答案的示例使用 JQuery Mobile。我不能在我的引导程序主题中使用 jquery mobile，因为它太过分了（对吧？）！
So 2 Questions
所以 2 个问题
1) Does anyone have samples that can make this type of nav bar / menu? Using Bootstrap 3.0 FYI in static generated website with HTML5 and Javascript and CSS and bootstrap framework with responsive end goals.
1）有没有人有可以制作这种类型的导航栏/菜单的样本？在带有 HTML5 和 Javascript 和 CSS 的静态生成网站中使用 Bootstrap 3.0 FYI 以及具有响应式最终目标的引导程序框架。
2) Where can I get custom glpyh icons designed just like standard bootstrap glpyhs (willing to pay upto 50$ per icon) for the gloves and bloody towel icons that will go in the menu bar at bottom?
2) 我在哪里可以得到像标准引导程序 glpyhs 一样设计的自定义 glpyh 图标（愿意为每个图标支付高达 50 美元），用于将进入底部菜单栏中的手套和血淋淋的毛巾图标？
As for my efforts, I tried various things using the Pills navbar on bootstrap as a starter, but just can't seem to get the background image working, as well as bars that look like iphone bottom bar! Also searched online for glyph makers, no luck, all spammy stock sites.
至于我的努力，我尝试了使用引导程序上的 Pills 导航栏作为启动器的各种方法，但似乎无法使背景图像正常工作，以及看起来像 iphone 底部栏的栏！还在网上搜索字形制造商，运气不好，所有垃圾邮件网站。
Thanks a lot!!!!
非常感谢！！！！
回答by Zim
This example on Bootply should help you get started..
Bootply 上的这个示例应该可以帮助您入门..
http://bootply.com/106743
http://bootply.com/106743
The bottom navbar uses the xsBootstrap grid columns to prevent vertical stacking on smaller screens (iPhone). You can use the included glyphicons icons, or take a look at FontAwesome for more icons.
底部导航栏使用xsBootstrap 网格列来防止在较小的屏幕 (iPhone) 上垂直堆叠。您可以使用包含的字形图标，或查看 FontAwesome 以获取更多图标。
