VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 网格实例

三个均等列

该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：

实例



    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="medium-4 columns" style="background-color:yellow;">
    3. 

  3. 
    <p>.medium-4</p>
    4. 

  4. 
  </div>
    5. 

  5. 
  <div class="medium-4 columns" style="background-color:pink;">
    6. 

  6. 
    <p>.medium-4</p>
    7. 

  7. 
  </div>
    8. 

  8. 
  <div class="medium-4 columns" style="background-color:yellow;">
    9. 

  9. 
    <p>.medium-4</p>
    10. 

  10. 
  </div>
    11. 

  11. 
</div>
    12. 




复制

实例预览 »



三个不均等列



该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠：





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="medium-3 columns" style="background-color:yellow;">
    3. 

  3. 
    <p>.medium-3</p>
    4. 

  4. 
  </div>
    5. 

  5. 
  <div class="medium-6 columns" style="background-color:pink;">
    6. 

  6. 
    <p>.medium-6</p>
    7. 

  7. 
  </div>
    8. 

  8. 
  <div class="medium-3 columns" style="background-color:yellow;">
    9. 

  9. 
    <p>.medium-3</p>
    10. 

  10. 
  </div>
    11. 

  11. 
</div>
    12. 




复制

实例预览 »



两个均等列



该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%：





实例




    

  1. 
<div class="row">
    2. 

  2. 
  <div class="small-6 columns" style="background-color:yellow;">
    3. 

  3. 
    <p>.small-6</p>
    4. 

  4. 
  </div>
    5. 

  5. 
  <div class="small-6 columns" style="background-color:pink;">
    6. 

  6. 
    <p>.small-6</p>
    7. 

  7. 
  </div>
    8. 

  8. 
</div>
    9. 




复制

实例预览 »



两个不均等列



该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%：





实例




    

  1. 
<div class="row">
    2. 

  2. 
  <div class="small-8 columns" style="background-color:yellow;">
    3. 

  3. 
    <p>.small-8</p>
    4. 

  4. 
  </div>
    5. 

  5. 
  <div class="small-4 columns" style="background-color:pink;">
    6. 

  6. 
    <p>.small-4</p>
    7. 

  7. 
  </div>
    8. 

  8. 
</div>
    9. 




复制

实例预览 »



修改列的顺序



通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:





实例




    

  1. 
<div class="row">
    2. 

  2. 
  <div class="small-4 small-8-push columns" style="background-color:yellow;">
    3. 

  3. 
    <p>.small-4 .small-8-push</p>
    4. 

  4. 
  </div>
    5. 

  5. 
  <div class="small-8 small-4-pull columns" style="background-color:pink;">
    6. 

  6. 
    <p>.small-8 .small-4-pull</p>
    7. 

  7. 
  </div>
    8. 

  8. 
</div>
    9. 




复制

实例预览 »



嵌套列



你可以使用嵌套网格(列中插入列):





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="small-8 columns">.small-8
    3. 

  3. 
    <div class="row">
    4. 

  4. 
      <div class="small-8 columns">.small-8 Nested
    5. 

  5. 
        <div class="row">
    6. 

  6. 
          <div class="small-8 columns">.small-8 Nested Again</div>
    7. 

  7. 
          <div class="small-4 columns">.small-4</div>
    8. 

  8. 
        </div>
    9. 

  9. 
      </div>
    10. 

  10. 
      <div class="small-4 columns">.small-4</div>
    11. 

  11. 
    </div>
    12. 

  12. 
  </div>
    13. 

  13. 
  <div class="small-4 columns">.small-4</div>
    14. 

  14. 
</div>
    15. 




复制

实例预览 »



混合：手机、桌面设备



Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：



提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="small-6 large-8 columns">.small-6 .large-8</div>
    3. 

  3. 
  <div class="small-6 large-4 columns">.small-6 .large-4</div>
    4. 

  4. 
</div>
    5. 

  5. 
