財団の進行状況バー
Foundation のプログレスバーは、プログラムの処理の度合いとして表示できます。
点击 "运行实例" 按钮查看在线实例 默认情况下，进度条颜色为蓝色。不同颜色的类为： 点击 "运行实例" 按钮查看在线实例 点击 "运行实例" 按钮查看在线实例 可以使用 インスタンス.progress クラスを使用して、プログレスバー。.meter クラスは子要素 (<span>) に使用されます。 <span> 要素で進行状況のパーセンテージを次のように設定できます: <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：实例
<!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>
<div class="progress">
<span class="meter" style="width:70%"></span>
</div>
</div>
</body>
</html>
运行实例 »进度条颜色
.secondary, .success, 或 .alert:实例
<!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>
<div class="progress">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress secondary">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress success">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress alert">
<span class="meter" style="width:50%"></span>
</div>
</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>
<div class="progress">
<span class="meter" style="width:50%"></span>
</div>
<p>圆角:</p>
<div class="progress radius">
<span class="meter" style="width:50%"></span>
</div>
<p>圆形:</p>
<div class="progress round">
<span class="meter" style="width:50%"></span>
</div>
</div>
</body>
</html>
运行实例 »进度条尺寸
.small-num 或 .large-numインスタンス<!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>
<div class="progress large-1">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-6">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-9">
<span class="meter" style="width:50%"></span>
</div>
<div class="progress large-11">
<span class="meter" style="width:50%"></span>
</div>
<!-- Default width, if you remove .large-12 it will produce the same result -->
<div class="progress large-12">
<span class="meter" style="width:50%"></span>
</div>
</div>
</body>
</html>
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します進行状況バーの色
デフォルトでは、進行状況バーの色は青です。異なる色のクラスは次のとおりです: .secondary、.success、または .alert: <!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>
<style>
.percentage {
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-size: 12px;
}
</style>
</head>
<body>
<div style="padding:20px;">
<h2>进度条标签</h2>
<div class="progress">
<span class="meter" style="position:relative;width:75%">
<span class="percentage">75%</span>
</span>
</div>
<div class="progress success">
<span class="meter" style="position:relative;width:50%">
<span class="percentage">50%</span>
</span>
</div>
<div class="progress alert">
<span class="meter" style="position:relative;width:25%">
<span class="percentage">25%</span>
</span>
</div>
</div>
</body>
</html>
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します角丸プログレスバー.radius クラスと .round クラスは角丸を追加するために使用されますプログレスバーへの影響: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください🎜🎜🎜🎜プログレスバーのサイズ🎜🎜.smallを使用できます。 -🎜num🎜 または .large-🎜num🎜 はプログレスバーの幅を変更します。🎜num🎜 は 1 (8.33%) から 12 (デフォルト (100%) までの数値です) )): 🎜🎜🎜例🎜🎜 rrreee🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜進行状況バーのラベル🎜🎜 CSSを使用して進行状況バーにラベルを追加できます。次の例では、<span> を追加しました。
パーセンテージを表示する要素: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行 »🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜
