第十三讲ionic css布局介绍

ioniccss合作： (PhoneGap中文网)合作： (IT营).bar.bar-header-元素为标题.bar.bar-footer-元素为底.content.scroll-content-元素为内容样式.bar将元素为屏幕上绝对定位的块状区域，具有固定的高度（44px）：1.<any.bar.bar-header.bar-footer.bar<any<any<any将使用.bar的配色方案：<any<any<any- 元素作为<any<any<anyclass="button-bar}}}ionic预定义了两个内容容器样式：.contentIonicionic.icon-将元素为图.ion-{icon-name}-要使用的具体图<iclass="iconion-要了解有哪些图标及具体名称，需要。点击某个图标即可查看其CSS类名<anystyle="font-<iclass="iconion-Ionic<any<any<any<any<any图像（头像、缩略图或大图）、按钮等各种样式的元素：.item .item用.item-icon-left和.item-icon-right.item用.item-avatar-left和.item-avatar-right.item 注意：将img放到.item内容的开头！.itemitem-.item<divclass="list<div<div<divclass="itemitem-divider">I'maHeaderinaCard!<divclass="itemitem-text-ThisisabasicCardwithsome<div<divclass="itemitem-divider">I'maFooterinaCard!<any.button<a<iclass="iconion-<aclass="buttonicon-leftion-用.item-button-left和.item-button-right<buttonclass="buttonbutton-calmbutton-block">button-ionic.item-起。在这个模板的根元素上，需要.item-input样式：<anyclass="item- <divclass="item-<inputceholder="请输入你的用户账号"<anyclass="item-<inputceholder="..."<any<anyclass="itemitem-<anyclass="itemitem- <labelclass="itemitem-<iclass="iconion-ios-unlocked-outline<input <labelclass="itemitem-inputitem-stacked-<inputtype="text" .toggle<any<input<any<any<anyclass="item-<any<input.item-radio和描述内容<anyclass="item-<inputname="{group-name}"<anyclass="item-<anyclass="radio-iconion-<any<anyclass="itemitem-<anyclass="itemitem-.range<any<anyclass="icon{left-icon-<inputname="{range-name}"<anyclass="icon{right-icon- .item-select一个单选弹出窗，而iOS上是一个覆盖半个窗体的定制滚动器：<labelclass="item-inputitem-<anyclass="input-选项卡是一个可以包含多个按钮或的容器，通常用于提供一致的导航体验。ionic中使用.tabs样式选项卡，使用.tab-item样式选项卡成员<any<anyclass="tab-<anyclass="tab-tab-item.tab-item<any<anyclass="tab-itemhas-<any.tabs <anyclass="tabs-<any<anyclass="tab-<anyclass="tab-ionicCSS3（FlexibleBox）式填充可用空间。CSS3Flex.col是app的截图：.col-{width-percent}-webkit-box-flex:-webkit-flex:00-moz-box-flex:-mo