Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「數位相簿很上手」目錄
MarkDown
3-4 Display 屬性
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 更新
4. Boostrap4 元件
數位相簿很上手 ======= 1. border ``` <pre class="brush:as3;"> <html lang="zh-Hant-TW"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <title>Bootstrap border</title> <style type="text/css"> [class^=border] { display: inline-block; width: 5rem; height: 5rem; margin: .25rem; background-color: #f5f5f5; } .ex-border-0 span{ border: 1px solid #ccc; } </style> </head> <body> <div class="container"> <div class="my-5 border border-primary p-5" style=""> <h2>Border 增加</h2> <span class="border"></span> <span class="border-top"></span> <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></span> </div> </div> </body> </html> ``` 2. clearfix ``` <pre class="brush:as3;"> <html lang="zh-Hant-TW"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <title>Bootstrap clearfix</title> </head> <body> <div class="container"> <div class="clearfix"> <img src="img/fix-1.jpg" alt="aaa" width="300" class="float-right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis enim optio ad suscipit natus, impedit hic, numquam odit iure autem debitis rerum odio nulla voluptas laudantium minima quae ipsa accusamus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat tempora, quidem ut quam ex ad delectus aperiam vitae molestias architecto nulla sit ipsa, eius maxime nemo temporibus expedita quo. Vel?</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem et maxime amet doloribus, quis, soluta deleniti optio esse aperiam dicta repellendus suscipit cum recusandae earum excepturi at nostrum eos enim.</p> </div> </body> </html> ``` 3. </body></html>
3-4 Display 屬性