1、ionicionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和Javascript 構建接近原生體驗的移動應用程序。ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。ionic 是一個輕量機UI 庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些 UI 庫在上運行緩慢，它直接放棄了 IOS6和 Android4.1 以下的版本支持，來獲取更好的使用體驗。ionic 特點1

2、.ionic基于 Angular 語法，簡單易學。2.ionic是一個輕量級框架。3.ionic完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易。4.ionic提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。5.ionic專注原生，讓你看不出混合應用和原生的區別6.ionic提供了強大令行工具。7.ionic性能優越，運行速度快。命令行安裝npm install -g cordova ionic創建應用使用 ionic提供的現成的應用程序模板，或一個空白的項目創建一個ionic 應用：ionic start my

3、App tabsionic 創建 APP前面的章節中已經學會了 ionic 框架如何導入到項目中。接下來為大家介紹如何創建一個 ionic APP 應用。ionic 創建 APP 使用 HTML、CSS 和 Javascript 來構建，所以可以創建一個 www 目錄，并在目錄下創建 index.html 文件，代碼如下：Todobar-itive以上代碼中，引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 擴展 ionic.bundle.jic.bundle.js）。ionic.bundle.js 文件已經包含了 IonicJS、AngularJi

4、c 的 AngularJS 擴展，如果你需要引入其他 Angular 模塊，可以從 lib/js/angular 目錄中調用。ionic 頭部與底部Header(頭部)Header 是固定在屏幕頂部的組件,可以標題和左右的功能按鈕。ionic 默認提供了許多種顏色樣式，你可以調用不同的樣式名，當然也可以自定義一個。bar-lightbar-stablebar-itivebar-calmbar-balancedbar-energizedbar-assertivebar-royalbar-darkSub Header（副標題）Sub Header 同樣是固定在頂部，只是是在 Header 的下面，

5、就算沒有寫 Header 這個，Sub Header 這個樣式也會距離頂部有一個 Header 的距離。顏色樣式同 Header 。Sub Header 同樣是固定在頂部，只是是在 Header 的下面，就算沒有寫 Header 這個，Sub Header 這個樣式也會距離頂部有一個 Header 的距離。顏色樣式同 Header 。HeaderSub HeaderFooter(底部)Footer 是在屏幕的最下方，可以包含多種內容類型Footer 是在屏幕的最下方，可以包含多種內容類型。Footer嘗試一下 Footer 同上面的 Header，只是把樣式名 bar-header 換做 ba

6、r-footer 。LeftTitleRight此外，如果底部沒有標題，但是又需要右邊的按鈕，你需要在右側按鈕添加 pull-right 如:Rightionic 按鈕按鈕是移動app 不可或缺的一部分，不同風格的 app，需要的不同按鈕的樣式。默認情況下，按鈕顯示樣式為：display: inline-block。button class=button Defaultbutton-light button-itivebutton-block 樣式按鈕顯示為：display: block，它將完全填充父元素的寬度，包含了內邊距屬性 padding。Block Button使用 button-f

7、ull 類，可以讓按鈕顯示完全寬度，且不包含內邊距padding。Full Width Block Button不同大小的按鈕button-large 設置為大按鈕，button-small 設置為小按鈕。Small ButtonLarge Button無背景按鈕button-outline 設置背景為透明。Outlined Button無背景與邊框按鈕button-clear 設置按鈕背景為透明，且無邊框。Clear Button圖標按鈕可以在按鈕上添加圖標。 Loading.Home button-calm button-balanced button-energized button-assertive button-royalbutton-dark button-stableFavoritesLearn MoreBackReorder頭部/底部添加按鈕頭部/底部可以添加按鈕，按鈕的樣式根據頭部/底部來設定，所以你不需要為按鈕添加額外的樣式。Header But