TibaMe
系統初始化失敗,請重新整理頁面
若持續無法載入頁面,請 聯絡客服

蔡文龍

工程師救星-用Bootstrap速成響應式網頁開發

NT$2,400
軟體開發網頁開發

微軟MVP講師兼暢銷作家蔡文龍老師,教你用Bootstrap速成響應式網頁。從基礎元件、響應式排版,再結合JavaScript、jQuery增加互動性;獨家傳授「整合ASP.NET MVC後端」技術,完成既質感且功能完整的RWD動態網站管理系統。穿插多種案例實作,不管是購物網、企業網站,你都能搞定。

NT$2,400

2023/03/26

Bing聊天服務快速開發ASP.NET Core MVC員工系統分享

<div>大家好:<br><br>最近ChatGPT和Bing聊天服務生成式AI相關火紅。在這裡分享如何透過「Bing聊天服務快速開發ASP.NET Core MVC員工系統」。希望對大家有幫助,影片網址如下:<br>https://www.youtube.com/watch?v=XfGAfwUWVUE<br><br>同時還有「Python+Gradio+ChatGPT製作Web APP聊天機器人」影片分享,影片網址如下:<br>https://www.youtube.com/watch?v=S6ucEVbjFxk&t=1s<br><br>也歡迎訂閱程式享樂趣頻道「https://www.youtube.com/@happycodingfun」<br><br></div> <div>謝謝大家</div> <div>&nbsp;</div> <div>蔡文龍敬上</div>
載入更多

最新討論

關於4-2的練習
J ack · 2022/04/08 11:20
無法取得該課程的結訓證書
劉世浩 · 2021/08/01 16:07
在手機版時要隱藏某一個div
artie.yang · 2021/05/05 21:31
popper.min.js
artie.yang · 2021/04/09 21:47
slnHouseWebAp.zip 要到那裡下載?
Danny Huang · 2020/01/28 22:45
查看更多討論

課程資訊

default clock課程時長 7 小時 43 分
default video課程共 12 單元 65 小節
default download3 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 2 小時)
最新公告
2023/03/26

Bing聊天服務快速開發ASP.NET Core MVC員工系統分享

<div>大家好:<br><br>最近ChatGPT和Bing聊天服務生成式AI相關火紅。在這裡分享如何透過「Bing聊天服務快速開發ASP.NET Core MVC員工系統」。希望對大家有幫助,影片網址如下:<br>https://www.youtube.com/watch?v=XfGAfwUWVUE<br><br>同時還有「Python+Gradio+ChatGPT製作Web APP聊天機器人」影片分享,影片網址如下:<br>https://www.youtube.com/watch?v=S6ucEVbjFxk&t=1s<br><br>也歡迎訂閱程式享樂趣頻道「https://www.youtube.com/@happycodingfun」<br><br></div> <div>謝謝大家</div> <div>&nbsp;</div> <div>蔡文龍敬上</div>

適合對象

學生族群,想要製作專題作品。
想轉職成為前端工程師,面試需要網站作品。
想增加收入的上班族,自己接案幫客戶架設網站。
已有設計底子,想進入網頁設計領域的人。
需要生出畫面的後端工程師。
具有基礎網頁技能(HTML/CSS),想快速建立網站的人。


你可以學到





 面對行動裝置的崛起,不同裝置就要設計不同解析度的CSS,耗時又難維護。
市面上Bootstrap書籍與官網只有元件單獨功能,較難將所有元件進行整合運用,拼成完整響應式網頁。
已有網頁開發基礎,但想更進階學習互動性的網頁開發,卻不知道如何下手?
如何與後端ASP.NET MVC進行整合,達成前後端整合進行全端應用程式設計?
----------------------------------------------
想解決以上問題?
讓文龍老師帶你無痛上手Bootstrap速成響應式網頁開發(Responsive Web Design, RWD)吧!



