iT邦幫忙

bootstrap5相關文章
共有 115 則文章
鐵人賽 Modern Web DAY 23
手把手web初學者 系列 第 23

技術 讓網頁有條不紊的隱形柵欄-Bootstrap Grid system

今天就要來介紹在RWD中常使用到的 Grid system 網格系統 又可以稱作柵欄式佈局Bootstrap官網教學▼首先先來看以下這張圖▼由**欄位 (col...

鐵人賽 Modern Web DAY 22
手把手web初學者 系列 第 22

技術 RWD好幫手-初識Bootstrap

今天要來介紹跟RWD佈局非常相關的Bootstrap點此到官網下載:Bootstrap對於還不熟悉CSS的人來說實在受益良多,當然也不只侷限於對CSS不熟悉的X...

鐵人賽 Modern Web DAY 22
手把手web初學者 系列 第 22

技術 RWD好幫手-初識Bootstrap

今天要來介紹跟RWD佈局非常相關的Bootstrap點此到官網下載:Bootstrap對於還不熟悉CSS的人來說實在受益良多,當然也不只侷限於對CSS不熟悉的X...

鐵人賽 Modern Web DAY 7

技術 Bootstrap RWD應用,製作簡易「切換頁面」

製作簡單點選切換互動,搭配Bootstrap就能輕鬆有RWD的效果呦!此範例需引用Bootstrap, fontawesome, jQuery呦。 原頁面比例...

技術 Vue框架加上Bootstrap5 modal ?

在專案開始時遇到一個問題,就是關於Modal該如何關閉,如何開啟?當然可以用data-bs-target,data-bs-dismiss,但是會有相對的副作用,...

鐵人賽 自我挑戰組 DAY 30

技術 第 30 集:Bootstrap 客製化秘技

用 meme 圖講述這一趟 30 天轉生到 Bootstrap 5 的意識界 的心境。

鐵人賽 自我挑戰組 DAY 29

技術 第 29 集:Bootstrap 客製化 component 元件樣式

此篇延續上一篇元件樣式修改,此篇著重在元件的動態效果樣式。 option 參數 撰寫動態效果起手式。 $enable-reduced-motion:...

鐵人賽 Modern Web DAY 30

技術 【設計+切版30天實作】|Day30 - 最後一天了嗚嗚嗚的30天參賽心得

感人時刻 今天是鐵人賽30天的最後一天了,有種「嗯?30天了喔?」的奇妙感覺!畢竟已經習慣每天上來發文,也習慣隊友們每天互相提(恐)醒(嚇)發文!!! 突然有點...

鐵人賽 自我挑戰組 DAY 28

技術 第 28 集:Bootstrap 客製化 component 元件樣式

此篇會介紹如何修改 Bootstrap 元件樣式。 事前準備 須先了解變數設置、通用類別設置,再繼續閱讀會更好消化呦。 _variable.scss...

鐵人賽 自我挑戰組 DAY 27

技術 第 27 集:Bootstrap 客製化 reboot 重置

此篇會介紹 Bootstrap 使用的 css reset 檔案 _reboot.scss。 事前準備 css reset 基礎概念 還不懂 css...

鐵人賽 自我挑戰組 DAY 26

技術 第 26 集:Bootstrap 客製化 root 變數

此篇會解析 Bootstrap root 是如何自定義生成自己的 CSS 樣式。 原始碼 使用到兩隻檔案: _root.scss:主要生成變數樣式入口。...

鐵人賽 自我挑戰組 DAY 25

技術 第 25 集:Bootstrap 客製化 RFS 響應式文字

此篇會介紹 Bootstrap 中的 rfs,是如何做到依據視窗大小,來計算適合的元素尺寸。 淺談 rfs Responsive Font Sizes 簡...

鐵人賽 Modern Web DAY 26

技術 【設計+切版30天實作】|Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

前面完成了「Carousel」區塊,今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight:Regular F...

鐵人賽 自我挑戰組 DAY 24

技術 第 24 集:Bootstrap 客製化 Container 容器

此篇會教學如何將 Bootstrap container 容器,自幹一個出來。 若是使用 Wrapper 的朋友,可以參考:淺談 Container Wra...

鐵人賽 自我挑戰組 DAY 23

技術 第 23 集:Bootstrap 客製化 Grid 格線系統

此篇會教學如何將 Bootstrap grid 格線系統,自幹一個出來。 事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...

鐵人賽 Modern Web DAY 24

技術 【設計+切版30天實作】|Day24 - Steps區塊 - 如何做出漸層背景?

前面完成了「Pros」區塊,今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight:Medium Font-size:24p...

鐵人賽 自我挑戰組 DAY 22

技術 第 22 集:Bootstrap 客製化 utilities(下)

此篇延續 Bootstrap 客製化 Sass utilities(上)最後尚未介紹的 generate-utility,解析 generate-utilit...

鐵人賽 Modern Web DAY 23

技術 【設計+切版30天實作】|Day23 - Pros區塊 - 看似無邊框的三欄式卡片,到底要對準哪條欄位?

前面完成了小廣告區塊,今天來完成「平台好處 - pros」的區塊。 數據收集 card標題的樣式 Font-weight:Bold Font-siz...

鐵人賽 自我挑戰組 DAY 21

技術 第 21 集:Bootstrap 客製化 utilities(上)

此篇會教學如何將 Bootstrap 通用類別 utilities 自幹一個出來。 事前準備: 原始碼架構 編譯 sass 環境 sass 基礎...

鐵人賽 Modern Web DAY 22

技術 【設計+切版30天實作】|Day22 - 設計小廣告 - 背景上又有背景到底怎麼切!

前面完成了「PainPoints」,今天來完成這一塊「小廣告」的區塊。 數據收集 Content標題的樣式 Font-weight:Bold Fon...

鐵人賽 自我挑戰組 DAY 20

技術 第 20 集:Bootstrap 客製化 Sass variable

此篇分享著重在介紹 _variable.scss 變數介紹,以及如何客製化修改。 事前須看完Bootstrap 客製化 Sass 必備知識 有介紹許多今天...

鐵人賽 Modern Web DAY 21

技術 【設計+切版30天實作】|Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱 昨天完成header的部分了,所以接下來就會進入main的部分,今天要完成的是「PainPoints」的區塊。(如下圖) 數據收集 標題的樣式 F...

鐵人賽 自我挑戰組 DAY 19

技術 第 19 集:Bootstrap 客製化 Sass 必備知識(下)

此篇接續客製化 sass 基礎語法以及觀念下集,尚未觀看上集可以先看完再來看下集。 Operators 運算 介紹 sass 原生的 運算 功能,以往 c...

鐵人賽 Modern Web DAY 20

技術 【設計+切版30天實作】|Day20 - Navigation bar - 打破預設的navbar排版

大綱 昨天完成了header的下半部分,今天的任務就要來完成header的上半部分 —— Navigation bar!廢話不多說,馬上開始吧! 數據收集 n...

鐵人賽 自我挑戰組 DAY 18

技術 第 18 集:Bootstrap 客製化 Sass 必備知識(上)

此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。 編譯 scss 註解有分為 會被編譯、不會被編譯 兩種。 寫法:// // 不...

鐵人賽 Modern Web DAY 19

技術 【設計+切版30天實作】|Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader?

大綱 前半段都在設計,今天開始就要進行切版了!(緊張!!!)那我們header的部分分成heroheader和navbar,今天的任務是切「Heroheader...