iT邦幫忙

bootstrap5相關文章
共有 115 則文章
0 Like 1 留言 2342 瀏覽
鐵人賽 自我挑戰組 DAY 17
30 天轉生到 bootstrap 5 的意識界 系列 第 17 篇

技術 第 17 集：Bootstrap 客製化 Sass 官網資源

此篇會用好理解 （好笑） 的方式導覽官網、原始碼如何閱讀，詳細介紹會放在往後的文章。 官網 英文官網 中文官網 (六角學院翻譯) 中文官網，不一定...

Kent ‧ 2021-10-02
1 Like 0 留言 2577 瀏覽
鐵人賽 Modern Web DAY 18
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 18 篇

技術 【設計+切版30天實作】｜Day18 - Bootstrap的客製化

大綱 上一篇把環境都建立完成後，今天要來做客製化，但在這之前，先來說明一下為什麼要客製化，以及為什麼會把客製化放在前面。 由於這一次的挑戰是以設計師角度去做，因...

烙詩 ‧ 2021-10-02 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1573 瀏覽
鐵人賽 Modern Web DAY 17
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 17 篇

技術 【設計+切版30天實作】｜Day17 - Bootstrap的環境建立

大綱 要切版前當然是要先來建立環境，所以我們下一篇再來做客製化！那環境要怎麼建立？其實還蠻簡單的！只要跟著下面的步驟去做，很快就會上手啦！不過先說明一下，這篇文...

烙詩 ‧ 2021-10-01 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1297 瀏覽
鐵人賽 Modern Web DAY 16
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 16 篇

技術 【設計+切版30天實作】｜Day16 - 進入切版前的前置作業之列出設計稿上的數據

大綱 前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷...

烙詩 ‧ 2021-09-30 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
0 Like 0 留言 1197 瀏覽
鐵人賽 Modern Web DAY 15
30天打造品牌特色電商網站 系列 第 15 篇

技術 30天打造品牌特色電商網站 Day.15 微互動設計按鈕實作(1)

網站的各種按鈕及動態互動是UX使用者經驗最直接接觸的地方，透過設計能讓使用者直覺操作，也能帶來良好的購物體驗！這裡針對幾個常見的元件來做各項應用介紹！ 往各個...

atain880625 ‧ 2021-09-29
0 Like 0 留言 3616 瀏覽
鐵人賽 自我挑戰組 DAY 13
30 天轉生到 bootstrap 5 的意識界 系列 第 13 篇

技術 第 13 集：Bootstrap 客製化 Sass 環境

此篇會介紹 Bootstrap 客製化所需的環境設置。 想先談談關於 Bootstrap 5 客製化，需要具備的幾個觀念。（大致有個概念就好，後續會比較好消...

Kent ‧ 2021-09-28
1 Like 0 留言 1128 瀏覽
鐵人賽 Modern Web DAY 15
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 15 篇

技術 【設計+切版30天實作】｜Day15 - 來個完美的簡約風Footer結束這回合

設計大綱 Landing Page的主要色都偏深色，另外CTA也有用主要色作為背景顏色了，所以這邊的Footer就決定用淺色的Secondary-color來作...

烙詩 ‧ 2021-09-29 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 997 瀏覽
鐵人賽 Modern Web DAY 14
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 14 篇

技術 【設計+切版30天實作】｜Day14 - 簡約CTA的用處及設計的注意事項

設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然，另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...

烙詩 ‧ 2021-09-28 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 996 瀏覽
鐵人賽 Modern Web DAY 13
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 13 篇

技術 【設計+切版30天實作】｜Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形＋背景顏色＋陰影。今天想來做點不一樣的，所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...

烙詩 ‧ 2021-09-27 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1003 瀏覽
鐵人賽 Modern Web DAY 12
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 12 篇

技術 【設計+切版30天實作】｜Day12 - 怎麼讓使用者選中您想要他選的Plans設計？

設計大綱 今天要來設計「方案」，外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話，那通常會有一個是「免費試用」方案讓使用者試用，從而引導使用...

烙詩 ‧ 2021-09-26 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1142 瀏覽
鐵人賽 Modern Web DAY 11
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 11 篇

技術 【設計+切版30天實作】｜Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢？

