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

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

事实上，你为什么不直接集成 Twitter 的 Bootstrap，你会得到你可能遇到的所有其他东西：http: //getbootstrap.com/

看看吧，它有你想要/需要的一切。