<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>手册网基础教程(shouce.ren)</title>
<link rel="stylesheet" href="lib/css/ionic.min.css" />
<script type="text/javascript" src="lib/js/ionic.bundle.min.js" ></script>
</head>
<body>
<div class="bar bar-header">
<div class="h1 title">Buttons</div>
</div>
<div class="content has-header padding">
<!--<div class="content(容器) has-header(与头部) padding(有间距)">-->
<!--<button class="button(功能) button-light(颜色)">-->
<!--<button class="button(功能) button-block(它将完全填充父元素的宽度,包含了内边距属性padding) button-light(颜色)">-->
<!--<button class="button(功能) button-full(可以让按钮显示完全宽度,且不包含内边距padding) button-light"(颜色)>-->
<!--<button class="button button-small( 设置为小按钮) button-balanced">
<button class="button button-large( 设置为大按钮) button-energized">-->
<!--<button class="button button-outline(设置背景为透明) button-calm">-->
<!--<button class="button button-clear(无背景与边框按钮) button-balanced">-->
<!--<button class="button icon-left(图片在左边) ion-star(图片) button-positive">-->
<!--<a class="button icon-right(图片在右边) ion-chevron-right(图片) button-calm">-->
<!--<div class="card"(卡片)>-->
<!--<div class="item(功能条款) item-divider"(颜色)>
卡片头部!
</div>-->
<!--<div class="item item-text-wrap(text-wrap属性指定文本换行规则。)">
基本卡片,包含了文本信息。
</div>-->
<!--<div class="item item-divider">
卡片底部!
</div>-->
<!--</div> -->
<p><button class="button button-light">button-light</button>
</p><p><button class="button button-stable">button-stable</button>
</p>
</div>
<!--它将完全填充父元素的宽度,包含了内边距属性padding。-->
<div class="content padding has-header">
<button class="button button-block button-energized">button-energized</button>
</div>
<!--可以让按钮显示完全宽度,且不包含内边距padding。-->
<div class="content has-header">
<button class="button button-full button-assertive">button-assertive</button>
</div>
<!--不同大小的按钮-->
<div class="content padding has-header">
<p>
<button class="button button-small button-balanced">button-balanced</button>
</p>
<p>
<button class="button button-large button-energized">button-energized</button>
</p>
</div>
<!--设置背景为透明-->
<div class="content padding has-header">
<p>
<button class="button button-outline button-calm">button-calm</button>
</p>
</div>
<!--无背景与边框按钮-->
<div class="content padding has-header">
<p>
<button class="button button-clear button-balanced">button-balanced</button>
</p>
</div>
<!--图标按钮-->
<div class="content padding has-header">
<p>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
</p>
</div>
</body>
</html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>手册网基础教程(shouce.ren)</title>
<link rel="stylesheet" href="lib/css/ionic.min.css" />
<script type="text/javascript" src="lib/js/ionic.bundle.min.js" ></script>
</head>
<body>
<div class="bar bar-header">
<div class="h1 title">Buttons</div>
</div>
<div class="content has-header padding">
<!--<div class="content(容器) has-header(与头部) padding(有间距)">-->
<!--<button class="button(功能) button-light(颜色)">-->
<!--<button class="button(功能) button-block(它将完全填充父元素的宽度,包含了内边距属性padding) button-light(颜色)">-->
<!--<button class="button(功能) button-full(可以让按钮显示完全宽度,且不包含内边距padding) button-light"(颜色)>-->
<!--<button class="button button-small( 设置为小按钮) button-balanced">
<button class="button button-large( 设置为大按钮) button-energized">-->
<!--<button class="button button-outline(设置背景为透明) button-calm">-->
<!--<button class="button button-clear(无背景与边框按钮) button-balanced">-->
<!--<button class="button icon-left(图片在左边) ion-star(图片) button-positive">-->
<!--<a class="button icon-right(图片在右边) ion-chevron-right(图片) button-calm">-->
<!--<div class="card"(卡片)>-->
<!--<div class="item(功能条款) item-divider"(颜色)>
卡片头部!
</div>-->
<!--<div class="item item-text-wrap(text-wrap属性指定文本换行规则。)">
基本卡片,包含了文本信息。
</div>-->
<!--<div class="item item-divider">
卡片底部!
</div>-->
<!--</div> -->
<p><button class="button button-light">button-light</button>
</p><p><button class="button button-stable">button-stable</button>
</p>
</div>
<!--它将完全填充父元素的宽度,包含了内边距属性padding。-->
<div class="content padding has-header">
<button class="button button-block button-energized">button-energized</button>
</div>
<!--可以让按钮显示完全宽度,且不包含内边距padding。-->
<div class="content has-header">
<button class="button button-full button-assertive">button-assertive</button>
</div>
<!--不同大小的按钮-->
<div class="content padding has-header">
<p>
<button class="button button-small button-balanced">button-balanced</button>
</p>
<p>
<button class="button button-large button-energized">button-energized</button>
</p>
</div>
<!--设置背景为透明-->
<div class="content padding has-header">
<p>
<button class="button button-outline button-calm">button-calm</button>
</p>
</div>
<!--无背景与边框按钮-->
<div class="content padding has-header">
<p>
<button class="button button-clear button-balanced">button-balanced</button>
</p>
</div>
<!--图标按钮-->
<div class="content padding has-header">
<p>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
</p>
</div>
</body>
</html>