線上書籍
Home
數位相簿很上手
1. 開發環境與工具
1-1 GitHub Pages
1-2 Git
2. Bootstrap4 - 網格系統
2-1 佈局頁面
2-2 網格系統
2-3 網格注意事項
2-4 自動的平均分配欄寬
2-5 水平對齊
2-6 垂直對齊
2-7 Column 排序
2-8 欄的推移
2-9 上課練習
3. Bootstrap4 -通用類別
3-1 Colors
3-2 CLEARFIX 清除浮動
3-3 Codepen-實用的線上編輯器
3-4 Display 屬性
3-5 上課範例
4. Boostrap4 元件
4-1 上課範例
5. 表格排版
5-1 建立入口網站
6. 輪播 (Carousel)
6-1 卡片
6-2 fork
6-3 上課範例
7. 建立電子相簿版型
7-1 上課範例
8. 建立電子相簿版型(二)
8-1 css
8-2 播放圖示置中
8-3 上課練習
8-4 lightGallery 插件控制
8-5 總結
9. 上方選單
9-1 一般導覽列
9-2 多層下拉選單
10. 免費、付費樣板
11. unitegallery
12. 成果展
12-1 unitegallery
13. 雲端應用研究社-3
14. 雲端應用研究社-4
15. 雲端應用研究社-5
16. 雲端應用研究社-6-卡片的應用
17. git 更新
帶動畫縮略圖的畫廊 thumbnail:true //true、false
沒有動畫縮略圖的畫廊 thumbnail:true, animateThumb: true, //略縮圖動畫 showThumbByDefault: false //預設出現略縮圖
Youtube，Vimeo視頻庫
在項目上，
加「data-poster="......jpg"」
「data-src="....."」，改成影片的網址
不過必在伺服器，才能執行
https://webugm.github.io/gallery/videos.html
播放圖示，修改
圖示：
play-button.png
zoom.png
範例：
https://github.com/webugm/gallery/blob/master/videos.html
https://webugm.github.io/gallery/videos.html
8-3 上課練習
8-5 總結