html - Jquery Mobile NavBar 回流

Question

嗨，我有这个导航栏:

<div data-role="navbar" data-theme="c" >
            <ul>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
            </ul>
      </div>


</div>

如果设备的屏幕太小无法显示三个按钮，我需要添加一个“菜单”按钮。

是这样的:http://img30.imageshack.us/img30/8634/o6c5.png

我知道我需要向 css 添加规则，但我不知道如何拜托了，谢谢

Answer 1

您可以在 Twitter 的 Bootstrap 中查看他们是如何做到的。基本上你会有一个针对特定屏幕尺寸的媒体查询，并以这种方式格式化页面。

事实上，您为什么不直接集成 Twitter 的 Bootstrap，您将获得您可能遇到的所有其他内容:http://getbootstrap.com/

检查一下，它拥有您想要/需要的一切。