javascript - 基于图标的导航 Bootstrap 和 Jquery Mobile

Question

我正在使用 jQuery Mobile 和 Twitter Bootstrap 创建一个移动应用程序。我正在尝试完成像应用程序导航这样的“跳板”。我有 6 个图标，我想要分成两行，每行 3 个。

我目前有:

             <li><img src="img/info.png" /></li>
             <li><img src="img/map.png" /></li>
             <li><img src="img/rules.png" /></li>
             <li><img src="img/calender.png" /></li>
             <li><img src="img/iSchool.png" /></li>
             <li><img src="img/Infinite-Campus.png" /></li>    

我想让它看起来像 Apple 的 Springboard，但具有更大的图标和更像 Windows Phone Metro 的感觉。可以用这些框架来完成吗？

谢谢!

Answer 1

您可以使用glyphicon classes (假设您已经从 Bootstrap 添加了字体)并为您的图标指定字体大小:

HTML

<nav>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>
    <li><span class="glyphicon glyphicon-nameoficon></span></li>  
</nav>

CSS

nav span{
    font-size:40px;
}

如果您还没有添加字体文件夹，这就是您的文件夹结构的样子:

project/fonts
project/css/styles.css

基本上，字体文件夹必须比您的样式“高出”一个级别。

希望对您有所帮助。