<div class="row">
    6. 

  6. 
  <div class="small-2 large-4 columns">.small-2 .large-2</div>
    7. 

  7. 
  <div class="small-4 large-4 columns">.small-4 .large-2</div>
    8. 

  8. 
  <div class="small-6 large-4 columns">.small-6 .large-2</div>
    9. 

  9. 
</div>
    10. 

  10. 
<div class="row">
    11. 

  11. 
  <div class="small-3 large-5 columns">.small-3 .large-5</div>
    12. 

  12. 
  <div class="small-9 large-7 columns">.small-9 .large-7</div>
    13. 

  13. 
</div>
    14. 




复制

实例预览 »



混合：手机、平板和桌面设备





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="medium-6 large-8 columns">.medium-6 .large-8</div>
    3. 

  3. 
  <div class="medium-6 large-4 columns">.medium-6 .large-4</div>
    4. 

  4. 
</div>
    5. 

  5. 
<div class="row">
    6. 

  6. 
  <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div>
    7. 

  7. 
  <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div>
    8. 

  8. 
  <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div>
    9. 

  9. 
</div>
    10. 




复制

实例预览 »



居中列



列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered。





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="small-4 small-centered columns">small-4 small-centered</div>
    3. 

  3. 
</div>
    4. 

  4. 
<div class="row">
    5. 

  5. 
  <div class="small-6 small-centered columns">small-6 small-centered</div>
    6. 

  6. 
</div>
    7. 

  7. 
<div class="row">
    8. 

  8. 
  <div class="small-6 large-centered columns">small-6 large-centered</div>
    9. 

  9. 
</div>
    10. 

  10. 
<div class="row">
    11. 

  11. 
  <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
    12. 

  12. 
</div>
    13. 

  13. 
<div class="row">
    14. 

  14. 
  <div class="small-10 small-centered columns">small-10 small-centered</div>
    15. 

  15. 
</div>
    16. 




复制

实例预览 »



列偏移量



可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="large-1 columns">1</div>
    3. 

  3. 
  <div class="large-11 columns">11</div>
    4. 

  4. 
</div>
    5. 

  5. 
<div class="row">
    6. 

  6. 
  <div class="large-1 columns">1</div>
    7. 

  7. 
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
    8. 

  8. 
</div>
    9. 

  9. 
<div class="row">
    10. 

  10. 
  <div class="large-1 columns">1</div>
    11. 

  11. 
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
    12. 

  12. 
</div>
    13. 

  13. 
<div class="row">
    14. 

  14. 
  <div class="large-1 columns">1</div>
    15. 

  15. 
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
    16. 

  16. 
</div>
    17. 




复制

实例预览 »



不完整列



如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。



可选项  .end 类用于设置最后一列的元素向左边浮动:





实例




    

  1. 
 <div class="row">
    2. 

  2. 
  <div class="medium-3 columns">.medium-3</div>
    3. 

  3. 
  <div class="medium-3 columns">.medium-3</div>
    4. 

  4. 
  <div class="medium-3 columns">.medium-3</div>
    5. 

  5. 
</div>
    6. 

  6. 
<div class="row">
    7. 

  7. 
  <div class="medium-3 columns">.medium-3</div>
    8. 

  8. 
  <div class="medium-3 columns">.medium-3</div>
    9. 

  9. 
  <div class="medium-3 columns end">.medium-3 .end</div>
    10. 

  10. 
</div>
    11. 




复制

实例预览 »



宽屏



网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的  max-width:





实例




    

  1. 
<style>
    2. 

  2. 
.row {
    3. 

  3. 
    max-width: 100%;
    4. 

  4. 
}
    5. 

  5. 
</style>
    6. 




复制

实例预览 »



如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row 类，并指定你需要的背景颜色:





实例




    

  1. 
 <div style="background-color:coral;padding:25px;">
    2. 

  2. 
  <div class="row">
    3. 

  3. 
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    4. 

  4. 
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
    5. 

  5. 
  </div>
    6. 

  6. 
</div>
    7. 




复制

实例预览 »



 






    













相关教程