Bootstrap內容樣式及常用元件的靈活使用方式。
Bootstrap格線系統與響應式網頁排版技巧。
Bootstrap與JavaScript、jQuery做出互動整合應用。
跟著老師的步驟,輕鬆取得3個響應式網站作品。

【坊間課程沒教的】前後端整合:Bootstrap前端整合ASP.NET MVC後端,完成建置活動網站雲端系統。

搶先試閱影片
9-4:Bootstrap JS互動組件(一)| Modal互動視窗組件
12-1:流行服飾網整合ASP.NET MVC動態網頁設計|功能介紹

課程介紹



網路快速發展帶動不同數位裝置崛起,現今只要透過網路與裝置就能即時掌握不同的資訊。在人手多機的時代下,沒有單一技術或單一平台可以掌握絕對優勢,開放與跨平台成為未來發展的關鍵指標,對於企業而言,就必須要具備能開發出在不同的裝置上,皆富有優良的使用者體驗(User experience, UX)的技術。

因此前端工程師通常需要具備HTML5、JavaScript、CSS3等基礎功夫,並且搭配響應式網頁設計(Responsive Web Design, RWD),讓網站能針對不同的裝置與瀏覽器 (例如手機、筆記型電腦、桌上型電腦、平板) 的螢幕尺寸,自動調整為適用的內容與排版,進而達到最佳的使用者瀏覽經驗。

Bootstrap 是使用 HTML、CSS 和 JavaScript套件。同時也是世界上最受歡迎的前端元件庫,可以快速建立響應式、行動優先的Web網站專案,對於網頁平面設計者可透過Bootstrap快速建立具響應式且具設計感的網頁,而對於後端工程師而言,透過Bootstrap的元件整合後端技術可以編排具美觀富質感的網站,因此Bootstrap更是不能錯過的一門技術。






462分鐘 x 10大主題 x 65小節 x 45個案例實作

單元一|Bootstrap初體驗
Bootstrap簡介、套件下載與使用

單元二|Bootstrap內容樣式

前景與背景色、內容對齊設定
 圖片樣式:
響應式圖片、圖片形狀、圖片對齊。
按鈕與縮圖元件
實作-書籍產品目錄

單元三|Bootstrap表格設計

HTML表格架構
Bootstrap表格樣式
實作-好書推薦網、評分比重表格

單元四|Bootstrap表單設計

表單架構
表單常用欄位
Bootstrap表單常用屬性:
用於美化表單。

單元五|Bootstrap響應式排版

 格線系統與縮圖元件
實作-書籍列表、註冊表單
Bootstrap實用程序:
元素距離/框線設定、去除浮動設定、陰影設定。

單元六|媒體物件(Media Objects)架構與設計

媒體物件簡介、架構:圖示、圖片或影音檔案等,常見於編排社群網站。
巢狀媒體物件
媒體物件結合格線系統

單元七|Bootstrap常用元件

提示標誌(Badges):通常用於「未讀訊息」、「提示訊息」。
列表群組(List Group)
按鈕群組(Button Groups)
下拉式選單(Dropdowns)
導覽(Nav)功能、分頁標籤
導覽列(Navbar)網站主功能表,似網站目錄列。
大螢幕廣告
(Jumbotron)用來強調重要訊息,常用於活動曝光。
卡片元件(Card):Bootstrap 4新元件,用來取代Bootstrap 3的面板(Panel)。
分頁導覽(Pagination)
麵包屑導覽(Breadcrumb):將分頁層次結構列出來,顯示目前層級,亦方便返回上一層。
進度條(Progress Bars):通常用於檔案下載進度顯示。

單元八|Bootstrap JS互動組件

警報框(Alert)用於提示訊息的對話框。
提示框
(Tooltips)通常應用於描述連結的作用。
彈出提示
(Popover)與提示框不同於,具標題及內容。
互動視窗
(Modal) 
圖片輪播
(Carousel)
滑動監控
(Scrollspy)
摺疊
(Collapse)
 手風琴摺疊

