iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

前端超實用框架: Bootstrap 入門到實戰教學 系列

本系列教學文將深入探索 Bootstrap 5 框架的強大功能和靈活性,我們會從基礎開始到探討如何建立一個優秀的響應式網站。
系列的基礎部分將介紹 Bootstrap 的核心組件,如網格系統、utility、helper、導航欄和按鈕。說明他們的原理與如何做修改,使它們能無縫融入自己的專案中。
再來,我們將深入研究更高級的組件,如卡片、輪播、表單,以及彈出式對話框,為讀者構建更豐富的用戶界面。
最後,我們會將所學的知識點實作,去開發一個屬於自己的網站,讓讀者去整合、了解bootstrap 框架如何實踐在真正的項目上,並愛上bootstrap。

鐵人鍊成 | 共 31 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

Bootstrap 格線系統與Flex Box之運用(二)

上一篇我們講的flex屬性、justify-content屬性、align-items屬性、align-self屬性,這一篇我們繼續講Bootstrap fle...

2023-09-26 ‧ 由 阿沁 分享
DAY 12

Bootstrap 的Utilities (一)| 介紹, background, border, colors

關於Utilities(通用類別) 與 Helpers(工具) Utilities(通用類別) bootstrap的Utilities是由bootstrap U...

2023-09-27 ‧ 由 阿沁 分享
DAY 13

Bootstrap 的Utilities (二)|Display, Float, Interactions, Pointer events, Colored links

繼昨天color,今天我們從display講起。 Display 我們可以使用.display-*(*為 block, inline-block, inline...

2023-09-28 ‧ 由 阿沁 分享
DAY 14

Botstrap 的Utilities (三)|Object fit, Opacity, Overflow, Position, Shadows, Sizing,

Object fit Object fit可以指定可替換元素(例如: 或 )的内容應該如何式應到其使用高度和寬度確定的框。寫法是.object-fit-{val...

2023-09-29 ‧ 由 阿沁 分享
DAY 15

Bootstrap 的Utilities (四)| spacing, text, vertical-align, visibility

今天我們把bootstrap utilities學完,那我們開始吧! Spacing bootstrap 的Spacing utilities 提供我們能夠快速...

2023-09-30 ‧ 由 阿沁 分享
DAY 16

Bootstrap Icon 介紹與使用方式

Bootstap5.0提供了提供了1800 多個免費、高質量又有設計感的Icon圖示可以使用,而且我們也不限定要綁在bootstrap下才能使用,也可以獨立引入...

2023-10-01 ‧ 由 阿沁 分享
DAY 17

Bootstrap 的helpers (一)| Clearfix, Color and background, Position, Ratios

Clearfix (清除浮動) 當我們有使用float來做排版時,為了避免外容器沒被撐開的問題,我們可以在外容器添加.clearfix。而它的手法可以從mixi...

2023-10-02 ‧ 由 阿沁 分享
DAY 18

Bootstrap 的helpers (二) | Stretched link, Text Truncate

Stretched link (延伸連結) 使用 Stretched link類別可以使連結可按範圍延伸到設有position:relative;的外層容器,寫...

2023-10-03 ‧ 由 阿沁 分享
DAY 19

網頁親和性與Bootstrap 表單overview

甚麼是網頁親和性? 網頁親和性(Web accessibility),又稱網路無障礙、網路可達性、網路可用性,旨在確保任何人,不論是身體、心理、技術上遭受障礙,...

2023-10-04 ‧ 由 阿沁 分享
DAY 20

Bootstrap 表單| Form-Control 的運用

今天講Form-Control,使用bootstrap的 form-control 類別可以自訂<input>、<textarea>的樣...

2023-10-05 ‧ 由 阿沁 分享