設計大綱 在上一篇設計「Reviews」這個區塊時，有提到切版時可能會有「切不出來」的情況發生，所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是！...

烙詩 ‧ 2021-09-25 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1096 瀏覽
鐵人賽 Modern Web DAY 10
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 10 篇

技術 【設計+切版30天實作】｜Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊

設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗，另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網，目前好像沒辦法切出超出視...

烙詩 ‧ 2021-09-24 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 3038 瀏覽
鐵人賽 自我挑戰組 DAY 8
30 天轉生到 bootstrap 5 的意識界 系列 第 8 篇

技術 第 8 集：Gird System 格線系統

此篇會簡單介紹格線系統原理以及使用技巧。 Bootstrap5 格線系統是基於 flex，想活用格線系統可以先多加了解 flexbox 盒模型，剛好上一集有稍微...

Kent ‧ 2021-09-23
2 Like 0 留言 1991 瀏覽
鐵人賽 Modern Web DAY 9
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 9 篇

技術 【設計+切版30天實作】｜Day9 - 把Bootstrap預設的Carousel新增變化

設計大綱 一個平台要成功，當然少不了圖片/照片的介紹（很愛看圖的懶人XD），所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。Bootstrap...

烙詩 ‧ 2021-09-23 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 916 瀏覽
鐵人賽 Modern Web DAY 8
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 8 篇

技術 【設計+切版30天實作】｜Day8 - 看起來簡單但不單調的steps設計

設計大綱 稱讚完平台的優點後，接下來的區塊就要向使用者介紹使用的流程，但因為現代人都很懶得看很冗長的「說明書」，所以使用流程會採用簡約的方式去做介紹。 因為上面...

烙詩 ‧ 2021-09-22 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 824 瀏覽
鐵人賽 Modern Web DAY 7
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 7 篇

技術 【設計+切版30天實作】｜Day7 - 設計出無外框式的三欄式pros區塊

設計大綱 上一個區塊賣完小廣告後，今天馬上就給它塞個平台的優點進來，這樣可以讓使用者有「感同身受」的感覺，同時也能讓他們覺得「哇！好像真的很棒唷！」。 「優點」...

烙詩 ‧ 2021-09-21 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 887 瀏覽
鐵人賽 Modern Web DAY 6
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 6 篇

技術 【設計+切版30天實作】｜Day6 - 設計出背景上又有背景的吸睛小廣告

設計大綱 上一個區塊設計了使用者的「痛點」，因此接下來的區塊想要做一個「平台的小廣告」，讓使用者了解到我們這個平台可以幫助他們解決問題。由於上一個區塊並不是滿版...

烙詩 ‧ 2021-09-20 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 0 留言 1029 瀏覽
鐵人賽 Modern Web DAY 5
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 5 篇

技術 【設計+切版30天實作】｜Day5 - 做出3欄式「痛點」設計

設計大綱 早安！今天來設計痛點，這邊我想要做三欄式，列出三個他們目前主要可能會遇到的問題，再加上圖片，讓使用者有感到身受的感覺。另外，因為Grid system...

烙詩 ‧ 2021-09-19 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 2 留言 7044 瀏覽
鐵人賽 自我挑戰組 DAY 2
30 天轉生到 bootstrap 5 的意識界 系列 第 2 篇

技術 第 2 集：認識 Bootstrap 5 世界

此篇會分享 Bootstrap 5 環境設置，示範 VSCode、CodePen 兩種不同環境的設置方法。 Bootstrap Bootstrap 原名 Twi...

Kent ‧ 2021-09-17
2 Like 1 留言 1744 瀏覽
鐵人賽 Modern Web DAY 4
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 4 篇

技術 【設計+切版30天實作】｜Day 4 - 參考Bootstrap畫出理想的header(下集)

設計大綱 上一集設計完header的滿版背景後，今天會設計Navigation bar。Navbar在網頁來說也是蠻重要的一個元件，通常會有LOGO、常用按鈕或...

烙詩 ‧ 2021-09-18 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 1664 瀏覽
鐵人賽 Modern Web DAY 3
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 3 篇

技術 【設計+切版30天實作】｜Day3 - 參考Bootstrap畫出理想的header(上集)

設計大綱 今天來設計Landing page的header。這次想要做的是一個滿版的header，在header裡面會有標題、內容、以及input（提供使用者填...

