From 74f93574c4f2530c0928e4ee50cdfbb942f552a8 Mon Sep 17 00:00:00 2001 From: Noopy Jekki Date: Wed, 8 Jul 2026 14:31:18 +0800 Subject: [PATCH 01/21] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A?= =?UTF-8?q?=E4=BB=BD=20Bootstrap5=20=E4=BD=9C=E6=A5=AD=E8=88=87=E5=82=99?= =?UTF-8?q?=E4=BB=BD=E9=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- extra/bootstrap-navbar-carousel.html | 292 ++++++++++++++++++++ extra/hw-bootstrap.html | 344 +++++++++++++++++++++++ extra/site-guide.html | 8 + index-bootstrap.html | 398 +++++++++++++++++++++++++++ 4 files changed, 1042 insertions(+) create mode 100644 extra/bootstrap-navbar-carousel.html create mode 100644 extra/hw-bootstrap.html create mode 100644 index-bootstrap.html diff --git a/extra/bootstrap-navbar-carousel.html b/extra/bootstrap-navbar-carousel.html new file mode 100644 index 0000000..a57f64f --- /dev/null +++ b/extra/bootstrap-navbar-carousel.html @@ -0,0 +1,292 @@ + + + + + + + 水晶男孩｜跨時空精選 + + + + + + + +
+
+

跨時空精選

+
+ ALBUMS · STAGES · SIX CRYSTALS +
+
+
+ + + +

從出道專輯到近期巡演，這頁抓幾段最想讓你先看的片段——點下面導覽跳段落，或直接往下滑逛完。

+ + + + + +
+ +
+
+

封面精選

+

巡迴現場的幾個瞬間，先讓眼睛暖身。

+
+
+ +
+
+
+
+ +
+
+

精選作品

+

推廣部這幾個單元，是新朋友最快認識水晶男孩的入口。

+
+
+
+

淪陷瞬間

+

入坑敘事與跨時空軌跡時間軸。

+
+
+
+
+

完整的六顆

+

黑水晶、白水晶六人海報板與團名典故。

+
+
+
+
+

現場的震撼

+

巡迴場次、場館與曲目一次展開。

+
+
+
+
+

黃色留聲機

+

全盛期年表與代表曲目整理。

+
+
+
+
+

Yellow Note

+

視覺演進手記與追星足跡地圖。

+
+
+
+
+

全員發瘋

+

綜藝節目存檔表，六人各自暴走實錄。

+
+
+
+
+
+ +
+
+

舞台片段

+

從專輯封面回望，那些年一起站上的舞台。

+
+
+ +
+
+
+
+ +

本頁使用 Bootstrap 5 完成響應式導覽、Grid 排版、錨點跳轉與 Carousel 展示。

+ +
+ + + + + + + + + diff --git a/extra/hw-bootstrap.html b/extra/hw-bootstrap.html new file mode 100644 index 0000000..086b8b4 --- /dev/null +++ b/extra/hw-bootstrap.html @@ -0,0 +1,344 @@ + + + + + + + 水晶男孩｜精華牆 + + + + + + + +
+
+

精華牆

+
+ ALBUMS · MEMBERS · CONCERTS · YELLOW NOTE +
+
+
+ + + + + + + +
+ +
+
+

淪陷瞬間

+

從出道、解散到多年後的驚喜合體，再走到現役四人體制——這是水晶男孩走了快三十年的路。

+
+
+
+

1997

+

出道

+
+
+
+
+

2000

+

解散

+
+
+
+
+

2016

+

合體

+
+
+
+
+

2019

+

現役四人

+
+
+
+
+
+ +
+
+

完整的六顆

+

黑水晶負責 Rap 與舞蹈，白水晶撐起主唱線——六顆水晶各自發光，合體時更亮。

+
+
+
+

殷志源

+

Leader・Rapper

+
+
+
+
+

李宰鎮

+

Rapper・Dancer

+
+
+
+
+

金在德

+

Rapper・Dancer

+
+
+
+
+

姜成勳

+

Vocalist

+
+
+
+
+

張水院

+

Vocalist

+
+
+
+
+

高志溶

+

Vocalist

+
+
+
+
+
+ +
+
+

黃色留聲機

+

從出道專輯到合體回歸，聲音一路留下的痕跡。

+
+
+ +
+
+
+
+ +
+
+

現場的震撼

+

巡迴現場的燈光與尖叫聲，是照片也留不住的那種震撼。

+
+
+ +
+
+

看完整場次整理 →

+
+
+ +
+
+

Yellow Note

+

推廣部的手記本，記錄視覺演進與追星足跡。

+
+
+
+

視覺進化論

+

從好奇到全端，站主的自述與設計時間軸。

+
+
+
+
+

聖地巡禮

+

台灣行程整理與地圖，成員足跡一覽。

+
+
+
+
+
+ +

本頁使用 Bootstrap 5 完成導覽列、響應式格線、錨點導覽與輪播整合。

+ +
+ + + + + + + + + diff --git a/extra/site-guide.html b/extra/site-guide.html index 47e153e..ea468a6 100644 --- a/extra/site-guide.html +++ b/extra/site-guide.html @@ -531,6 +531,14 @@ minister_ge.html minister 長版備份（Yellow Note 小節亦列） + + hw-bootstrap.html + 精華牆：站內單頁 Bootstrap 5 導覽／格線／輪播練習（學校作業，非主線導覽項目） + + + bootstrap-navbar-carousel.html + 跨時空精選：另一份 Bootstrap 5 作業（Hero＋錨點導覽＋雙 Carousel＋Grid，非主線導覽項目） + diff --git a/index-bootstrap.html b/index-bootstrap.html new file mode 100644 index 0000000..34321af --- /dev/null +++ b/index-bootstrap.html @@ -0,0 +1,398 @@ + + + + + + + SECHSKIES - 水晶男孩傳奇介紹 + + + + + + + + + +
+
+
+

SECHSKIES
水晶男孩

+
+ 六顆永恆的水晶 • 左右命運的傳奇 +
+
+ +
+
+ + + + + +
+ +
+

好奇的開端

+
+

+ 這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。 + 即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我被這些熱血、真誠且專業的大男孩所震撼。 +

+

+ 身為在回歸後才被這場 「黃色奇蹟」 + 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從路人  入坑否定期  瘋狂考古期  坑底躺平深陷其中的過程，證明了魅力可以跨越時間，也正是這一切自我覺醒的起點，驅動我不斷進化的無限可能。 +

+
+
+
+
+
+
+
+ SECHSKIES Logo Concept +
+ 設計概念： + 六角形水晶、黃色海洋與我們的初心Six +
+
+
+
+

成立的初衷

+

+ 以推廣 SECHSKIES 水晶男孩 為核心，旨在透過 專業的視覺策展 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為 + 靈感主軸，延伸至 網頁開發、視覺設計與內容企劃 等多重領域，將對偶像的喜愛轉化為 實質的專業養分。在這裡，你不只能探索他們的 傳奇軌跡，更能見證追星如何激發 + 創作潛能。 +

+
+ 我要用這個網站證明：
追星的孩子不僅不會變壞，更會因為那份守護並推廣的熱情，
讓現在的自己變得比追星前的自己還要厲害! +
+
+
+ +
+
+

LOGO 設計理念

+

+ 「晶」字發想來自六角形的水晶，為了強調水晶男孩初心為六人。上半部形似數字 + 6，搭配演唱會必備的手燈圖案，代表粉絲和水晶密不可分的關係。
色彩配置發想來自無限挑戰六六歌特輯的回歸舞台，成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片黃色海洋，讓成員和粉絲的世界跟著亮了起來。以此片段為契機，設計成黑色系與黃色系的色彩搭配，來記錄那瞬間的感動。 +

+
+
+
+
+ + 無限挑戰 六六歌2 放送畫面：全場黃色氣球海 +
+ + + 回歸演唱會的動人瞬間-黃色氣球海 + +
+
+
+
+ +
+ +
+

跨時空軌跡

+
+ SECHSKIES STORY ARCHIVE +
+ +
+
+ 傳奇誕生 + 凍結世界 + 完整回歸 + 夢境成真 + 九月首演 + 溫柔陪伴 + 未完待續 +
+
+ +
+
+

