Foundation 学习

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

网格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

    });