Question

我已按照 THIS 教程创建了一个跨平台的Ionic应用程序。

该应用程序已成功创建，我可以在本地（在桌面浏览器中）以及在我的Android设备上运行它。

作为测试，我尝试向该应用添加一些按钮。显示了这些按钮，但它们是标准按钮，并且没有按照 THIS 示例使用CSS进行格式化。

下面是按钮的显示方式。

这是我期望看到的（明显减去菜单栏和电话轮廓）。

下面是我正在使用的代码。 ionic.css文件和ionic.bundle.js也已创建。为什么按钮未按预期显示？

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script data-ionic="inject">
    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.2';i.angular='5.2.11';i.staticDir='build/';})(window);
</script>

<meta charset="UTF-8">
<title>GD</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">

<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- Ionic module -->
<script src="js/app.js"></script>

<!-- THIS HAS TO BE LAST BEFORE BODY -->
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>

<link href="build/main.css" rel="stylesheet">
</head>

<body ng-app="GD" ng-controller="TodoCtrl">
<button ion-button color="light">Light</button>
<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>

<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The vendor js is generated during the build process
   It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>

<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>

离子应用程序不显示内容或CSS格式

0 个答案: