- Foundation 教程
- Foundation - 首頁
- Foundation - 概覽
- Foundation - 安裝
- Foundation - 啟動專案
- Foundation - Kitchen Sink
- Foundation 一般
- Foundation - 全域性樣式
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript 實用程式
- Foundation - 媒體查詢
- Foundation - 網格
- Foundation - Flex Grid
- Foundation - 表單
- Foundation - 可見性類
- Foundation - 基礎版式
- Foundation - 版式幫助工具
- Foundation - 基本控制元件
- Foundation - 導航
- Foundation - 容器
- Foundation - 媒體
- Foundation - 外掛
- Foundation SASS
- Foundation - Sass 函式
- Foundation - Sass Mixins
- Foundation 庫
- Foundation - Motion UI
- Foundation 實用資源
- Foundation - 快速指南
- Foundation - 實用資源
- Foundation - 討論
Foundation - 統計
描述
每當你處理儀表盤時,你都需要突出一些重要的數字。你可以透過使用 .stat 類達到此目的。
示例
以下示例說明了在 Foundation 中使用 統計。
<!doctype html>
<html>
<head>
<title>Statistics</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>
</head>
<body>
<p>Number of online users</p>
<div class = "stat">7080</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
輸出
讓我們執行以下步驟來看看上面給出的程式碼如何工作 −
儲存上面給出的 html 程式碼為 typography_statistics.html 檔案。
在瀏覽器中開啟此 HTML 檔案,輸出顯示如下所示。
foundation_typography_helpers.htm
廣告