頭部導(dǎo)入ionic.min.CSS

1.ionic柵格Grid

        1）ionic 的柵格(Grid)和其他大部分框架有所不同，它采用了彈性盒子模型(Flexible Box Model) 。 而且在移動(dòng)端，基本上的手機(jī)都支持flexbox。row 樣式指定行，col 樣式指定列。

         2）在row簡(jiǎn)單添加columns,columns會(huì)被平分row的空間. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic沒(méi)有12列的限制,也沒(méi)有列大小的限制. 你還可以在每個(gè)列中設(shè)置垂直居中.

       3）row 類是用來(lái)定義行, col 是用來(lái)定義列. 可以有4列和2列.也可以用3, 6, 7, 23 等等, 不重要. 關(guān)鍵在于創(chuàng)建你想要的列,不用擔(dān)心他們的占位百分比, 因?yàn)槎际亲詣?dòng)的.

       注意：例子中添加了邊框和灰色背景以便于能夠被清晰的看到行列結(jié)構(gòu)。<style type="text/css">

.addCss {height:600px;}.row>div{border: 1px solid #333;}</style>

<div class="content has-header addCss">			<div class="row">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			</div></div>
1.2指定寬度柵格
        可以 設(shè)定一行中各個(gè)列的大小不一樣。默認(rèn)情況下，列都會(huì)被劃分為同等大小。但你也可以按百分比來(lái)設(shè)置列的寬度（一行為 12 個(gè)柵格）。使用柵格系統(tǒng)的好處在于你只需要指明你需要的列占位百分比即可,其他的列就會(huì)被平均分配使用剩下的空間.
1.3柵格偏移
       默認(rèn)左側(cè)偏移col-offset-偏移量
<div class="content has-header addCss">			<div class="row">			  <div class="col col-33 col-offset-33">.col</div>  			  <div class="col">.col</div>			</div>			<div class="row">			  <div class="col col-33">.col</div>  			  <div class="col col-33 col-offset-33">.col</div>			</div>			<div class="row">			  <div class="col col-33 col-offset-67">.col</div>			</div></div>
1.4縱向?qū)R
<div class="content has-header addCss">			<div class="row">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row">			  <div class="col col-top">.col</div>			  <div class="col col-center">.col</div>			  <div class="col col-bottom">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-top">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-center">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div>			<div class="row row-bottom">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">1<br>2<br>3<br>4</div>			</div></div>
1.5響應(yīng)式柵格respondive grid
手持設(shè)備屏幕在切換時(shí)，例如橫屏，豎屏等。就需要設(shè)置每行的柵格可以實(shí)現(xiàn)根據(jù)不同寬度自適應(yīng)大小。
responsive-sm  小于手機(jī)橫屏
responsive-md          小于平板豎屏
responsive-lg 小于平板橫屏
<div class="content has-header addCss">			<div class="row responsive-sm">			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			  <div class="col">.col</div>			</div></div>