如何使用jQuery Mobile创建两列网格和两列布局

如何使用jQuery Mobile创建两列网格和两列布局

jQuery Mobile提供了基于CSS的列,是响应性的。网格的宽度为100%,网格没有背景色、边框和填充。

网格中包含元素,这些元素可以使用ui-block-a或ui-block-b或ui-block-c或ui-block-d类使其并排浮动。网格中的列是等宽的。在2列网格中,两个网格的宽度将各为50%。对于样式设计,我们可以使用ui-bar类。

CDN Links:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>

步骤:

  • 将上述CDN链接添加到HTML页面。
  • 在正文中,创建一个类别为ui-grid-a的div元素。
  • 在div元素中,创建两个div元素,第一个div的类别为ui-block-a,第二个div的类别为ui-block-b。
  • 设置主体的线高为0。

示例 1:

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
    </script>
  
    <style>
        body {
            line-height: 0 !important;
        }
    </style>
</head>
  
<body>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <div class="ui-bar ui-bar-a" style="height:50px">
                <p>Column 1</p>
            </div>
        </div>
          
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-b" style="height:50px">
                <p>Column 2</p>
            </div>
        </div>
    </div>
</body>
  
</html>

输出:

如何使用jQuery Mobile创建两列网格和两列布局?

例子2:下面的代码演示了提交和取消按钮,它们是互联网世界中非常常见的按钮。

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
  
    <script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
    </script>
  
    <style>
        fieldset {
            border: 0;
        }
  
        .submit {
            background-color: rgb(38, 134, 158);
        }
  
        .cancel {
            background-color: rgb(233, 155, 10);
        }
    </style>
</head>
  
<body>
    <fieldset class="ui-grid-a">
        <div class="ui-block-a">
            <a class="ui-btn cancel">CANCEL</a>
        </div>
  
        <div class="ui-block-b">
            <a class="ui-btn submit">SUBMIT</a>
        </div>
    </fieldset>
</body>
  
</html>

输出:

如何使用jQuery Mobile创建两列网格和两列布局?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程