파운데이션 버튼 그룹
버튼 그룹
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>
인스턴스 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
세로 버튼 그룹세로 버튼 그룹은
.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>🎜<!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>🎜🎜🎜Run Instance»🎜🎜"Run Instance" 버튼을 클릭하여 확인하세요. 온라인 예🎜🎜🎜🎜둥근 모서리 버튼 그룹 🎜🎜버튼 그룹의 .radius 및 .round 클래스를 사용하여 버튼에 둥근 모서리를 추가하세요. 🎜🎜🎜 Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요🎜🎜🎜🎜버튼 그룹을 균등하게 확장🎜🎜.even-num 클래스를 사용합니다 버튼 그룹의 버튼 너비를 균등하게 분배하고 상위 요소 너비의 100%를 확장합니다. 🎜🎜🎜num🎜은 버튼 그룹의 버튼 수(1~8)입니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜 🎜드롭다운 메뉴 버튼🎜 🎜드롭다운 메뉴 버튼을 사용하면 사용자가 설정 값을 선택할 수 있습니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜 🎜예제 분석
.dropdown 클래스는 드롭다운 메뉴 버튼을 생성합니다. .dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
分割按钮
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split
data-dropdown="id" 속성이 있는 버튼이나 링크를 사용하여 드롭다운 메뉴를 엽니다. id 값은 드롭다운 메뉴(id01)의 내용과 일치해야 합니다.
드롭의 콘텐츠를 생성하려면
<ul>에 .f-dropdown 클래스와 data-dropdown-content 속성을 추가하세요. -다운 메뉴. 마지막으로 Foundation JS를 초기화합니다.
분할 버튼
분할 버튼의 드롭다운 메뉴를 만들 수도 있습니다. 버튼에 .split 클래스를 추가하고 범위 요소를 사용하여 방향 화살표 버튼을 생성하기만 하면 됩니다.
 | 인스턴스 실행»"인스턴스 실행" 버튼을 클릭하세요. 온라인으로 보기 예시 |
|---|
