jQuery Mobile - Boutons d'alignement dans les grilles

La description

Un seul bouton est aligné avec les boutons présents dans d'autres grilles.

Exemple

L'exemple suivant montre l'utilisation de l'alignement de la grille des boutons dans 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">Block A</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all">Block B </a>
         </div>
         
         <div class = "ui-block-c">
            <a class = "ui-btn ui-corner-all">Block C</a>
         </div>
      </div>

      <div class = "ui-grid-a ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all">Block A</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all">Block B </a>
         </div>
      </div>

      <div class = "ui-grid-solo ui-responsive">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all">Block A</a>
         </div>
      </div>

      <a class = "ui-btn ui-corner-all">Out of div tag</a>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus sous button_grid_alignment.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/button_grid_alignment.html et la sortie suivante sera affichée.