基本布局样式
布局
- 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>.bar的基本布局</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> </head> <body > <div class="bar bar-header bar-positive"> 这里是头部 </div> <div class="bar bar-subheader bar-stable"> 这里是副标题 </div> <!--添加内容的位置--> <div class="bar bar-footer bar-positive"> 这里是底部 </div> </body> </html>
子元素
<h1 class="title">新闻</h1>
<a class="button">搜索</a>
<div class="button-bar">体育</div>
为定稿块嵌入子元素
<div class="bar bar-header bar-energized item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="输入用户名搜索">
</label>
</div>
内容区域
颜色
<li class="item light light-border dark-bg">
light
</li>
徽章
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
新消息
<span class="badge badge-assertive">5</span>
</a>
</div>
图标
<i class="icon ion-search" style="font-size: 20px"></i>
按钮
<a class="button button-light">button-light</a>
<a class="button button-royal button-block">button-block</a>
<!-- button-outline 透明按钮 -->
<a class="button button-royal button-outline">button-block</a>
<!-- button-clear 不显示背景和边框 -->
<a class="button button-royal button-clear ">button-clear</a>
<div class="button-bar">
<a class="button button-royal ion-star icon-left">收藏</a>
<a class="button button-calm ion-chevron-right icon-right">更多</a>
</div>
列表
列表分隔符
<div class="list">
<a class="item" href="#">item</a>
<!-- 列表分隔符 -->
<div class="item item-divider" href="#">item-divider</div>
<a class="item" href="#">item</a>
<a class="item" href="#">item</a>
<a class="item" href="#">item</a>
<a class="item" href="#">item</a>
</div>
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-android-person-add"></i>
添加好友
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-android-people"></i>
群聊
</a>
</div>
<div class="list">
<div class="item item-divider" href="#">A</div>
<a class="item item-avatar" href="#">
<img src="img/demo9-14/abby.jpg">
Abby
</a>
</div>
<div class="card">
<a class="item item-thumbnail-right" href="#">
<img src="img/demo9-15/一条狗的使命.jpg">
<h2>《一条狗的使命》</h2>
<p>影片以汪星人的视角展现狗狗和人类的微妙情感</p>
</a>
</div>
表单
<ul class="list">
<li class="item item-divider" href="#">普通输入框</li>
<li class="item item-input">
<span class="input-label">用户名</span>
<input type="text" placeholder="请输入用户名">
</li>
<li class="item item-divider" href="#">带图标的输入框</li>
<li class="item item-input">
<i class="icon ion-search"></i>
<input type="text" placeholder="请输入搜索内容">
</li>
<li class="item item-divider" href="#">堆叠标签式输入框</li>
<li class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="me@itcast.cn">
</li>
</ul>
<ul class="list">
<li class="item item-divider royal-bg" href="#">复选框</li>
<li class="item item-checkbox">
<label class="checkbox ">
<input type="checkbox" checked>
</label>
铃声
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
振动
</li>
<li class="item item-divider royal-bg" >开关</li>
<li class="item item-toggle">
通知
<label class="toggle toggle-positive">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-divider royal-bg" >单选按钮</li>
<li class="item item-radio">
<input type="radio" name="sex" checked>
<div class="radio-content">
<div class="item-content">
女
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</li>
<li class="item item-radio">
<input type="radio" name="sex">
<div class="radio-content">
<div class="item-content">
男
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</li>
</ul>
<ul class="list">
<li class="item item-divider royal-bg" href="#">选择框</li>
<li class="item item-input item-select">
<label class="input-label">
请选择
</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</li>
<li class="item item-divider royal-bg" href="#">滑动条</li>
<li class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" class="range-dark">
<i class="icon ion-volume-high"></i>
</li>
</ul>
<div class="tabs tabs-stable tabs-color-dark tabs-striped">
<a class="tab-item active tab-item-balanced">
<b>消息</b>
</a>
<a class="tab-item ">
<b>联系人</b>
</a>
<a class="tab-item disabled" >
<b>动态</b>
</a>
</div>
<div class=" tabs tabs-top tabs-dark tabs-icon-top" style="top:0px">
<a class="tab-item active tab-item-balanced" href="#">
<i class="icon ion-chatbubble-working"></i>
消息
</a>
<a class="tab-item" href="#">
<i class="icon ion-person-stalker"></i>
联系人
</a>
<a class="tab-item" href="#">
<i class="icon ion-social-tux"></i>
动态
</a>
</div>
栅格类系统样式
基本行与列
<div class="row">
<div class="col royal-bg">.col</div>
<div class="col dark-bg">.col</div>
<div class="col energized-bg">.col</div>
<div class="col calm-bg">.col</div>
<div class="col positive-bg">.col</div>
</div>
指定列宽
<div class="row">
<div class="col col-50 balanced-bg">.col.col-50</div>
<div class="col positive-bg">.col</div>
<div class="col assertive-bg">.col</div>
</div>
<div class="row">
<div class="col col-75 energized-bg">.col.col-75</div>
<div class="col dark-bg">.col</div>
</div>
<div class="row">
<div class="col calm-bg">.col</div>
<div class="col royal-bg">.col</div>
</div>
指定列偏移
<div class="row">
<div class="col col-33 col-offset-33 positive-bg">.col</div>
<div class="col calm-bg col-offset-10">.col</div>
</div>
列表纵向对齐
<body>
<div class="row">
<div class="col balanced-bg">默认效果<br>*<br>*<br>*</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col balanced-bg">元素对齐<br>*<br>*<br>*</div>
<div class="col col-top">.col-top</div>
<div class="col col-center">.col-center</div>
<div class="col col-bottom">.col-bottom</div>
</div>
<div class="row row-top">
<div class="col balanced-bg">.row-top<br>*<br>*<br>*</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row row-center">
<div class="col balanced-bg">.row-center<br>*<br>*<br>*</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row row-bottom">
<div class="col balanced-bg">.row-bottom<br>*<br>*<br>*</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</body>
响应式栅格
<div class="row">
<div class="col">col-1</div>
<div class="col">col-2</div>
<div class="col">col-3</div>
<div class="col">col-4</div>
</div>
<div class="row responsive-sm">
<div class="col">col-1</div>
<div class="col">col-2</div>
<div class="col">col-3</div>
<div class="col">col-4</div>
</div>