Foundation 学习

官网 Foundation是个跟bootstrap齐名的前端框架。

 

移动优先，响应式，最低支持IE8。 html+css+jq构建

网格Grid

Basic:

• .row父容器 子元素类.column 改子元素表明列，需要与网格同时使用
• small-1表明列占用1个单位宽度 large-1同样的意思， small-*表明小屏幕上 large-*表明大屏幕 默认12列网格 允许设置最大16列
• push-* pull-3控制列的位置 需要配合前面的网格一起使用。搭配使用可以让某列在大屏幕下居左 小屏幕下居右

块网格：

块网格是在不管屏幕的大小，使得列表元素都可以均匀的分布。特别是对块状的内容来说更为理想，

使用这些类small-block-grid-* large-block-grid-* 替换之前的small-12 large-12

Orbit slider插件

演示地址 html:

    <ul class="example-orbit" data-orbit>
      <li>
        <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
        <div class="orbit-caption">
          Caption One.
        </div>
      </li>
      <li>
        <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
        <div class="orbit-caption">
          Caption Two.
        </div>
      </li>
      <li>
        <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
        <div class="orbit-caption">
          Caption Three.
        </div>
      </li>
    </ul>

　　

js:

     $(document).foundation(); //默认全局启动js 

     //如果需要对Orbit进行配置
     $(document).foundation('orbit', {
        timer_speed: 10000,
        animation_speed: 500,
        bullets: true,
        stack_on_small: true
    });