jQuery Mobile proporciona columnas basadas en CSS que responden. Las cuadrículas tienen un ancho del 100%, las cuadrículas no tienen color de fondo, borde ni relleno.
Las cuadrículas contienen elementos en ellas, estos elementos se pueden hacer flotar uno al lado del otro usando la clase ui-block-a o ui-block-b o ui-block-c o ui-block-d . Las columnas de una cuadrícula tienen el mismo ancho. En la cuadrícula de 2 columnas, ambos anchos de cuadrícula serán del 50 % cada uno. Para el estilo, podemos usar la clase ui-bar .
Enlaces CDN:
<enlace rel=”hoja de estilo” 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>
Acercarse:
- Agregue los enlaces CDN anteriores a la página HTML.
- En el cuerpo, cree un elemento div con la clase ui-grid-a .
- En el elemento div , cree dos elementos div con la clase como ui-block-a para el primer div y la clase como ui-block-b para el segundo div.
- Establezca la altura de línea del cuerpo en 0.
Ejemplo 1:
HTML
<!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>
Producción:
Ejemplo 2: El siguiente código muestra los botones enviar y cancelar, que son botones muy comunes en el mundo de Internet.
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA