[Bootstrap] - 切版練習-Glozzom Multi Page

Orow's Blog

2019-03-03

project

bootstrap

Demo

切版練習-Glozzom Multi Page - Demo

1. Introduction 網頁介紹

此版面有五個頁面： Home, About, Services, Blog, Contact。
Home 頁面用到 slider(bootstrap)、有兩個區塊的背景圖片不會隨著捲動而移動，用到了modal與iframe來顯示 youtube 的影片，用lightbox顯示照片。
About 頁面則是有一區塊背景圖不隨著捲動來移動，最後用的是slick的方式。
Service 頁面主要有一個區塊用 card 的方式去呈現（裡面有 list 與 font-awesome icon），最後用 accordion 呈現 FAQ。
Blog 頁面用了 bootstrap 的card-columns來排版。
最後的 contact 頁面則是一般的聯絡資訊，表單，還有 staff 的資料與照片呈現。

2. Layout Notes

2.1 Home

Showcase - Carousel slider，是整個背景圖片 slide，還有indicator, arrow 加上內容描述，arrow 要加上slide prev & next的功能，背景圖片這邊要注意,包著他的容器要給高度,若高度不是給容器則無法填滿。
接在下面的section 則是font-awesome icon加上文字敘述。

下面兩處紅框區則是背景圖固定，不隨滑鼠捲動而移動，高度用min-height，可以透過backgropund-position來調整背景圖位置。
箭頭處則是modal。

點擊後彈出視窗（iframe）
modal + iframe 參照範例與套件

<!-- Video modal -->
<div class="modal fade" id="videomodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
        <iframe src="" frameborder="0" height="350" width="100%" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

// Video Play
$(function() {
  // Auto play modal video
  $(".video").click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto =
        videoSRC +
        "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    $(theModal + " iframe").attr("src", videoSRCauto);
    $(theModal + " button.close").click(function() {
      $(theModal + " iframe").attr("src", videoSRC);
    });
  });
});

Photo-gallery section: 用到 lightbox，照片我用 unsplash 隨機的照片。
lightbox 需要引用 CDN，Lightbox for Bootstrap

點擊會跳出額外視窗

// Lightbox Init
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});

Newsletter section: inline-block 的 form

2.2 About

Navbar: 相同，只有移動 active class 到該頁面的區塊，active 有 border-left 的效果。
接著的 Page header: 背景圖片仍是 fixed，不隨滑鼠捲動而移動。
About 區塊則是一邊敘述，一邊是圖片class="rounded-circle"有border-radius:50%的效果，再利用負的margin-top來超出邊界。

Icon boxes: 含有 font-awesome 的 box，用 card 呈現。
Testimonial: 文字需要 slider(slick)，文字後面的 footer 要加上blockquote-footer的 class。

slick 需引用 CDN，除了 js 檔外，也有 slick 的 css 檔案，Slick
下面兩個方式都可以達成需求

// // Slider function - single item -sample 1
$(".slider").slick();

// // Slider function - sample 2
$(".slider").slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1
});