按钮
来源：互联网 发布：研究院所 软件 百分点 编辑：程序博客网 时间：2024/04/28 04:35
<!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>
阅读全文
0 0
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 按钮
- 8种状语从句
- SSM学习完后随想之Spring
- Http Cookie详解
- [Leetcode][python]Palindrome Partitioning/Palindrome Partitioning II
- TensorFlow r1.4 从源码编译安装
- 按钮
- C++ 友元函数/实际使用的一些注意事项/重复定义
- Yii2 rbac权限控制详解
- 《七点三刻》有价值的新闻早餐 2017年11月16日星期四，第007期
- Learning Spark笔记16-调试Spark
- 300. Longest Increasing Subsequence
- day 23 Linux Shell基础
- 以太坊重放攻击
- Yii 框架自带rbac (文件版)
