Jquery Mobile NavBar reflow

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

你可以在Twitters bootstrap中查看他们是如何做到的。基本上，您将对特定屏幕大小进行媒体查询，并以此方式格式化页面。

事实上，为什么不要只是整合Twitter的Bootstrap，你就会得到其他可能遇到的一切：http://getbootstrap.com/

检查出来，它有你想要/需要的一切。