VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 均衡器(Equalizer)

我们可以在容器元素添加 data-equalizer 属性,并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例


  1. <div class="row" data-equalizer>
  2.   <div class="medium-4 columns panel" data-equalizer-watch>
  3.     Lorem ipsum...
  4.   </div>
  5.   <div class="medium-4 columns panel" data-equalizer-watch>
  6.     Sed ut...
  7.   </div>
  8.   <div class="medium-4 columns panel" data-equalizer-watch>
  9.     Lorem ipsum...
  10.   </div>
  11. </div>
  12.  
  13. <!-- Initialize Foundation JS -->
  14. <script>
  15. $(document).ready(function() {
  16.     $(document).foundation();
  17. })
  18. </script>
复制
实例预览 »

不同屏幕的均衡器

在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一:

描述 实例
medium-up 默认。 创建相同高度的容器,宽度大于 40.063em  
large-up 创建相同高度的容器,宽度大于 64.063em 实例预览
xlarge-up 创建相同高度的容器,宽度大于 90.063em 实例预览
xxlarge-up 创建相同高度的容器,宽度大于 120.063em 实例预览

嵌套内容

为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器,确保他们是匹配的:

实例


  1.  <!-- The Equalized Container -->
  2. <div class="row" data-equalizer="first">
  3.   <div class="medium-4 columns">
  4.     <div class="panel" data-equalizer-watch="first">
  5.       <h3>Panel</h3>
  6.  
  7.       <!-- An Equalized Container Inside The Equalized Container -->
  8.       <div class="row" data-equalizer="second">
  9.         <div class="panel" data-equalizer-watch="second">
  10.           <h3>Nested Panel</h3>
  11.           <p>Lorem ipsum...</p>
  12.         </div>
  13.         <div class="panel" data-equalizer-watch="second">
  14.           <h3>Nested Panel</h3>
  15.           <p>Lorem ipsum...</p>
  16.         </div>
  17.         <div class="panel" data-equalizer-watch="second">
  18.           <h3>Nested Panel</h3>
  19.           <p>Lorem ipsum...</p>
  20.         </div>
  21.       </div>
  22.       <!-- End Nested Equalized Container -->
  23.  
  24.     </div>
  25.   </div>
  26.   <div class="medium-4 columns">
  27.     <div class="panel" data-equalizer-watch="first">
  28.       <h3>Panel</h3>
  29.       <p>Ut enim...</p> 
  30.     </div>
  31.   </div>
  32.   <div class="medium-4 columns">
  33.     <div class="panel" data-equalizer-watch="first">
  34.       <h3>Panel</h3>
  35.       <p>Lorem ipsum....</p>
  36.     </div>
  37.   </div>
  38. </div>
复制
实例预览 »
 

相关教程