ionic中.bar : 嵌入子元素

作者:本站编辑发布时间:2015-11-24 来源:本站原创点击数:

.bar : 嵌入子元素

在ionic中，有三种.bar子元素的样式是预定义的：

标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素：

<any class="bar">    <any class="title">...</any></any>

按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案：

<any class="bar">    <any class="button">...</any></any>

工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常使用div元素作为工具栏：

<any class="bar">    <any class="button-bar">...</any></any>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-dark">
<h1 class="title">Header</h1>
<button class="button icon ion-plus"></button>
</div>
<div class="bar bar-footer bar-dark">
<div class="button-bar">
<a class="button button-clear icon ion-ios-chatbubble-outline">Chat</a>
<a class="button button-clear icon ion-ios-list-outline">Address</a>
<a class="button button-clear icon ion-ios-eye-outline">Discovery</a>
<a class="button button-clear icon ion-ios-person-outline">Profile</a>
</div>
</div>
</body>
</html>

本文责任编辑：加入会员收藏夹点此参与评论>>