/docs/buttons/buttons-inline.html

https://github.com/forresst/jquery-mobile-fr_FR · HTML · 96 lines · 63 code · 33 blank · 0 comment · 0 complexity · 6966eba271b7b041d2a3866e6d8977df MD5 · raw file 

    

  1. <!DOCTYPE html> 
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    5. 

  5. 	<meta charset="utf-8">
    6. 

  6. 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    7. 

  7. 	<title>Docs jQuery Mobile Docs - Boutons alignés</title> 
    8. 

  8. 	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
    9. 

  9. 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
    10. 

  10. 

  11. 	<script src="../../js/jquery.js"></script>
    12. 

  12. 	<script src="../../docs/_assets/js/jqm-docs.js"></script>
    13. 

  13. 	<script src="../../js/"></script>
    14. 

  14. 

  15. </head> 
    16. 

  16. <body> 
    17. 

  17. 

  18. <div data-role="page" class="type-interior">
    19. 

  19. 

  20. 	<div data-role="header" data-theme="f">
    21. 

  21. 		<h1>Alignement des boutons</h1>
    22. 

  22. 		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Recherche</a>
    23. 

  23. 	</div><!-- /header -->
    24. 

  24. 

  25. 	<div data-role="content">
    26. 

  26. 		<div class="content-primary">
    27. 

  27. 		<h2>Alignement des boutons</h2>
    28. 

  28. 		<p>Par défaut, tous les boutons dans le contenu du corps sont stylisés comme élément de bloc-niveau afin qu'ils remplissent la largeur de l'écran :</p>
    29. 

  29. 		
    30. 

  30. 		<a href="index.html" data-role="button">Bouton</a>
    31. 

  31. 		
    32. 

  32. 			
    33. 

  33. 		<p>Toutefois, si vous voulez un bouton plus compact qui soit seulement aussi large que le texte et les icônes à l'intérieur, ajoutez l'attribut <code> data-inline="true"</code> au bouton :</p>
    34. 

  34. 		
    35. 

  35. 		
    36. 

  36. 		<a href="index.html" data-role="button" data-inline="true">Bouton</a>
    37. 

  37. 		
    38. 

  38. 		<p>Si vous avez plusieurs boutons qui doivent se positionner côte à côte sur la même ligne, ajoutez l'attribut<code> data-inline="true"</code> à chaque bouton. Cela stylisera les boutons avec la largeur de leur contenu et alignera les boutons afin qu'ils soient positionner sur la même ligne. </p>
    39. 

  39. 			
    40. 

  40. <pre><code>
    41. 

  41. &lt;a href="index.html" data-role="button" data-inline="true"&gt;Annuler&lt;/a&gt;
    42. 

  42. &lt;a href="index.html" data-role="button" data-inline="true" data-theme="b"&gt;Sauver&lt;/a&gt;
    43. 

  43. </code></pre>
    44. 

  44. 

  45. 		<p>Le résultat est le suivant :</p>
    46. 

  46. 

  47. 			<a href="index.html" data-role="button" data-inline="true">Annuler</a> <a href="index.html" data-role="button" data-theme="b" data-inline="true">Sauver</a>
    48. 

  48. 			
    49. 

  49. 		<p>En ajoutant <code>data-mini="true"</code> aux boutons alignés, cela créé une version plus compacte :</p>
    50. 

  50. 

  51. 			<a href="index.html" data-role="button" data-inline="true" data-mini="true">Annuler</a> <a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Sauver</a>
    52. 

  52. 

  53. 		
    54. 

  54. 		<p>Si vous voulez des boutons positionnés côte à côte, mais étirés pour remplir la largeur de l'écran, vous pouvez utiliser les <a href="../content/content-grids.html">grilles de de colonne de contenu</a> pour utiliser toute la largeur sur 2 ou 3 colonnes.</p>	
    55. 

  55. 		
    56. 

  56. 		<h2>Exemple d'icône</h2>
    57. 

  57. 		<p>Lorsqu'une <a href="buttons-icons.html">icône</a> est ajouté à un bouton inline, le bouton s'élargit pour accueillir l'icône :</p>
    58. 

  58. 			
    59. 

  59. 			<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Annuler</a> <a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true">Sauver</a>
    60. 

  60. 			
    61. 

  61. 			<p>Le même en version mini :</p>
    62. 

  62. 				
    63. 

  63. 			<a href="index.html" data-role="button" data-icon="delete" data-inline="true" data-mini="true">Annuler</a> <a href="index.html" data-role="button" data-icon="check" data-theme="b" data-inline="true" data-mini="true">Sauver</a>
    64. 

  64. 		
    65. 

  65. 		</div><!--/content-primary -->		
    66. 

  66. 

  67. 		<div class="content-secondary">
    68. 

  68. 

  69. 			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
    70. 

  70. 

  71. 					<h3>Aussi dans cette rubrique</h3>
    72. 

  72. 

  73. 					<ul data-role="listview" data-theme="c" data-dividertheme="d">
    74. 

  74. 

  75. 						<li data-role="list-divider">Boutons</li>
    76. 

  76. 						<li><a href="buttons-types.html">Bases du bouton</a></li>
    77. 

  77. 						<li><a href="buttons-icons.html"> Icônes des boutons</a></li>
    78. 

  78. 						<li data-theme="a"><a href="buttons-inline.html">Alignement des boutons</a></li>
    79. 

  79. 						<li><a href="buttons-grouped.html">Groupement des boutons</a></li>
    80. 

  80. 						<li><a href="buttons-themes.html">Thématisation des boutons</a></li>
    81. 

  81. 

  82. 					</ul>
    83. 

  83. 			</div>
    84. 

  84. 		</div>		
    85. 

  85. 

  86. 	</div><!-- /content -->
    87. 

  87. 

  88. 	<div data-role="footer" class="footer-docs" data-theme="c">
    89. 

  89. 		<p class="jqm-version"></p>
    90. 

  90. 		<p>Copyright 2013 The jQuery Foundation</p>
    91. 

  91. 	</div>
    92. 

  92. 

  93. 	</div><!-- /page -->
    94. 

  94. 

  95. 	</body>
    96. 

  96. 	</html>
    97.