第十三講ionic css布局介紹

ioniccss合作： (PhoneGap中文網(wǎng))合作： (IT營).bar.bar-header-元素為標(biāo)題.bar.bar-footer-元素為底.content.scroll-content-元素為內(nèi)容樣式.bar將元素為屏幕上絕對定位的塊狀區(qū)域，具有固定的高度（44px）：1.<any.bar.bar-header.bar-footer.bar<any<any<any將使用.bar的配色方案：<any<any<any- 元素作為<any<any<anyclass="button-bar}}}ionic預(yù)定義了兩個內(nèi)容容器樣式：.contentIonicionic.icon-將元素為圖.ion-{icon-name}-要使用的具體圖<iclass="iconion-要了解有哪些圖標(biāo)及具體名稱，需要。點擊某個圖標(biāo)即可查看其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內(nèi)容的開頭！.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和描述內(nèi)容<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-選項卡是一個可以包含多個按鈕或的容器，通常用于提供一致的導(dǎo)航體驗。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