首页 » Framework7 » Framework7 组件
网站地图

栅格

Framework7 有灵活的布局网格,允许你按需求放置内容：

  1. <!-- Each "cells" row should be wrapped with div class="row" -->
  2. <div class="row">
  3.     <!-- Each "cell" has col-[widht in percents] class -->
  4.     <div class="col-50">50%</div>
  5.     <div class="col-50">50%</div>
  6. </div>   
  7. <div class="row">
  8.     <!-- Each "cell" has col-[widht in percents] class -->
  9.     <div class="col-33">33%</div>
  10.     <div class="col-33">33%</div>
  11.     <div class="col-33">33%</div>
  12. </div>

默认所有的“单元格”之间有15px的间距，如果你希望“单元格”之间没有间距，你应该在"row"后添加 "no-gutter" 类 :

  1. <!-- Additional "no-gutter" class on row to remove space between cells -->
  2. <div class="row no-gutter">
  3.     <!-- Each "cell" has col-[widht in percents] class -->
  4.     <div class="col-50">50%</div>
  5.     <div class="col-50">50%</div>
  6. </div>   
  7. <div class="row">
  8.     <!-- Each "cell" has col-[widht in percents] class -->
  9.     <div class="col-33">33%</div>
  10.     <div class="col-33">33%</div>
  11.     <div class="col-33">33%</div>
  12. </div>

以下尺寸是可供选择的：

ClassTablet Class
When window width >= 768px		Width
col-5tablet-55%
col-10tablet-1010%
col-15tablet-1515%
col-20tablet-2020%
col-25tablet-2525%
col-33tablet-3333.333333333333336%
col-40tablet-4040%
col-50tablet-5050%
col-60tablet-6060%
col-66tablet-6666.66666666666666%
col-75tablet-7575%
col-80tablet-8080%
col-85tablet-8585%
col-90tablet-9090%
col-95tablet-9595%
col-100tablet-100100%
col-autotablet-autoEqual width

用法示例

默认情况下表格列(单元)没有任何视觉样式,我们将他们添加到这个demo里：

  1. div[class*="col-"] {
  2.   background: #fff;
  3.   text-align: center;
  4.   color: #000;
  5.   border: 1px solid #ddd;
  6.   padding: 5px;
  7. }
  8. .row {
  9.   margin-bottom: 15px;
  10. }

