在 jQuery Mobile 中，网格（Grids）是一种用于创建响应式布局的强大工具。网格系统允许将内容划分为不同的列，以便在不同屏幕尺寸上灵活布局。以下是一个简单的例子，演示了如何使用 jQuery Mobile 创建网格：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Grid</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Grid -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Grid Example</h1>
    </div>

    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a"><p>Block A</p></div>
            <div class="ui-block-b"><p>Block B</p></div>
            <div class="ui-block-a"><p>Block C</p></div>
            <div class="ui-block-b"><p>Block D</p></div>
            <div class="ui-block-a"><p>Block E</p></div>
            <div class="ui-block-b"><p>Block F</p></div>
        </div>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>
</div>

</body>
</html>

在这个例子中，我们使用了 ui-grid-a 类来创建一个两列的网格系统。每个网格块都有一个 ui-block-a 或 ui-block-b 的类，以指定其所在的列。这种布局可以在小屏幕上以单列方式显示，而在大屏幕上以两列方式显示。

你还可以使用其他类似的类，如 ui-grid-b（三列）、ui-grid-c（四列）等，以创建不同列数的网格系统。




转载请注明出处：http://www.pingtaimeng.com/article/detail/14455/jQuery Mobile