單元九|實作演練-流行服飾網


單元十|實作演練-前後端整合:流行服飾網整合ASP.NET MVC動態網頁




1. 靈活運用Bootstrap的按鈕、圖片、表單、格線系統、媒體物件等元件與各類型CSS,快速排出支援RWD的網站。



2. 整合Bootstrap JS互動組件,如標籤頁、導覽列、Tooltip、彈出視窗、滑動監控、手風琴、下拉清單與按鈕群組,整合簡易線上課程網站案例,同時支援響應式效果。


3. 套用Bootstrap提供的功能與組件,設計流行服飾網首頁版型(同時支援手機與平版模式),再結合ASP.NET MVC設計服飾網站的管理後台,輕鬆上架服飾商品。
整合前端Bootstrap與後端ASP.NET MVC,前進雲端應用程式,讓作品更有其商業功能與價值。


還想了解更多嗎?

可至上方課程大綱 試閱影片,課程諮詢提出問題喔!

學習前基本能力

具備電腦基本概念,熟悉Windows平台操作。
對於HTML5、CSS3有基礎了解尤佳。

學習前準備

電腦必須安裝Visual Studio 2017或Dreamweaver。
準備一顆渴望學習的心。



常見問題


Q: 請問在哪裡上課?上課時間?

此課程是『線上課程』喔!所以課程上線後,隨時隨地都可以透過手機、平板、與電腦在 TibaMe上看課程影片,沒有時間和地點的問題!

Q: 課程可以看幾次?

不限次數,沒有期限!TibaMe的線上課程都可以一直看一直看一直看!

Q: 可以問老師問題嗎?

當然!如您在購課前有課程內容相關問題,可以先至「課前提問」提出問題;上課後,對老師影片內容有任何不清楚,可以至「課程討論區」與老師同學一同切磋討論喔!

Q: 還有其他問題?

FAQ 看看更多問題解答

課程資訊

default clock課程時長 7 小時 43 分
default video課程共 12 單元 65 小節
default download3 個可下載的 學習資源
icon_info_certificate提供完訓證書
default plan提供制定 學習計畫建議學習 4 週 (每週 2 小時)

關於講師

蔡文龍

蔡文龍老師(Jasper),連續15年榮獲微軟全球最有價值專家(2023年為AI + Developer 雙領域 MVP),22年電腦資訊教育訓練講師的歷練,為資深電腦圖書作家,著有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
* .....等近百餘本相關書籍。
1. Bootstrap初體驗
3 小節
video common icon

1-1 Bootstrap介紹

video common icon

1-2 Bootstrap套件下載與使用

video common icon

1-3 Bootstrap套用方式

2. Bootstrap內容樣式
4 小節
video common icon

2-1 前景色、背景色與文字對齊

video common icon

2-2 圖片樣式

video common icon

2-3-1 按鈕與縮圖元件

video common icon

2-3-2 按鈕與縮圖元件範例-書籍產品目錄

3. Bootstrap表格設計
3 小節
video common icon

3-1 表格設計

video common icon

3-2 Bootstrap響應式表格實作-1

video common icon

3-3 Bootstrap響應式表格實作-2

4. Bootstrap表單設計
3 小節
video common icon

4-1-1 Bootstrap表單設計-1

video common icon

4-1-2 Bootstrap表單範例實作

video common icon

4-2 Bootstrap表單設計-2

5. Bootstrap響應式排版
4 小節
video common icon

5-1-1 格線系統與縮圖元件

video common icon

5-1-2 格線系統與縮圖元件範例-書籍列表

video common icon

5-2 格線系統與響應試表單範例-註冊表單

video common icon

5-3 Bootstrap實用程序

6. 媒體物件
4 小節
video common icon

6-1 媒體物件架構與設計

video common icon

6-2 媒體物件範例

video common icon

6-3 巢狀媒體物件設計

video common icon

6-4 媒體物件整合格線系統

7. Bootstrap常用元件(一)
9 小節
video common icon

