基礎ボタングループ
ボタン グループ
Foundation では、同じ行に一連のボタンを作成できます。
<ul> 要素を使用し、.button-group クラスを追加してボタン グループを作成できます: <ul> 元素并添加 .button-group 类来创建按钮组：
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
垂直按钮组
垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度:
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
.stack-for-small 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列：
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
圆角按钮组
按钮组中使用 .radius 和 .round 类为按钮添加圆角效果：
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
均匀延展按钮组
.even-num
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>
Run Instance »
[サンプルの実行] ボタンをクリックして、オンラインのサンプルを表示します
垂直ボタン グループ 垂直ボタン グループは、
.stack クラスを使用して作成されます。ボタンは親要素の幅全体に広がっていることに注意してください: 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>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
.stack-for -small このクラスは小さいサイズの画面に使用され、ボタンは水平から垂直に配置されます: インスタンス<!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>🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックして表示しますオンラインの例🎜🎜🎜🎜角の丸いボタン グループ🎜🎜ボタン グループの .radius クラスと .round クラスを使用して、ボタンに丸い角を追加します: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスを実行します»🎜🎜「例を実行」ボタンをクリックしてオンライン例を表示します🎜🎜🎜🎜ボタングループを均等に拡張します🎜🎜.even-num クラスは、次の目的で使用されますボタン グループ内のボタンの幅を均等に配分し、親要素の幅の 100% にまたがるようにします。 🎜🎜🎜num🎜は、ボタン グループ内のボタンの数です (1 ～ 8): 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜 オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします🎜🎜🎜 🎜ドロップダウン メニュー ボタン🎜 🎜ドロップダウン メニュー ボタンを使用すると、ユーザーは設定値を選択できます: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします🎜 🎜分析例
.dropdown クラスは、ドロップダウン メニュー ボタンを作成します。 .dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
分割按钮
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split
data-dropdown="id" 属性を持つリンクを使用します。 id 値は、ドロップダウン メニュー (id01) の内容と一致する必要があります。
.f-dropdown クラスと data-dropdown-content 属性を <ul> に追加して、ドロップのコンテンツを作成します-ダウンメニュー。 最後にFoundation JSを初期化します。
分割ボタン
分割ボタンのドロップダウン メニューを作成することもできます。 .split クラスをボタンに追加し、span 要素を使用して方向矢印ボタンを生成するだけです:
 | Run Instance»「Run Instance」ボタンをクリックしますオンラインで表示するには 例 |
|---|
