ionicCSS08_柵格

2024-04-27 15:11:39

字體：大中小

來源：轉載

供稿：網友

頭部導入ionic.min.CSS

1.ionic柵格Grid

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

2）在row簡單添加columns,columns會被平分row的空間. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic沒有12列的限制,也沒有列大小的限制. 你還可以在每個列中設置垂直居中.

3）row 類是用來定義行, col 是用來定義列. 可以有4列和2列.也可以用3, 6, 7, 23 等等, 不重要. 關鍵在于創建你想要的列,不用擔心他們的占位百分比, 因為都是自動的.

注意：例子中添加了邊框和灰色背景以便于能夠被清晰的看到行列結構。<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指定寬度柵格
        可以 設定一行中各個列的大小不一樣。默認情況下，列都會被劃分為同等大小。但你也可以按百分比來設置列的寬度（一行為 12 個柵格）。使用柵格系統的好處在于你只需要指明你需要的列占位百分比即可,其他的列就會被平均分配使用剩下的空間.
1.3柵格偏移
       默認左側偏移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縱向對齊
<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響應式柵格respondive grid
手持設備屏幕在切換時，例如橫屏，豎屏等。就需要設置每行的柵格可以實現根據不同寬度自適應大小。
responsive-sm  小于手機橫屏
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>