7-1-1 提示標誌與列表群組

video common icon

7-1-2 List Group列表群組-簡介與語法

video common icon

7-1-3 List Group列表群組-項目背景色

video common icon

7-2-1 按鈕群組與下拉式選單

video common icon

7-2-2 DropDown下拉式選單

video common icon

7-2-3 Button Group按鈕群組整合DropDown下拉式選單

video common icon

7-3-1 Navs導覽

video common icon

7-3-2 Navs導覽整合DropDown下拉式選單

video common icon

7-3-3 Navs導覽製作分頁標籤整合Media Object媒體物件

8. Bootstrap常用元件(二)
12 小節
video common icon

8-1-1 Navbar導覽列元件

video common icon

8-1-2 Navbar導覽列基礎實作

video common icon

8-1-3 Navbar導覽列收合選單設計

video common icon

8-1-4 Navbar導覽列整合下拉選單與表單

video common icon

8-2 Jumbotron大螢幕廣告

video common icon

8-3-1 Card卡片元件的基礎設計

video common icon

8-3-2 Card卡片元件的圖片配置

video common icon

8-3-3 Card卡片元件背景底圖設計

video common icon

8-3-4 Card卡片群組設計

video common icon

8-4 Pagination分頁導覽設計

video common icon

8-5 Breadcrumb麵包屑導覽設計

video common icon

8-6 Progress Bars進度條元件

9. Bootstrap JS互動組件(一)
4 小節
video common icon

9-1 Alert警報框組件

video common icon

9-2 Tooltip提示框組件

video common icon

9-3 Popover彈出提示組件

試看
video common icon

9-4 Modal互動視窗組件

09:58
10. Bootstrap JS互動組件(二)
4 小節
video common icon

10-1 Carousel圖片輪播組件

video common icon

10-2 Scrollspy滑動監控組件

video common icon

10-3 Collapse摺疊組件

video common icon

10-4 手風琴折疊組件

11. 流行服飾網實作
6 小節
video common icon

11-1 流行服飾網版面功能

video common icon

11-2 流行服飾網導覽列區域實作

video common icon

11-3 流行服飾網頁尾區域實作

video common icon

11-4 流行服飾網商品展示區域實作

video common icon

11-5 流行服飾網圖片輸播與jQuery互動實作

video common icon

11-6 流行服飾網商品服務區域實作

12. 流行服飾網整合ASP.NET MVC動態網頁設計
9 小節
試看
video common icon

12-1 結合ASP.NETMVC的流行服飾網-功能介紹

03:37
video common icon

12-2 結合ASP.NETMVC的流行服飾網-套用版面

video common icon

12-3 結合ASP.NETMVC的流行服飾網-資料庫模型設計

video common icon

12-4 結合ASP.NETMVC的流行服飾網-由資料庫讀取產品服飾資料

video common icon

12-5 結合ASP.NETMVC的流行服飾網-產品服飾分類查詢

video common icon

12-6 結合ASP.NETMVC的流行服飾網-產品服飾關鍵字查詢

video common icon

12-7 結合ASP.NETMVC的流行服飾網-版面配置頁與後台管理頁設計

video common icon

12-8 結合ASP.NETMVC的流行服飾網-由資料庫刪除產品服飾資料

video common icon

12-9 結合ASP.NETMVC的流行服飾網-新增產品服務資料到資料庫

學習附件

file-icon
Bootstrap範例練習素材.zip
25.51 MB
stage arrow to bottom
file-icon
Bootstrap課程ppt.zip
24.93 MB
stage arrow to bottom
file-icon
tibameBS範例.zip
86.48 MB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。

關於講師

蔡文龍

蔡文龍老師(Jasper),連續15年榮獲微軟全球最有價值專家(2023年為AI + Developer 雙領域 MVP),22年電腦資訊教育訓練講師的歷練,為資深電腦圖書作家,著有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
* .....等近百餘本相關書籍。
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單
返回主選單