傳奇的誕生：六道光芒劃破韓流夜空

+

1997年4月15日，水晶男孩以強悍的《學園別曲》為起點，「黑水晶｜Rap與舞蹈」、「白水晶｜主唱」的雙色魅力交織，奠定了 + K-POP第一代傳奇的地位，開創了屬於黃色海洋的盛世與巔峰。

+

在那段被韓劇《請回答1997》奉為經典的歲月裡，水晶男孩與 + H.O.T. + 並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰，還是為了買票露宿街頭的狂熱，白與黃的旗幟對決，成了那個世代集體記憶的起點。

+
+ +
+

遺憾的休止符：凍結有你的世界

+

在最燦爛的時刻，這首華麗的樂章卻被迫畫下了休止符，2000年5月正式解散。成員各自發展走出了不同道路，水晶進入休眠期。 +

+

那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場，將未完的旋律封存在冷冽的空氣中。這一停頓，就是長達十六年的靜默，成為我們心中最完整、卻也最令人心碎的凝煉模樣。 +

+
+
+

感動合體：那一晚，我們找回了完整

+

塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000 + 年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。

+ + 點我見證傳奇 + +
+
+

從路人到鐵粉：從夢境進現實

+

當《無限挑戰》的燈光熄滅，原以為那場重逢只是曇花一現。當我們陷入瘋狂但卻不敢過度期待合體、只在螢幕前等待每個oppa消息的時光，終於盼到了 5月 11 + 日與 YG的簽約消息，所有新舊小黃從絕望中打醒。從未知的空虛到塵埃落定的感動——原來這不是終點，奇蹟真的在現實生了根。

+
+
+

九月首場：黃色海洋裡的羈絆

+

四月的重逢是老黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間的愛情。雖然遺憾沒能親眼看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。 +

+
+
+

第六顆水晶：另一種形式的陪伴

+

而志溶雖然未參與合體，卻在十二月聖誕夜那場釜山演唱會落幕當天，帶著孩子在《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起寫下新的篇章。 +

+
+ +
+

未完待續

