您的位置：首页 > 其它

.bar : 嵌入子元素

2016-04-06 18:05 246 查看

在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">
<button class="button icon ion-home"></button>
<h1 class="title royal">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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航