iT邦幫忙

鐵人檔案

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

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

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

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

Bootstrap 表單| Form-Select

Form-Select (選擇功能表) 要做一個Form-Select首先我們要在<select>上加上.form-select,就會產生跟<...

2023-10-06 ‧ 由 阿沁 分享
DAY 22

Bootstrap 表單| Checks and radios (核取方塊和選項按鈕)

這篇來講我覺得蠻重要也蠻容易搞錯的核取方塊和選項按鈕。Checks(核取方塊)是多選, radios(選項按鈕)是單選。 不論是核取方塊還是選項按鈕,每個選項...

2023-10-07 ‧ 由 阿沁 分享
DAY 23

Bootstrap 表單| Range, Input Group

Range (範圍滑動) 基本設置 在<input type="range">上添加 .form-range 類別使input...

2023-10-08 ‧ 由 阿沁 分享
DAY 24

Bootstrap 表單|浮動標籤、排版

Floating labels(浮動標籤) 如果想要使label浮動在input之內而不占額外空間的話,我們可以在外層加入.form-floating,包覆一對...

2023-10-09 ‧ 由 阿沁 分享
DAY 25

Bootstrap 表單驗證(Validation)

預設瀏覽器就會有表單驗證的功能,在input中加入required屬性。例如: <label for="validationDefault01&...

2023-10-10 ‧ 由 阿沁 分享
DAY 26

Bootstrap 元件| 手風琴 (Accordion)

今天開始講元件了,bootstrap提供很多實用的元件,基本上是複製官方文件的原始碼,搭配通用類別與helpers就行調整,我們可以輕鬆快速客製化它們變成自己想...

2023-10-11 ‧ 由 阿沁 分享
DAY 27

Bootstrap 元件| 警報 (Alerts)

今天來講bootstrap元件的警報(Alerts),Alerts可以用簡短的程式碼就能傳達想要的警示情境效果。 基本使用 Alerts可以用在任何長度的文本,...

2023-10-12 ‧ 由 阿沁 分享
DAY 28

Bootstrap 元件| 標籤(Badge)、麵包屑 (Breadcrumb)

標籤(Badge) 標籤可以用在連結、通知或是按鈕上面,它使用相對字體大小和 em 單位來縮放來符合直屬父容器。.badge的css如下: .badge {...

2023-10-13 ‧ 由 阿沁 分享
DAY 29

Bootstrap 元件| 按鈕(Button) 與 按鈕群組( Button Group)

Button(按鈕) 按鈕算是Bootstrap中非常重要的元件之一,我們不只可以在<button>上使用它,也可以在<a> 或 &lt...

2023-10-14 ‧ 由 阿沁 分享
DAY 30

Bootstrap 元件| 解析卡片(Card)

下面是一個基本的卡片,最外層卡片本體.card帶有圓角邊框,.card本身是沒有padding的;卡片可以給它設寬度,或是可以用格線系統訂寬度更彈性,否則它們的...

2023-10-15 ‧ 由 阿沁 分享