+
+
+
+ +
+ + + + + + + + + + \ No newline at end of file From ad1fe659669b1a88918d6cefc29ea15f5c9d819a Mon Sep 17 00:00:00 2001 From: Noopy Jekki Date: Wed, 8 Jul 2026 14:53:59 +0800 Subject: [PATCH 02/21] =?UTF-8?q?feat:=20RWD=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index-bootstrap.html | 66 ++++++++++++++++++++++++++------------------ 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/index-bootstrap.html b/index-bootstrap.html index 34321af..33139c9 100644 --- a/index-bootstrap.html +++ b/index-bootstrap.html @@ -53,10 +53,13 @@ text-decoration: none; } - /* ── 現有 portal-nav 疊上 Bootstrap navbar / navbar-nav / nav-link class 後的還原保護： - .navbar、.navbar-expand-lg、.navbar-dark 都是「類別選擇器」，跟 style.css 原本的 - .portal-nav / .portal-nav>ul>li>a 同量級或更高，載入順序在後會贏，所以外觀會跑掉。 - 這裡把原本的數值原封不動疊回來（#portal-primary-menu 用 id 選擇器保證優先權最高）。── */ + /* ── 現有 portal-nav 疊上 Bootstrap navbar / navbar-expand-lg / navbar-dark class 後的還原保護： + Bootstrap 的 .navbar{display:flex...} 沒有寫在 media query 裡、卻跟 style.css + 原本桌機／手機兩種 .portal-nav 版面同量級，且整包 bootstrap.min.css 載入在後， + 兩種寬度都會被它蓋掉——這是手機漢堡版面失效的原因。這裡照原本的中斷點分別疊回去。 + 內層 .portal-nav>ul、.portal-nav>ul>li>a 這些選擇器本來就贏過 Bootstrap 的 + .navbar-nav／.nav-link（多一層 combinator，優先權本來就比較高），不需要額外處理， + 上一版加的 #portal-primary-menu id 選擇器優先權太高，反而蓋掉手機版的收合邏輯，已移除。── */ body.home-page .portal-nav { width: 100%; margin: 0 0 14px; @@ -76,30 +79,39 @@ box-sizing: border-box; } - #portal-primary-menu { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; - gap: clamp(8px, 1.4vw, 18px); - list-style: none; - margin: 0; - padding: 0; - min-width: 0; - flex: 1 1 200px; - } + @media (max-width: 991px) { + body.home-page .portal-nav { + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: + "logo toggle" + "menu menu"; + align-items: center; + column-gap: 0.75rem; + row-gap: 0; + } - #portal-primary-menu>li>a { - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; - line-height: 1.15; - text-decoration: none; - color: var(--color-brand); - font-size: 0.95rem; - letter-spacing: 1px; - padding: 2px 4px; + body.home-page .portal-nav.portal-nav--open { + position: fixed; + inset: 0; + width: 100%; + height: 100%; + height: 100dvh; + margin: 0; + padding: + max(0.85rem, env(safe-area-inset-top, 0px)) clamp(14px, 2vw + 10px, 32px) max(1rem, env(safe-area-inset-bottom, 0px)); + z-index: 10000; + overflow: hidden; + background-color: var(--color-bg-raised); + grid-template-columns: 1fr; + grid-template-rows: auto minmax(0, 1fr); + grid-template-areas: + "top" + "menu"; + row-gap: 1.75rem; + align-content: start; + box-sizing: border-box; + } } /* ── 新增：跨時空軌跡段落快覽（錨點導覽用，低調文字列，不做按鈕感） ── */ From 7f3d8e01ad45df8044e82723794c3930e8760aa3 Mon Sep 17 00:00:00 2001 From: Noopy Jekki Date: Wed, 8 Jul 2026 16:17:52 +0800 Subject: [PATCH 03/21] =?UTF-8?q?docs:=20=E5=82=99=E4=BB=BD=20Bootstrap=20?= =?UTF-8?q?=E4=BD=9C=E6=A5=AD=E5=B0=8D=E8=A9=B1=E7=B4=80=E9=8C=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2026-07-08-bootstrap-homework.md | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 developer-rules/session-logs/2026-07-08-bootstrap-homework.md diff --git a/developer-rules/session-logs/2026-07-08-bootstrap-homework.md b/developer-rules/session-logs/2026-07-08-bootstrap-homework.md new file mode 100644 index 0000000..34bde5c --- /dev/null +++ b/developer-rules/session-logs/2026-07-08-bootstrap-homework.md @@ -0,0 +1,39 @@ +# 對話紀錄：Bootstrap 5 作業（2026-07-08） + +> 這份是這次對話的重點備份，不是規範檔。規範仍以 `developer-rules/rules/` 為準。 + +## 起因 + +老師的 Bootstrap 5 課堂範例重點：Navbar、RWD 格線（container/row/col）、錨點導覽、Carousel（同頁多組需不同 id、可放進 grid 欄位）。目標是做成符合本站風格的作業／作品展示頁，而不是照抄範例或做成教學筆記。 + +## 過程與轉折 + +1. **第一版**（`extra/hw-bootstrap.html` 初版）：做成「Bootstrap 元件練習誌」，內容偏向解釋 navbar/grid/carousel 是什麼 → 被打回，因為變成讀書筆記，沒有應用在專案內容上。 +2. **第二版**：改寫同一檔案為「精華牆」，用真實內容（淪陷瞬間／完整的六顆／黃色留聲機／現場的震撼／Yellow Note）取代教學說明，Bootstrap 降到最後一行小字帶過。 +3. 另外新增一頁 **`extra/bootstrap-navbar-carousel.html`**（跨時空精選）：Hero＋Sticky Navbar 錨點導覽＋兩組不同 id 的 Carousel（一組放進 grid 欄位）＋Grid 卡片區＋結尾備註，符合站主指定的頁面結構規範。 +4. 最後一個任務：**把 Bootstrap 實際套進首頁**，但不能動到 `index.html` 本體 → 建立備份 **`index-bootstrap.html`**，只在這份備份裡： + - 把既有的 `