Title1

Title2

Title3

8-1 creative_header.html

<script src='<{xoAppUrl modules/ugm_tools/class/backstretch/jquery.backstretch.min.js}>'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $('#header').backstretch([
            '<{xoImgUrl img/header.jpg}>'
            ,'<{xoImgUrl img/header2.jpg}>'
            ,'<{xoImgUrl img/header3.jpg}>'
        ], {duration: 3000, fade: 750});
    });
</script>
<header id="header">
    <div class="header-content">
        <div class="header-content-inner">
            <h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1>
            <hr>
            <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
            <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
        </div>
    </div>
</header>

從上面這個樣板來看,我們需要的變數有

  1. 多圖片
  2. 標題
  3. 摘要(一般多行)
  4. 連結
  5. 輪播 啟用狀態 在這裡並沒作用,不過我們還是留著。