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-3 組件
1. 開發環境及工具
1-1 UNIFORM SERVER安裝
1-1-1 php.ini 校調
1-1-2 設定開機是否自動執行
1-1-3 設定寄信功能
1-1-4 重設mysql密碼
1-4 FILEZILLA檔案傳輸軟體
2. Bootstrap 網頁框架(上)
2-1 Bootstrap 介紹
2-2 網頁組成
2-3 導覽列
2-4 HTML標籤
3. Bootstrap 網頁框架(中)
3-1 CSS 樣式表
3-2 排版、表格、按鈕
3-3 組件
3-4 實做
4. Bootstrap 網頁框架(下)
4-1 線上假圖
4-2 縮圖列表
4-3 警告框
4-4 面板
4-5 輪播圖
5. 簡易商品網站
5-1 空白架構
5-2 導覽列
5-3 輪播圖
5-4 縮圖列表
5-5 頁尾
6. 部落格架設-XOOPS架設
7. 部落格架設-XOOPS模組安裝
8. 部落格架設-TADNEWS進階
9. 模組安裝與管理
10. 版型與佈景管理
11. 區塊安裝與管理
12. 發佈文章
13. 課程總複習
13-1 bootstrap 框架
14. 期末測驗
15. XOOPS常用技巧
4. Bootstrap 網頁框架(下)
網站、部落格架設 ======== 1. 請複製空白架構 存檔 ex\_3\_1.html ``` <pre class="brush:as3;"> <html lang="zh-TW"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ex_3_1.html</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 --> <!-- 警告：Respond.js 無法在 file:// 協定下運作 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 所有外掛均需要使用) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 --> <script src="js/bootstrap.min.js"></script> </head> <body> <h1 class="text-center">ex_3_1.html</h1> </body> </html> ``` 2. 標題 ``` <pre class="brush:as3;"> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> ``` 3. 對齊 ``` <pre class="brush:as3;"> <div class="container"> <p class="text-left">靠左對齊文字。</p> <p class="text-center">置中對齊文字。</p> <p class="text-right">靠右對齊文字。</p> </div> ``` 4. 無序項目 ``` <pre class="brush:as3;"> <div class="container"> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </div> <hr> ``` 5. 有序項目 ``` <pre class="brush:as3;"> <div class="container"> <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> </div> <hr> ``` 6. 按鈕 ``` <pre class="brush:as3;"> <div class="container"> <a class= "btn btn-default" href= "#" role= "button" > Link </a> <button class= "btn btn-default" type= "submit" > Button </button> <input class = "btn btn-default" type= "button" value= "Input" > <input class= "btn btn-default" type= "submit" value= "Submit" > </div> <hr> ``` 7. 按鈕樣式與顏色 ``` <pre class="brush:as3;"> <div class="container"> <!-- Standard button --> <button type= "button" class= "btn btn-default" >（默認樣式）Default </button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type= "button" class= "btn btn-primary" >（首選項）Primary </button> <!-- Indicates a successful or positive action --> <button type= "button" class= "btn btn-success" >（成功）Success </button> <!-- Contextual button for informational alert messages --> <button type= "button" class= "btn btn-info" >（一般信息）Info </button> <!-- Indicates caution should be taken with this action --> <button type= "button" class= "btn btn-warning" >（警告）Warning </button> <!-- Indicates a dangerous or potentially negative action --> <button type= "button" class= "btn btn-danger" >（危險）Danger </button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type= "button" class= "btn btn-link" >（鏈接）Link </button> </div> <hr> ``` 8. 按鈕尺寸 ``` <pre class="brush:as3;"> <div class="container"> <p> <button type= "button" class= "btn btn-primary btn-lg" >（大按鈕）Large button </button> <button type= "button" class= "btn btn-default btn-lg" >（大按鈕）Large button </button> </p> <p> <button type= "button" class= "btn btn-primary" >（默認尺寸）Default button </button> <button type= "button " class= "btn btn-default" >（默認尺寸）Default button </button> </p> <p> <button type= "button" class= "btn btn-primary btn-sm" >（小按鈕） Small button </button> <button type= "button" class= "btn btn-default btn-sm" >（小按鈕）Small button </button> </p> <p> <button type= "button" class = "btn btn-primary btn-xs" >（超小尺寸）Extra small button </button> <button type= "button" class= "btn btn-default btn-xs" >（超小尺寸）Extra small button </button> </p> </div> <hr> ``` 9. 圖標 + 按鈕 ``` <pre class="brush:as3;"> <div class="container"> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> </div> <hr> ``` 10. </body></html>
3-3 組件