Maison > Article > interface Web > Le pied de page inférieur d'ionic

Le pied de page inférieur d'ionic

黄舟original: 2017-02-17 13:35:001097parcourir

1. Exemple d'arrière-plan

le titre ionique est un en-tête de barre, le sous-titre est un sous-en-tête de barre et le titre du bas est un pied de page

2. Code source d'implémentation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ionic之底部bar-footer</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
		<script>
			var app = angular.module("footerApp",["ionic"]);
			app.controller("footerController",function($scope){
				$scope.header = "标题";
				$scope.subheader = "副标题";
				$scope.footer = "底部";
			});
		</script>
	</head>
	<body ng-app="footerApp" ng-controller="footerController">
		<p class="bar bar-header bar-dark">
			<label class="title">{{header}}</label>
		</p>
		<p class="bar bar-subheader bar-calm">
			<label class="title">{{subheader}}</label>
		</p>
		<p class="bar bar-footer bar-energized">
			<label class="title">{{footer}}</label>
		</p>
	</body>
</html>

3. Résultats de la mise en œuvre

Le pied de page inférieur dionic

Ce qui précède est la barre inférieure du contenu du pied de page ionique, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：bouton de style ioniqueArticle suivant：bouton de style ionique

Articles Liés

Voir plus