Groupe de boutons Fondation

Groupe de boutons

Foundation peut créer une série de boutons dans la même rangée.

Vous pouvez créer un groupe de boutons en utilisant l'élément <ul> et en ajoutant la classe .button-group :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>按钮组</h2>
  <ul class="button-group">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
  </ul>
</div>

</body>
</html>

Exécuter l'exemple »

Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Groupe de boutons verticaux

Le groupe de boutons verticaux est créé à l'aide la classe .stack. Notez que le bouton s'étend sur toute la largeur de l'élément parent :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>垂直按钮组</h2>
  <p>垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度。</p>
  <ul class="button-group stack">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
  </ul>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur " Exécuter l'instance" "Bouton Afficher l'exemple en ligne

.stack-for-small est utilisée pour les écrans de petite taille. Les boutons sont disposés de l'horizontale à la verticale :

Instance<🎜. >

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>垂直按钮组</h2>
  <p>.stack-for-small 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列(重置窗口大小查看效果)：</p>
  <ul class="button-group stack-for-small">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
  </ul>
</div>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Bouton de coin arrondi Groupe

Utilisez les classes

et .radius du groupe de boutons pour ajouter des coins arrondis aux boutons : .round

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角按钮组</h2>
  <p>圆角按钮组:</p>
  <ul class="button-group radius">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
  </ul>

  <p>圆形按钮组:</p>
  <ul class="button-group round">
    <li><button type="button" class="button">Apple</button></li>
    <li><button type="button" class="button">Samsung</button></li>
    <li><button type="button" class="button">Sony</button></li>
  </ul>
</div>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Étendez uniformément le groupe de boutons

Cette classe est utilisée pour répartir uniformément les boutons dans la largeur du groupe de boutons et s'étendre sur 100 % de la largeur de l'élément parent. .even-num

num est le nombre de boutons dans le groupe de boutons, de 1 à 8 :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h3>均匀延展按钮组:</h3>

<p>均匀延展三个按钮:</p>
<ul class="button-group even-3">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

<p>均匀延展五个按钮:</p>
<ul class="button-group even-5">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
  <li><button type="button" class="button">HTC</button></li>
  <li><button type="button" class="button">Huawei</button></li>
</ul>

<p>均匀延展八个按钮:</p>
<ul class="button-group even-8">
  <li><button type="button" class="button">A</button></li>
  <li><button type="button" class="button">B</button></li>
  <li><button type="button" class="button">C</button></li>
  <li><button type="button" class="button">D</button></li>
  <li><button type="button" class="button">E</button></li>
  <li><button type="button" class="button">F</button></li>
  <li><button type="button" class="button">G</button></li>
  <li><button type="button" class="button">H</button></li>
</ul>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Bouton du menu déroulant

Le drop Le bouton de menu -down permet aux utilisateurs de sélectionner les paramètres Bonnes valeurs :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>下拉菜单按钮</h2>
  <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
  <ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>下拉菜单按钮</h2>
  <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
  <ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton " Bouton "Exécuter l'instance" pour afficher l'instance en ligne

La classe

Analyse d'instance

.dropdown crée un bouton de menu déroulant.

Ouvrez un menu déroulant à l'aide d'un bouton ou d'un lien avec l'attribut data-dropdown="id". La valeur

id doit correspondre au contenu de la liste déroulante (id01).

Ajoutez la classe <ul> et les attributs .f-dropdown dans data-dropdown-content pour créer le contenu du menu déroulant.

Enfin, initialisez Foundation JS.

Bouton partagé

Nous pouvons également créer un menu déroulant de boutons partagés. Ajoutez simplement la classe .split au bouton et utilisez l'élément span pour générer un bouton fléché directionnel :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>分割按钮</h2>
  <button class="button split">Split Button <span data-dropdown="id01"></span></button>
  <ul id="id01" data-dropdown-content class="f-dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne