01
1-1 Bootstrap介紹
工程師救星-用Bootstrap速成響應式網頁開發
課程資訊 課程大綱 開課單位 常見問答
Loading...
工程師救星-用Bootstrap速成響應式網頁開發
2117次瀏覽
收藏
NT$2,400
優惠現領
【4月限時優惠】
2026/04/30 到期
9 折
課程資訊
本頁面課程內容及活動資訊概由廠商提供，部分內容非屬104服務範疇，會員應遵守之規範悉依
104課程中心會員規約 所載。
上課時間 無限期觀看課程 查看更多
上課方式 於開課單位網站兌換後觀看課程
課程內容
課程大綱
展開全部
1
Bootstrap初體驗
02
1-2 Bootstrap套件下載與使用
03
1-3 Bootstrap套用方式
2
Bootstrap內容樣式
01
2-1 前景色、背景色與文字對齊
02
2-2 圖片樣式
03
2-3-1 按鈕與縮圖元件
04
2-3-2 按鈕與縮圖元件範例-書籍產品目錄
3
Bootstrap表格設計
01
3-1 表格設計
02
3-2 Bootstrap響應式表格實作-1
03
3-3 Bootstrap響應式表格實作-2
4
Bootstrap表單設計
01
4-1-1 Bootstrap表單設計-1
02
4-1-2 Bootstrap表單範例實作
03
4-2 Bootstrap表單設計-2
5
Bootstrap響應式排版
01
5-1-1 格線系統與縮圖元件
02
5-1-2 格線系統與縮圖元件範例-書籍列表
03
5-2 格線系統與響應試表單範例-註冊表單
04
5-3 Bootstrap實用程序
6
媒體物件
01
6-1 媒體物件架構與設計
02
6-2 媒體物件範例
03
6-3 巢狀媒體物件設計
04
6-4 媒體物件整合格線系統
7
Bootstrap常用元件(一)
01
7-1-1 提示標誌與列表群組
02
7-1-2 List Group列表群組-簡介與語法
03
7-1-3 List Group列表群組-項目背景色
04
7-2-1 按鈕群組與下拉式選單
05
7-2-2 DropDown下拉式選單
06
7-2-3 Button Group按鈕群組整合DropDown下拉式選單
07
7-3-1 Navs導覽
08
7-3-2 Navs導覽整合DropDown下拉式選單
09
7-3-3 Navs導覽製作分頁標籤整合Media Object媒體物件
8
Bootstrap常用元件(二)
01
8-1-1 Navbar導覽列元件
02
8-1-2 Navbar導覽列基礎實作
03
8-1-3 Navbar導覽列收合選單設計
04
8-1-4 Navbar導覽列整合下拉選單與表單
05
8-2 Jumbotron大螢幕廣告
06
8-3-1 Card卡片元件的基礎設計
07
8-3-2 Card卡片元件的圖片配置
08
8-3-3 Card卡片元件背景底圖設計
09
8-3-4 Card卡片群組設計
10
8-4 Pagination分頁導覽設計
11
8-5 Breadcrumb麵包屑導覽設計
12
8-6 Progress Bars進度條元件
9
Bootstrap JS互動組件(一)
01
9-1 Alert警報框組件
02
9-2 Tooltip提示框組件
03
9-3 Popover彈出提示組件
04
9-4 Modal互動視窗組件
10
Bootstrap JS互動組件(二)
01
10-1 Carousel圖片輪播組件
02
10-2 Scrollspy滑動監控組件
03
10-3 Collapse摺疊組件
04
10-4 手風琴折疊組件
11
流行服飾網實作
01
11-1 流行服飾網版面功能
02
11-2 流行服飾網導覽列區域實作
03
11-3 流行服飾網頁尾區域實作
04
11-4 流行服飾網商品展示區域實作
05
11-5 流行服飾網圖片輸播與jQuery互動實作
06
11-6 流行服飾網商品服務區域實作
12
流行服飾網整合ASP.NET MVC動態網頁設計
01
12-1 結合ASP.NETMVC的流行服飾網-功能介紹
02
12-2 結合ASP.NETMVC的流行服飾網-套用版面
03
12-3 結合ASP.NETMVC的流行服飾網-資料庫模型設計
04
12-4 結合ASP.NETMVC的流行服飾網-由資料庫讀取產品服飾資料
05
12-5 結合ASP.NETMVC的流行服飾網-產品服飾分類查詢
06
12-6 結合ASP.NETMVC的流行服飾網-產品服飾關鍵字查詢
07
12-7 結合ASP.NETMVC的流行服飾網-版面配置頁與後台管理頁設計
08
12-8 結合ASP.NETMVC的流行服飾網-由資料庫刪除產品服飾資料
09
12-9 結合ASP.NETMVC的流行服飾網-新增產品服務資料到資料庫
你可以學到
適合對象
➽ 學生族群，想要製作專題作品。➽ 想轉職成為前端工程師，面試需要網站作品。➽ 想增加收入的上班族，自己接案幫客戶架設網站。➽ 已有設計底子，想進入網頁設計領域的人。➽ 需要生出畫面的後端工程師。➽ 具有基礎網頁技能(HTML/CSS)，想快速建立網站的人。
課程講師
蔡文龍蔡文龍老師 ( Jasper )，連續16年榮獲微軟全球最有價值專家 ( 2024年為AI + Developer 雙領域 MVP )，23年電腦資訊教育訓練講師的歷練，為資深電腦圖書作家，著有C#、VB、C/C++、Java、ASP、ASP.NET、ASP.NET MVC…等相關書籍近百餘本。目前為大才全資訊資深顧問、受聘各公民營企業、內訓課程開發規劃、曾任各大專院校與高中職教師研習營講師與業師。同時為「獎金獵人」參加過無數次的軟體開發競賽，像是 Open Data 創新應用競賽、DevDay 亞太開發人員技術好客松、AI 智能服務應用大賽、樂齡程式開發大賽、資訊服務應用競賽新秀選拔…等皆榮獲前三名佳績。專長課程：* ASP.NET Core MVC 跨平台網頁設計* ASP.NET MVC 動態網頁設計* ASP.NET 動態網頁設計(Web Form)* AI-900 認知服務 ( Azure 認知服務 )* Open AI 服務聊天機器人與AI繪圖開發* Python X Excel X ChatGPT 辦公室自動化作業* Python X Open AI 服務開發* PHP 動態網頁設計* C# / VB / Java / Python 等物件導向程式設計* 設計模式* ADO .NET 資料庫程式設計* HTML5、CSS3 與 JavaScript 網頁設計* JavaScript 與 jQuery 互動網頁設計* RWD 網頁設計與行動網站開發* Android App 行動應用程式開發著作書籍：* 跟著實務學習ASP.NET MVC 5.x-打下前進asp.net core的基礎* 跟著實務學習ASP.NET MVC-第一次寫MVC就上手* 跟著實務學習Bootstrap-第一次寫響應式網頁與App就上手* 跟著實務學習網頁設計-第一次寫跨平台網頁與App就上手* Visual C# 2022基礎必修課* Java X ChatGPT基礎必修課* 最新Excel VBA基礎必修課* Visual C# 2019程式設計經典* C & C++ 程式設計經典* Python基礎必修課* Excel VBA x ChatGPT x Bing Chat 基礎到爬蟲應用：詠唱神技快速生成公式與 VBA* APCS大學程式設計先修檢測完勝教材-使用C & Python* .....等近百餘本相關書籍。
展開全部
開課單位
緯育TibaMe由全球最大資通訊集團之一的緯創資通集團於2015年正式成立，我們專注於人才培訓與平台服務，發展多元的授課模式，並結合緯育開發的雲端智能化學習系統，有效培育新世代數位化人才。在行動與雲端時代，用科技加值人才培育，持續發展創新與有效的數位教育學習服務。
緯育TibaMe 最新課程
看所有課程
最新動態
看所有動態
【在職補助課程】報名到4/15~ GitHub Copilot AI賦能開發實戰訓練班
🔹 精選課程亮點：
1️⃣ 後端加速： 實戰建立 API 與自動化文件。
2️⃣ 前端實作： AI 輔助網站開發與資料分析。
3️⃣ 高階應用： 整合 Prompt Flow 打造專屬 AI 系統。
🎁參與課程者提供4/19-5/30 GitHub Copilot Business版使用權限
📅 相關期程：
報名截止：2026/04/15(三)
上課時間：4/19(實體-緯育台北中心)、4/26(遠距)、5/10(遠距)
💰 超值學費：
學員僅需負擔 $839 (政府負擔 $3,356)
特定身分(如45歲以上、原住民等)可享全額補助免預繳！
⚠️ 參訓要求：
報名及開訓日需為在職中(有勞保紀錄者)，並有程式開發經驗，講師將以 C# 或 Python 進行演示。
👇 點擊下方連結到台灣就業通報名：
https://ojt.wda.gov.tw/ClassSearch/Detail?PlanType=5&OCID=171122
(名額僅 40 位，依報名順序錄訓，請把握機會！)
✨台灣就業通所見課綱將於實際授課時，額外新增2026年更新版教材進行授課，會學到更多新的內容 如：Code Review、MCP擴充、CLI應用情境、用於SQL分析及應用、用於做資料分析、展望未來SDD
【職涯必備】AI 正在改寫人才規格！4/8 線上講座帶你晉升「π 型人才」
在 104 看了這麼多職缺，你有發現「AI 應用能力」已成為多數高薪職務的標配嗎？
別讓你的競爭力停留在工具操作，企業現在要的是能將 專業能力 × AI 工具 × 跨域思維 結合的 π 型人才。
本次由 勞動部北基宜金馬分署 與 緯育 TibaMe 合作的「生成式 AI 培訓據點」特別邀請 AIGC 專家 陳建夆 Jason 老師，用 60 分鐘帶你拆解職場生存法則。
💡 這場講座你將獲得：
🔹 個人競爭力分析：解析 AI 時代人才需求結構的轉變。
🔹 高效工具示範：如何利用 NotebookLM 快速整理企業大數據，將資訊轉化為實質產出。
🔹 職涯路徑指南：從 AI 素養出發，建立不被取代的跨域優勢。
📍 適合對象：
正在 104 尋找更好職涯機會的你。
感覺目前技能遇到瓶頸，想透過 AI 轉型的在職者。
想掌握政府補助培訓資源的積極學習者。
📅 講座時間： 4/8 (三) 20:00 - 21:00（線上直播）
💰 費用： 0 元（官方資源，限額 300 名）
🔥 別讓你的履歷輸在 AI！ 名額有限，立即報名卡位，讓 AI 成為你職涯最強的放大鏡！
👇 點擊連結立即報名 👇
[🔗 https://www.surveycake.com/s/QyANo ]
104學習常見問答
適用範圍只限於 104 學習平台，完成費用給付之課程
如何購買課程並開始上課
於欲購買 1. 線上課程之頁面，點擊「立即購買」，成功使用信用卡完成付款並確立訂單成立後，本平台將透過購買填寫之信箱，以郵件方式通知「訂單成立」，後續兌換學習有兩種形式：(A) 若購買學習廠商提供課程，購買後「提供課程兌換序號、兌換連結、兌換碼使用說明」，引導您至購買課程之出版廠商兌換並上課、(B)若購買是104學習系統，購買完可以從郵件、訂單明細、課程詳細頁直接進到站內線上學習。 2. 實體課程之頁面，點擊「立即購買」，成功完成付款並確立訂單成立後，本平台將透過購買填寫之信箱，以郵件方式通知「訂單成立」即可完成報名，後續開課單位會有專員與您聯繫後續事宜。
購買與報名課程付款方式？
僅提供信用卡付款。
有支援信用卡分期嗎？
平台有提供分期服務：結帳金額滿$4,000可享三期零利率，滿$12,000可享六期零利率；分期服務支援銀行公司為：中國信託、台新銀行、玉山銀行，實際分期金額依各發卡行規定
已完成付款，但用錯優惠碼怎麼辦？
請申請退款並重新下單，已使用之優惠碼，本平台將不進行退回，敬請見諒。
線上刷卡後訂單狀態顯示「待付款」
代表您的結帳流程尚未完成，請儘速完成結帳程序，以免課程相關優惠權益失效。
刷卡失敗的原因
可能為以下原因：
1.授權失敗(例：信用卡發卡銀行系統忙碌、網路塞車、刷卡等待時間過久造成系統確認失敗等問題)，建議稍待一段時間再重新刷卡。
2.輸入信用卡卡號等相關資料不正確(例：輸入資料不正確、卡號過期、尚未開卡等問題)，建議重新確認輸入資訊。
如何選擇紙本發票
為響應政府政策，不主動提供紙本發票，委由金財通系統寄發電子發票開立通知信至學員購買課程時填寫之Email，發票自動存入會員載具，若未收到請告知。
企業請款之憑證，如何申請
若需要進行企業請款，請於購買時輸入統一編號、發票抬頭，本平台將以郵件寄送電子發票方式，至您填寫之信箱。
多久會收到發票
發票將於付款成功，3個工作天內開立，敬請稍候。
我可以用我的帳號幫朋友購買課程，讓朋友去學習？
目前課程是綁定購買者帳號使用，無法以您的帳號購買後再提供給朋友使用。
如朋友想學習，需使用他／她自己的帳號完成購買後才可觀看課程。
如何退款
請參考下方退款須知與流程
1.若您於本平台成功完成付款購買課程，有退款需求，於外部學習廠商兌換之線上課程自購買日起7天內，且未進行課程兌換，可申請全額退費；於104課程中心站內學習課程若購買日起7天內後「未進到學習頁」，可申請全額退費；實體課程須於開課日前 1 日(不含假日)之非假日上班時段前與104學習提出申請，始得要求全額退費。
2.若需申請退款，請使用信件主旨：「課程中心退款申請」，並於信件內容寫明購買人姓名、訂單編號、欲退款之課程名稱、退款原因，郵件至nabiservice@104.com.tw，本平台將於5-7個工作天回覆您信件訊息。
3.確認提出退款申請時間為課程購買日起7天內，且未進行課程兌換，本平台將與欲申請退款課程之出版廠商，提出會員資料與學習紀錄查詢，確認您課程的觀看紀錄，並同步確認出版廠商訂定之退款事項，是否全數符合。申請退款的同時，即代表您同意本平台與退款課程之出版廠商，提出查詢會員資料與學習紀錄。
4.若您單一訂單中購買兩堂(含)以上課程，不需要整張訂單退款(只退其中幾堂課)，退款金額為欲退款課程售價加總後，扣除此張訂單所使用之優惠碼(若優惠碼為整張訂單之折數折扣，則退款金額為欲退款課程售價加總後乘以折數折扣)，若計算後退款金額低於(含)0元，本平台將不執行退款。5.上述退款方式僅限於本平台成功完成付款購買之課程，若付款與訂單成立之任一程序不在本平台完成，退款方式需依照課程出版之廠商所訂定之規則提出申請，並由課程出版廠商協助處理，本平台不介入。
6.若您的發票沒有填寫統一編號，並需要辦理退款時，由本平台代為處理發票相關作業 (如作廢電子發票或開立電子發票折讓單)，以加速退款作業時程。
7.分期付款退費須知：刷卡分期消費，全額退款則會進行全額刷退，若是部分退款會採取匯款方式，將退款款項匯款到您的指定帳戶，將由專員與您聯繫提供相關資料(銀行全名及分行、銀行帳號、戶名、存摺影本)，以利後續核對資料確保無誤，將可完成退款作業。
款項何時退回
其退費流程說明：(1)專員收到退款信件後，啟動退款機制(104內部財務審核) – (2) 104財務作業完畢後通知線上刷卡系統商(簡稱：第三方)送出退刷申請 –(3) 第三方會與您的刷卡銀行進行退款程序 – (4) 實際退費所需之工作天依各金融機構實際作業時間為準。(建議您可留意進2-3期的信用卡帳單)
是否提供完課證明
當您課程學習進度達100％，系統會將學習紀錄更新到『履歷表-資格認證欄位』，呈現您在本課程的進修專業，不另提供完課證明文件。
＊據104統計 - 學習紀錄匯入履歷表學員之企業邀約數平均成長19%以上！
工程師救星-用Bootstrap速成響應式網頁開發
NT$2,400
優惠現領
【4月限時優惠】
2026/04/30 到期
9 折
所有優惠
課程標籤
想掌握更多成長資源嗎? 加入104學習官方LINE，隨時獲取最新資訊