烙詩 ‧ 2021-09-17 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 0 留言 2410 瀏覽
鐵人賽 Modern Web DAY 2
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 2 篇

技術 【設計+切版30天實作】｜Day2 - 開始設計前的環境建立 (Adobe XD)

簡介 今天會講一下在設計前要怎麼建立環境，畢竟在設計前還是要先備好畫布嘛，但畫布的尺寸要怎麼挑選呢？所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap...

烙詩 ‧ 2021-09-16 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
2 Like 3 留言 1386 瀏覽
鐵人賽 Modern Web DAY 1
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 系列 第 1 篇

技術 【設計+切版30天實作】｜Day1 - 開賽宣言

前言 在開賽前，先來做個小小的自我介紹好了！目前是火箭隊的網頁設計組，加入火箭隊前有上過六角學院的UI課程（上課前完全是0基礎 ><!!!），但卻從...

烙詩 ‧ 2021-09-15 ‧團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社
1 Like 1 留言 1844 瀏覽
鐵人賽 自我挑戰組 DAY 1
30 天轉生到 bootstrap 5 的意識界 系列 第 1 篇

技術 第 1 集：轉生到 Bootstrap 5 世界

30天轉生到 bootstrap 5 的意識界 類型 前端切版 / Sass / Bootstrap 5 這是一部講述 Bootstrap 5 世界的故事，...

Kent ‧ 2021-09-16
0 Like 0 留言 1314 瀏覽

技術 【Bootstrap】x 學習筆記 | Grid 格線系統 - 1

bootstrap 的格線系統非常有名其主要是將整個網頁分成12等份，為什麼是12等份呢!??因為一般網頁佈局大多為 三欄、四欄、六欄的佈局，為了讓這些需求都能...

Hoie ‧ 2020-10-16
4 Like 0 留言 2010 瀏覽
鐵人賽 影片教學 DAY 30
金魚都能懂的Bootstrap5網頁框架開發 系列 第 30 篇

技術 未完！待續？-金魚都能懂的Bootstrap5網頁框架開發

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了，其特色在於使用簡單，開發快速，自訂化功能彈性簡單，不管是前端開發或是後端介面，都是非常適...

CSScoke ‧ 2020-10-15 ‧團隊Amos的推坑教3.0
2 Like 0 留言 1958 瀏覽
鐵人賽 影片教學 DAY 29
金魚都能懂的Bootstrap5網頁框架開發 系列 第 29 篇

技術 神速改出專屬你的 Bootstrap -金魚都能懂的Bootstrap5網頁框架開發

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了，其特色在於使用簡單，開發快速，自訂化功能彈性簡單，不管是前端開發或是後端介面，都是非常適...

CSScoke ‧ 2020-10-14 ‧團隊Amos的推坑教3.0
1 Like 0 留言 1231 瀏覽
鐵人賽 影片教學 DAY 28
金魚都能懂的Bootstrap5網頁框架開發 系列 第 28 篇

技術 Checkbox 與 Radio 組件-金魚都能懂的Bootstrap5網頁框架開發入門

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了，其特色在於使用簡單，開發快速，自訂化功能彈性簡單，不管是前端開發或是後端介面，都是非常適...

CSScoke ‧ 2020-10-13 ‧團隊Amos的推坑教3.0
1 Like 0 留言 1122 瀏覽
鐵人賽 影片教學 DAY 27
金魚都能懂的Bootstrap5網頁框架開發 系列 第 27 篇

技術 輸入群組組件 - 金魚都能懂的Bootstrap5網頁框架開發入門

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了，其特色在於使用簡單，開發快速，自訂化功能彈性簡單，不管是前端開發或是後端介面，都是非常適...

CSScoke ‧ 2020-10-12 ‧團隊Amos的推坑教3.0
1 Like 0 留言 1033 瀏覽
鐵人賽 影片教學 DAY 26
金魚都能懂的Bootstrap5網頁框架開發 系列 第 26 篇

技術 選取組件與檔案組件-金魚都能懂的Bootstrap5網頁框架開發入門

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了，其特色在於使用簡單，開發快速，自訂化功能彈性簡單，不管是前端開發或是後端介面，都是非常適...

CSScoke ‧ 2020-10-11 ‧團隊Amos的推坑教3.0
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