ionic.css 布局是基于flex的，虽然没有bootstrap那么丰富，但基本的布局还是满足的。提供了字体的图标，可以自定义颜色。还是能基本满足icon需求吧。。。当然还是需要自己定义很多css 或者 覆盖原来的。入门的写下，也不知道对不对。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="../lib/css/ionic.min.css"/>
<link rel="stylesheet" type="text/css" href="bm.css"/>
</head>
<body>
<header class="bar bar-header">
<a href="javascript:;" class="icon-right ion-arrow-down-b button button-clear">成都</a>
<label class="item item-input stable-dark icon ion-search">
<input type="search" class="dark" placeholder="search"/>
</label>
</header>
<div class="content has-header">
<div class="list banner">
<a class="item item-image">
<img src="aa.jpg">
</a>
</div>
<a href="#" class="addr list">
<span class="item item-icon-right">
以父之名
<i class="icon ion-navigate">店铺导航 </i>
</span>
</a>
<div class="list play u-list">
<div class="u-title"><em class="prefix">参</em>参加报名</div>
<div class="item item-image">
<img src="aa.jpg"/>
</div>
</div>
<div class="list u-list">
<div class="u-title"><em class="prefix">周</em>龙卷风</div>
<div class="row item">
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
</div>
<div class="row item">
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
<a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
</div>
</div>
</div>
<div class="tabs tabs-icon-top">
<div class="tab-item">
<i class="icon ion-ios-home-outline"></i>首页
</div>
<div class="tab-item">
<i class="icon ion-ios-keypad-outline"></i>
分类
</div>
<div class="tab-item">
<i class="icon ion-ios-cart-outline"></i>
购物车
</div>
<div class="tab-item">
<i class="icon ion-ios-person-outline"></i>
会员
</div>
<div class="tab-item">
<i class="icon ion-ios-more-outline"></i>
更多
</div>
</div>
</body>
</html>
html, body {
font-family: "SimHei","Helvetica Neue",Arial,"Droid Sans", sans-serif;
background-color: #f0f0f0;
}
html{
overflow: visible;
}
a{
text-decoration: none;
}
.u-list{
margin-top: 5px;
margin-bottom: 0;
background-color: #ffffff;
}
.u-title{
padding: 4px 2.66666667%;
}
.u-list .row{
padding: 0;
}
.u-list .col-33{
margin: 0 0.5%;
}
.u-list .col-33 img{
max-width: 100%;
}
.u-list .col-33{
text-align: center;
}
.row.item{
border: 0;
}
.prefix{
display: block;
font-size: 12px;
height: 14px;
width: 14px;
color: #fff;
text-align: center;
line-height: 14px;
float: left;
margin: 3px 4px 0 0;
background-color: #4198f7;
}
.bar-header{
background-color: #ff332a;
}
.bar-footer{
background-color: #333333;
}
.bar-header .button-clear.button{
font-size: 13px;
color: #ffffff;
}
.bar.bar-header .button.button-clear:before{
font-size: inherit;
}
.bar-header .item-input{
border: 1px solid #dcdcdc;
border-radius: 5px;
width: 70%;
margin-left: 5%;
}
.bar-header .ion-search:before{
margin-right: 5px;
color: inherit;
color: #b2b2b2;
}
.banner.list{
padding: 0;
margin-bottom: 0;
}
.banner .item{
border-width: 0;
}
.tabs{
background-color: #333333;
color: #ffffff;
}
.tabs-icon-top.tabs .tab-item{
font-size: 12px;
line-height: 11px;
}
.tab-item .icon:before{
color: #inherit;
font-size: 32px;
}
.addr .item .icon{
font-size: 16px;
}
.addr .item{
padding-top: 8px;
padding-bottom: 8px;
}
.addr .ion-navigate:after {
text-align: center;
display: block;
content: "\f2a3";
font-family: Ionicons;
}
.addr .ion-navigate:before{
display: none;
}