实例预览

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block-title">Columns with gutter</div>
  5.     <div class="content-block">
  6.       <div class="row">
  7.         <div class="col-50">50%</div>
  8.         <div class="col-50">50%</div>
  9.       </div>
  10.       <div class="row">
  11.         <div class="col-25">25%</div>
  12.         <div class="col-25">25%</div>
  13.         <div class="col-25">25%</div>
  14.         <div class="col-25">25%</div>
  15.       </div>
  16.       <div class="row">
  17.         <div class="col-33">33%</div>
  18.         <div class="col-33">33%</div>
  19.         <div class="col-33">33%</div>
  20.       </div>
  21.       <div class="row">
  22.         <div class="col-20">20%</div>
  23.         <div class="col-20">20%</div>
  24.         <div class="col-20">20%</div>
  25.         <div class="col-20">20%</div>
  26.         <div class="col-20">20%</div>
  27.       </div>
  28.       <div class="row">
  29.         <div class="col-33">33%</div>
  30.         <div class="col-66">66%</div>
  31.       </div>
  32.       <div class="row">
  33.         <div class="col-25">25%</div>
  34.         <div class="col-25">25%</div>
  35.         <div class="col-50">50%</div>
  36.       </div>
  37.       <div class="row">
  38.         <div class="col-75">75%</div>
  39.         <div class="col-25">25%</div>
  40.       </div>
  41.       <div class="row">
  42.         <div class="col-80">80%</div>
  43.         <div class="col-20">20%</div>
  44.       </div>
  45.     </div>
  46.     <div class="content-block-title">No gutter between columns</div>
  47.     <div class="content-block">
  48.       <div class="row no-gutter">
  49.         <div class="col-50">50%</div>
  50.         <div class="col-50">50%</div>
  51.       </div>
  52.       <div class="row no-gutter">
  53.         <div class="col-25">25%</div>
  54.         <div class="col-25">25%</div>
  55.         <div class="col-25">25%</div>
  56.         <div class="col-25">25%</div>
  57.       </div>
  58.       <div class="row no-gutter">
  59.         <div class="col-33">33%</div>
  60.         <div class="col-33">33%</div>
  61.         <div class="col-33">33%</div>
  62.       </div>
  63.       <div class="row no-gutter">
  64.         <div class="col-20">20%</div>
  65.         <div class="col-20">20%</div>
  66.         <div class="col-20">20%</div>
  67.         <div class="col-20">20%</div>
  68.         <div class="col-20">20%</div>
  69.       </div>
  70.       <div class="row no-gutter">
  71.         <div class="col-33">33%</div>
  72.         <div class="col-66">66%</div>
  73.       </div>
  74.       <div class="row no-gutter">
  75.         <div class="col-25">25%</div>
  76.         <div class="col-25">25%</div>
  77.         <div class="col-50">50%</div>
  78.       </div>
  79.       <div class="row no-gutter">
  80.         <div class="col-75">75%</div>
  81.         <div class="col-25">25%</div>
  82.       </div>
  83.       <div class="row no-gutter">
  84.         <div class="col-80">80%</div>
  85.         <div class="col-20">20%</div>
  86.       </div>
  87.     </div>
  88.  
  89.     <div class="content-block-title">Nested</div>
  90.     <div class="content-block">
  91.       <div class="row">
  92.         <div class="col-50">50%
  93.           <div class="row">
  94.             <div class="col-50">50%</div>
  95.             <div class="col-50">50%</div>
  96.           </div>
  97.         </div>
  98.         <div class="col-50">50%
  99.           <div class="row">
  100.             <div class="col-33">33%</div>
  101.             <div class="col-66">66%</div>
  102.           </div>
  103.         </div>
  104.       </div>
  105.     </div>
  106.   </div>
  107.  
  108.   <div class="content-block-title">Responsive Grid</div>
  109.   <div class="content-block">
  110.     <p>Grid cells have different size on Phone/Tablet</p>
  111.     <div class="row">
  112.       <div class="col-100 tablet-50">.col-100.tablet-50</div>
  113.       <div class="col-100 tablet-50">.col-100.tablet-50</div>
  114.     </div>
  115.     <div class="row">
  116.       <div class="col-50 tablet-25">.col-50.tablet-25</div>
  117.       <div class="col-50 tablet-25">.col-50.tablet-25</div>
  118.       <div class="col-50 tablet-25">.col-50.tablet-25</div>
  119.       <div class="col-50 tablet-25">.col-50.tablet-25</div>
  120.     </div>
  121.     <div class="row">
  122.       <div class="col-100 tablet-40">.col-100.tablet-40</div>
  123.       <div class="col-50 tablet-60">.col-50.tablet-60</div>
  124.       <div class="col-50 tablet-66">.col-50.tablet-66</div>
  125.       <div class="col-100 tablet-33">.col-100.tablet-33</div>
  126.     </div>
  127.   </div>          
  128.  
  129.   <div class="content-block-title">COLUMNS WITH EQUAL WIDTH</div>
  130.   <div class="content-block">
  131.     <div class="row">
  132.       <div class="col-auto">.col-auto</div>
  133.       <div class="col-auto">.col-auto</div>
  134.     </div>
  135.     <div class="row">
  136.       <div class="col-auto">.col-auto</div>
  137.       <div class="col-auto">.col-auto</div>
  138.       <div class="col-auto">.col-auto</div>
  139.     </div>
  140.     <div class="row">
  141.       <div class="col-auto">.col-auto</div>
  142.       <div class="col-auto">.col-auto</div>
  143.       <div class="col-auto">.col-auto</div>
  144.       <div class="col-auto">.col-auto</div>
  145.     </div>
  146.     <div class="row no-gutter">
  147.       <div class="col-auto">.col-auto</div>
  148.       <div class="col-auto">.col-auto</div>
  149.       <div class="col-auto">.col-auto</div>
  150.       <div class="col-auto">.col-auto</div>
  151.       <div class="col-auto">.col-auto</div>
  152.     </div>
  153.   </div>          
  154.   ...
  155. </body>