jQuery Mobile: botones de respuesta en cuadrículas

Descripción

Para apilar cuadrículas por debajo de 35em (560px), se puede aplicar un punto de interrupción preestablecido. En el contenedor de cuadrícula de botones se incluye.ui-responsive clase.

Ejemplo

El siguiente ejemplo demuestra el uso de cuadrícula de botones receptiva en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <h2>Responsive grid Example Using Anchor Tag</h2>
      <div class = "ui-grid-b ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all ui-btn-icon-left ui-icon-arrow-l">Previous</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all ui-icon-plus ui-btn-icon-left">Add </a>
         </div>
         
         <div class = "ui-block-c">
            <a class = "ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r">Next</a>
         </div>
      </div>

      <h2>Responsive Grid Example Using Input</h2>
      <div class = "ui-grid-b ui-responsive">
         <div class = "ui-block-a">
            <input type = "button" data-icon = "plus" value = "Add">
         </div>
         
         <div class = "ui-block-b">
            <input type = "button" data-icon = "check" value = "Confirm">
         </div>
         
         <div class = "ui-block-c">
            <input type = "button" data-icon = "minus" value = "Minus">
         </div>
      </div>
      
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como button_grid_responsive.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/button_grid_responsive.html y se mostrará el siguiente resultado.

↰ Previous page